Enable color swatches with Theme Editor
Swatches allow you to groups different products into separate groups based on common characteristics (such as color and size). Each swatch will be presented by an set image (or color for color swatches). Color swatches are thumbnail images used to represent particular colors, patterns, etc. for product variants.
For example, one print-on-demand product with same design in different styles can have swatches as below:
A. Prepare your products
B. Enable color swatches on Inside themes
C. Enable color swatches on Roller themes
Your option's name must be either Color, Colors, Colour, or Colours (upper-case or lower-case is ignored).
Your color values must be in the following list. You can add non-letter characteristics (such as spacing, - and _), and we will remove them when comparing with supported color names. Upper-case and lower-case is ignored.
If your color value of a product is not a supported value, we will not show color swatch for this product.
ShopBase supports all colors from Burgerprint, Gearment, Gearlaunch.
Please refer to this list to find the supported color codes and color names on ShopBase.
From your ShopBase admin site, go to Online Store > Themes and select Customize.
In Settings select Product.
In Layout > Variant style, select Buttons.
In Options settings > Swatches, tick Enable color swatches.
Click Save.
From your ShopBase admin site, go to Online Store > Themes and select Customize.
In Settings, select Product.
In Product form > Options style, select Buttons.
In Swatches, tick Enable color swatches.
Click Save.
Overview of Themes
Edit a product's options
For example, one print-on-demand product with same design in different styles can have swatches as below:
In this article
A. Prepare your products
B. Enable color swatches on Inside themes
C. Enable color swatches on Roller themes
A. Prepare your products
Your option's name must be either Color, Colors, Colour, or Colours (upper-case or lower-case is ignored).
Your color values must be in the following list. You can add non-letter characteristics (such as spacing, - and _), and we will remove them when comparing with supported color names. Upper-case and lower-case is ignored.
If your color value of a product is not a supported value, we will not show color swatch for this product.
ShopBase supports all colors from Burgerprint, Gearment, Gearlaunch.
Please refer to this list to find the supported color codes and color names on ShopBase.
B. Enable color swatches on Inside themes
From your ShopBase admin site, go to Online Store > Themes and select Customize.
In Settings select Product.
In Layout > Variant style, select Buttons.
In Options settings > Swatches, tick Enable color swatches.
Click Save.
C. Enable color swatches on Roller themes
From your ShopBase admin site, go to Online Store > Themes and select Customize.
In Settings, select Product.
In Product form > Options style, select Buttons.
In Swatches, tick Enable color swatches.
Click Save.
Related articles
Overview of Themes
Edit a product's options
Updated on: 16/05/2024
Thank you!