Choose type variant swatch

We offer various type to display variant options. You can choose from the options below to customize how the variants appear.

The variant type will appear on both the collection page and the product page.

1. Swatch

Color

Choose colors to showcase your variants. This type allows you to display options using color swatches, making it easy for customers to pick their preferred color with just a click.

Suitable for variations color.

Swatch - Color

Upload custom images for each variant, either through file upload or by linking images. This gives you the flexibility to show your variants visually, making it easier for customers to see exactly what they’re selecting.

Suitable for products with common variations, similar variations will share the same image like material, sample code, sample series.

Swatch - Image Custom

Image automate (main image for selected variant)

Automatically show the main image for the selected variant. When a customer chooses a variant, the image updates to reflect that option, helping them see exactly what they're getting.

Suitable for almost all types of variants (like color, model, type, material,...)

Swatch - Image Automate

2. Button type

Display variant options as clickable buttons. Customers can simply click a button to choose their desired variant, making the selection process fast and intuitive.

Suitable for simple variants (like size, short text, type, material,...)

Button basic
Button without border
Pill button

3. Dropdown

Show the variant options in a dropdown list. This type is great for keeping things neat and organized, offering a clean way for customers to choose their options.

This type is perfect for keeping your product page clean and organized, especially when you have many variants (like text, long text, many options). It’s ideal for products with multiple options that you want to present in a simple, easy-to-navigate format.

Dropdown basic
Dropdown - Swatch Color
Dropdown - Swatch Image

4. Variant with price

Display the variant options along with the price. This gives customers a clear view of the price for each variant, making it easy for them to make a decision based on their budget.

Suitable for different price points for variant options.

Variant with price basic
Variant with price - Swatch Color
Variant with price - Swatch Image


Advanced Editing Style Variations

Last updated