Product page: Display custom swatches - Venue 7.0 onwards
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 custom swatches automatically
The Venue theme can 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. 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 custom swatches on collection Product grid, Quick shop and Product page.
Display custom swatches on the Product grid:
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 custom swatches on Quick shop:
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 custom swatches on Product page:
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 custom 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
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.