Your customers are tired of variant confusion? Let the Option Table in Be Yours 7.1.0 be your hero!
This visually appealing, organized interface allows for effortless comparison of product options, enabling customers to confidently find their perfect match. Experience increased conversion rates and brand loyalty as your customers fall in love with the clarity and ease of your product selection process.
On this page
Requirement
You must have Be Yours version 7.1.0. or later.
Steps
Follow these simple steps to turn on and set up the Option table section:
-
On your Shopify Admin dashboard, click Online Store > Themes.
-
On the Themes page, choose Be Yours theme and click on the theme's button Customize.
-
On Home page (or other page template) > Template section group > Add section > Click on the Option table.
-
This Option table section is displayed prominently on your website with placeholder date as shown in the image below. Add up to 5 product blocks to showcase your favorites.
-
Setting up Option table section
Section settings Settings Description Option table Criteria option -
Enters the exact Variant name from your product. (Eg. 'Size', 'Color',...)
-
Once you enter the correct Variant name, this feature will automatically scan and identify all available variant values, then display them in the table.
-
For example, we enter
Size
here.In 'Earthy Elegance' product, Size variant has XS, S, M, L, and XL.
The table will display as the image below.
Heading The title of the section. Heading size The size of the heading: Small, Medium or Large. Heading tag Selects the heading tag to structure and organize your content for SEO. Button label The text that displays on the button. Button link The URL of the button. Button size The size of the button: Small, Medium or Large.
Ticks or unticks Use underline button link.
Desktop content alignment The alignment of the content on desktop: - Left
- Center
- Right
Mobile layout Mobile content alignment The alignment of the content on mobile browser: - Left
- Center
- Right
Show section divider Shows a line divider above this section. -
-
Setting up Product block
-
Choose a product you want to display. For example, the 'Earthy Elegance' product.
-
This section allows up to 5 product blocks. Choose the products you want to display.
-
Remember, all product images should be transparent for optimal display.
For a closer look at transparent and non-transparent images, and to explore solutions, head to the next part.
-
-
Some notes for products' images
Notes:
-
Transparent images are key for optimal display in this section.
Here's how 'Transparent images' and 'Non-transparent images' differ:
Transparent images Non-transparent images -
If your current product images aren't transparent, Click Select image in Custom image for transparent versions of your product images.
For your reference, kindly take a look at these images below:
-
How does it look?
On Desktop browser On Mobile browser
Need Further Assistance
If you encounter any issues or need additional help with your Be Yours theme, don't hesitate to reach out to Roartheme's support team for expert guidance.
Scan the QR code to get support within 8 hours via RoarTheme ’s Whatsapp
Share:
Option table with Metaobject and Metafield
How to set up sibling product swatches