Basic Option table section set up

Your customers are tired of variant confusion? Let the Option Table in Be Yours 7.1.0 be your hero!

Click here to see our demo

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:
    6. Left
    7. Center
    8. Right
      		9.
      Mobile layout
      Mobile content alignment The alignment of the content on mobile browser:
    9. Left
    10. Center
    11. Right
      		12.
      Show section divider Shows a line divider above this section.

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

We hope this article has been helpful. If you have any questions or concerns about this feature, please do not hesitate to contact our team for support.

Back to Be Yours Support