Each Out of the Sandbox theme supports color swatches. Enabled in the Theme settings, swatches match color names with product variant names to provide standard colors.
Upload an image to replace a color
If standard swatch colors are insufficient, missing, or inaccurate, consider replacing them with your custom color images.
Gather the color image
Capture or edit a product image to produce a square sample of the variant's color, pattern, etc. For this example, we are cropping a clothing product image to replace a color for the Pacific Print variant.
Crop or resize the image to 50 x 50px or larger.
Format the filename to match variant
The image must be named after the color option in lowercase and formatted as a PNG.
pacific-print.png
Use hyphens for spaces and special characters (e.g. macaw-blue for Macaw Blue or freddie-s-fusion for Freddie's Fusion).
If you have different variants with the same name but need separate images (for example, if "blue" in one product isn't the same shade as "blue" in another), you will need to adjust the variant names, as the theme will connect with the same 'blue' image.
You might want to, for example, call one blue 'Royal Blue' and another 'Navy Blue'. Another option is to include the product line or material type in the color name. For example, Blue Leather, Metallic Blue, Blue Shirt Fabric, or Blue Cotton.
For one-word names, the formatting is the most straightforward:
If the color is Black, then name your image black.png
For multiple-word names, use hyphens to separate each word:
If your color is named Dark Blue, name the image dark-blue.png.
Like spaces, slashes and most other special characters are replaced with hyphens:
If your color is Blue/Gray, then name your image blue-gray.png.
Upload the files
For Turbo, Parallax, Retina, and Responsive, head into Online Store > Themes > Actions > Edit Code, then click on the Assets folder in the sidebar to reveal its content.
Under the Assets heading, click Add a new asset to upload your swatch image(s).
For the Flex theme, upload them to the Files page in the Shopify admin instead.
Troubleshooting swatches
If your swatches aren't appearing, here's a quick troubleshooting list:
- Confirm you are saving your image files with a PNG extension in all lowercase letters and not JPG or other formats.
- For most themes (not Flex), confirm you are uploading the image files to the "Assets" folder in the theme files (not Settings > Files).
- Confirm you have used all lowercase letters in your file names and replaced any accented characters with the standard letter and any spaces or special characters with hyphens.
- Confirm your image is at least 50 x 50 pixels.
- Be sure you have the swatches setting enabled.
- If your product option is not titled "Color" or "Colour" (maybe the case if your site is not in English), you will need to make a minor edit to the product-swatch.liquid and collection-swatch.liquid files (online store > themes > actions > edit code > snippets). Locate this code:
{% if downcased_option contains 'color' or downcased_option contains 'colour' %}Adjust it to:{% if downcased_option contains 'your-option-title' %}Replace your-option-title with the custom title, such as 'couleur' or 'farbe' etc.