Swatch settings in Retina

While the set-up process for Retina is similar to other themes, there are some additional settings to consider added in the latest versions of Retina (version 5+).

Use the theme editor to enable color swatches, identify swatch trigger, select color option style, adjust swatch size, and fine-tune custom colors for your variant swatches.

Show color swatches setting

Activate swatches by clicking Show color swatches.

Scroll down to add the Swatch trigger.

Identify swatch trigger

Use the Swatch trigger field to enter the variant label used for swatches.

Most often, the swatch trigger is 'Color'—however, the trigger could also be Pattern, Material, etc.

While the field is not case sensitive, it is important to match the spelling of the variant label (e.g. Color vs. Colour).

Adjust swatch size

Use the Swatch size slider to increase or decrease the swatch container size.

Select color option style

Select either Color swatch or Variant image from the Color option style dropdown.

Color swatch draws from a library of common colors to automatically assign colors to the variants with matching names. For example, if a variant is titled "Black" the theme will display the color associated with that color (hex code: #000000).

Variant image displays a condensed version of the image assigned to the variant. This option may be more suitable for patterns, gradients, or other swatch forms that need more than a solid color.

Fine-tune custom colors

If you're using the Color Swatch option, sometimes certain colors matched to variant titles are not accurate when compared to the product variant. Use the Custom colors field to identify and adjust colors to the desired hex code.

For example, if the product variant's Red is more of a Crimson, you could identify the color name "Red" by entering that in the field, then a colon (:) followed by the preferred hex code (#DC143C).

Red: #DC143C

Repeat this for additional colors by adding a new line to the field with the same format.