Variant selector

Variant selector (1).png

Variant layout

Column: outputs all product variants and options in columns.

Row: displays all product options as dropdowns, creating a compact layout.

Stretch dropdowns: select this option to stretch the dropdowns to full-width.

Pills

Displays the variants as clickable buttons. If you want to use pills, please select the column layout above.

Variant label: type in variant label in this field to activate pills. Separate the label names by commas to support multiple options, for example, ‘Style’, ‘Size’.

Pills layout: define layout of the pills.

Color pills

Variant label: type in variant label in this field to activate pills.

Show color name: displays color name next to the color pills. If disabled, color names will be displayed on hover.

Custom color pills

To incorporate custom color pills into your products, follow these steps:

Prepare your color images as PNG files with names matching the designated product colors. For instance, if you've labeled a color option as Red, ensure the image file is named red.png. If you have an option labeled as Ocean blue, the image should also have the ocean_blue.png name. For these images, we recommend a resolution of 60x60px and the smallest possible file size, preferably below 20kb.
Open ‘Shopify admin’ → ‘Content’ → ‘Files’ and upload the prepared images.
Once you've activated the color pills feature, the images will be automatically linked to your respective products.