Swatches
What are swatches?
Swatches are like tiny, helpful pictures that show the different colors, patterns, and materials a product comes in.
Instead of just plain words, swatches make it easier and more fun for customers to pick what they want. You can use color codes, pictures, or even your own images to show the choices for your product.
How do I set up color swatches?
You can add color swatches to the product card and also for the product page
Stylescape will detect if your variant label is Color and automatically display swatches
Step 1: Add color variants
In the "Color option name" setting, type in the title of the variant option (as shown below).
Step 2: Add custom colors
Theme settings > Swatches 
Standard colors such as Black, White, Red, Blue, and others listed on HTML Color Codes (opens in a new tab) will automatically be displayed as color swatches. However, for unique names like "Dark pink, Dark sage" you have the option to add custom colors to the swatch selection.
Example of how to add custom colors
Now, let's include your special color in the custom color options. In this scenario, we want to add a color for the "Dark Pink variant." Here's how it should look:
Certainly, here's the example with the provided formatting for the custom color:
And this is the result
How to add Two colors for a single variant?
Use the identical approach as mentioned earlier, with one distinction: you can link two codes in a sequence. Avoid inserting the ":" in between; solely use "#" to separate the hex codes. Take a look at the image illustration below for reference.
Exclude any special characters and stick to the Latin/Roman alphabet along with standard characters (a-z) exclusively. For instance, rename "Red & Blue" to "Red and Blue".
How to add Custom images as swatches?
Step 1: Create PNG or JPG images
Make a PNG or JPG image file on your computer for each color. It's recommended to size them at 40px by 40px, but maintaining consistent dimensions and aspect ratios across all image files (even if sizes differ) helps prevent cropping.
Step 2: Naming images
Name each file to match the handle of the variant color title. Replace spaces with a dash (-) and use lowercase letters for the file name. For instance, if the variant is labeled "Dark green blue" name the file "dark-green-blue.png".
Exclude any special characters and stick to the Latin/Roman alphabet along with standard characters (a-z) exclusively. For instance, rename "türkis.png" to "turkis.png".
Example
Add color swatches to the product page?
Anable color swatches
You can add color swatches to your product and Featured product section using these settings found in:
Product page > Product information > Variant picker
