Product page: Display custom swatches

For Venue version 7.0 and later click here.

From version 4.4.0 onwards 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 ad custom swatches 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.

Steps Venue from version 4.4.0 to 6.0.3 

  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 any product page. You can use the dropdown at the top of the screen as a shortcut.
  3. Once you are viewing a product page click on the Product page section on the left of the editor.
  4. Once this section is open look for the 'Product variant style' dropdown and select 'Color swatches and buttons'.
  5. Save.
  6. If you already have products set up with color variants you can check the feature is working.
  7. Return to the Shopify admin.

Now that the feature is switched on you can edit your product variants to use the standard CSS color names https://www.w3schools.com/cssref/css_colors.asp. Any new products added with standard color names will just work.

Insight

You can also display swatches in product grids such as collection pages and featured product sections.

Manual: Set up custom swatches manually

If the shade of built in colors doesn't please you or you wish to add a custom swatch 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 4.4.0 to 6.0.3 

  1. Head to the Themes area of your Shopify admin. 
  2. On the theme click on the button with the three dots and select Edit code.
  3. Scroll down the left hand list of files until you find the files 'product-grid-swatch.liquid' and 'product-swatch.liquid' in 'Snippets'. 
  4. Click into the 'product-grid-swatch.liquid' and 'product-swatch.liquid' files and you can see some custom swatches 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. Remember to save and check any changes you make.

Information

Older versions of Venue, 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 swatch overrides already set up. Find 'red' for example and simply change the hex code #FF4136 to something you prefer.

Information

  • custom swatch 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