Compare & Choose: Dive Into options with 'Option table' section

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

1. Requirement

You must have Be Yours version 7.1.0. or later.

2. Setting up an Option table section

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 4 Product blocks as shown in the image below. Go to each block and choose your own product to fulfill the table.

  5. Setting up Option table section

    Section settings
    Settings
    Description
    Option table
    Criteria option
    • Enters the exact Option name from your product. (Eg. 'Size', 'Color',...)

    • Once you enter a valid option name, this feature will automatically scan and identify all available option values, then display them in the table.

    • For example, we enter Size here.

      In 'Earthy Elegance' product, Size option 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

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.