Product page: Display color swatches - From Venue version 7.0

OS 2.0 themes

For Venue version 4.4.0 to 6.0.3 click here

The Venue theme has the ability to display your product color variants as swatches instead of text. The theme will do this for you automatically but you can also add custom colors if you wish.

Insight

You can also upload images to be used as swatches, for example, if you have a product using camouflage or gradient patterns. Please see the article linked at the bottom of this page to learn how to use image swatches.

Easy: Set up color swatches automatically

The Venue theme can automatically detect and set up color swatches for you based on the 140 standard CSS colors used across all modern browsers https://www.w3schools.com/cssref/css_colors.asp. You just need to use the exact same spelling as the CSS color.

This means if you have a T-shirt product and you have set up a color variant of 'Red', the theme will detect this and create a red swatch for you.

Insight

The colors are not case sensitive so you can type 'red' or 'Red' in your product admin page when setting up the variant and it will work.

You can display color swatches on collection  Product grid, Quick shop and Product page.


Display color 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'.

4
Once 'Show swatches' has been enabled they will be displayed on the collection pages .
5

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

If you already have products set up with color variants you can check the feature is working.


Display color swatches on Quick shop:

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.

If you already have products set up with color variants you can check the feature is working.


Display color swatches on  Product page:

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 block '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.

If you already have products set up with color variants you can check the feature is working.


Manual: Set up color swatches manually

If the shade of built in colors doesn't please you or you wish to add a custom color like 'Brass' you can easily achieve this. Alternatively you might like the color automatically chosen for red but want to use the name 'Hot Red'. 

Steps Venue from version 7.0 

1
Head to the Themes area of your Shopify admin. 
2
Click on the  Actions dropdown button top right of the thumbnail of your live theme and select  Edit code.
3
Scroll down the left hand list of files until you find the file ' product-options.liquid' in 'Snippets'. 
4
Click into the ' product-options.liquid' file and you can see some custom colors we have already set up. The reason we have done this is some of the standard CSS colors can be very harsh and unpleasant.
5

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

Information

Older versions of Venue before 7.0 have files called ' product-grid-swatch.liquid' and ' product-swatch.liquid'. Follow the instructions above but do the changes only in these files, not in file ' product-options.liquid'.

Before 4.6.3, have a file called 'swatch-colors.liquid' in 'Snippets'. Follow the instructions above but do the changes only in this file, not in 'product-grid-swatch.liquid' and 'product-swatch.liquid'.

Things you might want to do:

  • Add a new color.
    Simply copy the last color in the list such as {%- assign swatch_color_blue = '#1C4AEC' -%} paste it to the bottom of the list (no spaces) and change the color name and hex code to something like {%- assign swatch_color_ brass = '#FBB034' -%

  • Change the shade of an existing CSS color. 
    Simply copy the last color in the list such as {%- assign swatch_color_blue = '#1C4AEC' -%} paste it to the bottom of the list (no spaces) and add the color name and hex code to something like {%- assign swatch_color_ plum = '#7F458E' -%} this will change the standard CSS Plum to a new color of your choosing.
  • Change the shade of an one of our overrides. 
    Look in the list of custom color overrides already set up. Find 'red' for example and simply change the hex code #FF4136 to something you prefer.

Information

Custom color names must begin with ' swatch_color_'  - if in doubt copy and paste one of the existing overrides then edit that.

The name of the color must be all lowercase and without spaces. i.e use ' swatch_color_hotred' if you have written 'Hot Red' or 'hot red' in your product admin.

Still need help? Contact Us Contact Us