Creative - Theme settings - Display custom swatches

Creative

OS 2.0 themes

The Creative theme has the ability to display custom swatches to represent your product options or variants. Swatches can be used as a visual alternative to using dropdowns or 'button' style variant selectors.

Custom swatches are displayed in the following places:

• Product pages
• Product grids
• Quick Shop drawers and modals

Typically custom swatches are used to represent color variants but Creative can display custom swatches for any variant type. For example if you sell coffee you may wish to use different shades of brown to denote coffee strength.

Custom swatches can be added in the following ways:

• Let the theme automatically detect one of the 140 standard built-in Hex codes
• Add your own custom Hex or RGBA code
• Add your own gradient code
• Upload a swatch image

The following article will explain how to carry out the tasks listed above.

Display custom swatches on product pages

1

Click the  Customize button in the  Themes area of your Shopify admin. This will take you to the theme editor.

2

Once the editor is open navigate to  Home page on top of the screen. 

3

Click on Home page > Products and choose your Product template. The default product template is named 'Default product'.  

4

Once the Product template is open, in Product page find the block called Variant picker and click on it.

5

Once Variant picker is open find the Product variant style dropdown and select Color swatches and buttons.

6

Lastly, save your work and then check that all is working as expected.

Display custom swatches on the product grid

1

Click the  Customize button in the  Themes area of your Shopify admin. This will take you to the theme editor.

2

Once the editor is open navigate to Theme settings.

3

Once you are viewing the Theme settings, click on Product grid. In the product grid settings enable Show swatches and set the swatch size if you wish.

4

Once Show swatches has been enabled they will be displayed on the collection pages and inside any section using the grid settings - such as 'Featured Collection' and 'Recommended Products'

5

Lastly, save your work and then check that all is working as expected.

Display custom swatches in Quick Shop drawers & modals

1

Click the  Customize button in the  Themes area of your Shopify admin. This will take you to the theme editor.

2

Once the editor is open navigate to Theme settings

3

Once you are viewing the Theme settings click on Quick Shop.

4

Once Quick Shop is open find the Product variant style dropdown and select Color swatches and buttons.

5

Lastly, save your work and then check that all is working as expected.

Types of swatches

Automatic colors

If you are using swatches for color options then the Creative theme will automatically detect and set up custom swatches for you based on the 140 standard CSS colors used across all modern browsers https://www.w3schools.com/cssref/css_colors.asp. So if you use a standard color like 'Red' in your product admin then the theme will display the standard CSS shade of red.

Manual color code

If you wish to use a non-standard color such as 'hot pink', or if you don't like the standard CSS shade of red (for example) then you can manually override this. You can add:

• A Hex code or hexadecimal code i.e Red: #f5f5f5 (in this format)
• Some rgba code i.e Red: rgba(245, 40, 145, 0.8) (in this format)
• Some rgba gradient code i.e Red: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%) (in this format)

Custom images

You can upload images to be used as custom swatch. For example if you have a product using camouflage or patterns etc.

1

Click the  Customize button in the Themes area of your Shopify admin. This will take you to the theme editor.

2

Once the editor is open navigate to theme Settings, then click on Swatches

3

Scroll down to the Custom swatch images field

4

Add the variant and the name of the file so the theme can assign the right image to the right variant. For example if your color variant is 'Camo' and color swatch image name is 'camo.png'. Add  Camo: camo.png to this field.

5

Lastly, save your work and then check that all is working as expected.

Variant trigger names

We have built in the option for you to set up custom variant triggers inside your store. You would use this for the following reasons:

Non-color options

Although the custom swatches will be used primarily for color variants, they can be used in different ways. For example you might be selling coffee and your variant could be ‘Strength’ or ‘Flavour’, you could use these swatches to represent those options. In fact you can assign these swatches to ANY variant and they will show on the product page, grids, and Quick Shop modals.

You could use it for texture, flavour, heat of chilli sauce, materials and much more. For example add Strength to the Variant trigger name(s) field, then add Dark: #744700 to the Custom swatch colors field. This would display a dark brown swatch to represent a dark roast strength of coffee.

Translations

As discussed in the paragraph above the theme needs a trigger word so it can associate a color code/image with your product option. Because we don't know what language your store will be translated into, you can use this field to ensure the trigger word always works. If your store will be available in English (US), French and German and you are using Color as your product option to trigger swatches then you would need to add Color, Couleur and Farbe to this field.

If you are using ‘Strength’ as a trigger for your coffee options and have your store available in 5 languages, you have to add the word ‘Strength’ here translated 5 times. So if you are using ‘Strength’ AND ‘Color’ to trigger swatches AND you have 5 languages, you’ll need all 10 terms in this box.