Basic Option table section set up

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

1. Requirement

    

   You must have Be Yours version 7.1.0. or later.

2. Steps

    

   Follow these simple steps to turn on and set up the Option table section:

   1. On your Shopify Admin dashboard, click Online Store > Themes.

   2. On the Themes page, choose Be Yours theme and click on the theme's button Customize.

      

   3. On Home page (or other page template) > Template section group > Add section > Click on the Option table.

      

   4. 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.

      

   5. 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.

   6. 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.

3. 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:

     

     

     

4. 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