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.

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.

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.

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.

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.