Product page: Display color swatches

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

Pro tip: 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 a you have set up a color variant of 'Red' the theme will detect this and create a red swatch for you.

Pro tip: 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

  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.

Pro tip: you can also display swatches in product grids such as collection pages and featured product sections.

Expert: 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

  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 'swatch-colors.liquid' file. Alternatively there's a small search box at the top of the files list. Just type 'color' in there to save time.
  4. Click into the 'swatch-colors.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. Remember to save and check any changes you make.

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.

Important

  • 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_hot_red' if you have written 'Hot Red' or 'hot red' in your product admin.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.