Customize Variant Display on Product Pages

The Variant display settings let you control how product options appear on the product detail page.

For example, you can display size options as a list, show product options in a dropdown, or display color options as visual thumbnails instead of plain text.

This guide explains how to set up variant display in BurgerShop Theme Editor and how to show color options as color thumbnails

On this page

• How variant display works
• Before you start
• Access variant display settings
• Check the option order in Product admin
• Choose how each option is displayed
• Show color options as thumbnails
• Preview and save changes

How variant display works

Product variants are created from product options, such as:

• Color
• Size
• Style
• Material
• Age
• Pack

In BurgerShop Theme Editor, each option has its own display setting based on its order in the product setup.

For example:

f you want the Color option to display as color thumbnails, you need to set the matching option display to Thumbnail.

Before you start

Before changing variant display settings, make sure:

• Your product has variants.
• Your product options are already created in BurgerShop admin.
• You know the order of each product option.
• The theme you are editing is the correct theme.
• You are editing the Product detail template.

Important
The option order matters. If Color is the first product option, update Display option 1. If Color is the second product option, update Display option 2.

Access variant display settings

You can manage variant display from the Theme Editor.

Steps:

1. Log in to your BurgerShop admin.
2. Go to Online store.
3. Select Themes.
4. Open the theme you want to edit.
5. Click Customize.
6. In the page selector at the top, choose Product detail.
7. In the left sidebar, open Sections.
8. Under Main content, click Main information.
9. Scroll to the Variant settings.

Check the option order in Product admin

Before selecting a display type, check the product option order in the product setup.

Steps:

1. From your BurgerShop admin, go to Products.
2. Open the product you want to check.
3. Review the product options

Choose how each option is displayed

BurgerShop supports different display styles for product options.

Common display styles include:

teps:

1. Go to Product detail > Main information.
2. Find the Variant section.
3. Open the display dropdown for the option you want to configure.
4. Select the display style:
   • List with name
   • Dropdown
   • Thumbnail
5. Review the product page preview.
6. Click Save

Show color options as thumbnails

If you want the Color option to display as visual color swatches instead of text, set the matching option display to Thumbnail.

Example: Ada Backpack

The product Ada Backpack has Color as the first product option.

To show Color as color thumbnails:

1. Go to Online store > Themes.
2. Click Customize.
3. Select Product detail from the page dropdown.
4. Open Sections > Main information.
5. Scroll to Variant.
6. Find Display option 1.
7. Select Thumbnail.
8. Click Save.

After saving, the Color option can display as visual swatches instead of plain text.

COLOR: Black
● ○ ● ●

mportant
If Color is option 2, select Thumbnail for Display option 2 instead. If Color is option 3, select Thumbnail for Display option 3.

Recommended setup

For most products, use this setup:

Preview and save changes

After updating variant display settings, review the product page carefully.

Checklist:

• Color displays as thumbnails if needed.
• Size displays clearly.
• Dropdown options work correctly.
• Unavailable variants behave as expected.
• Variant selection updates the product correctly.
• The layout looks good on desktop and mobile