# Color swatches A guide to customizing **Color swatches** for your store’s products, helping you showcase variants more visually and improve the shopping experience.
SettingDescription
Hide sold out variantsHide swatches for color variants that are out of stock.
Color shapeSelect the shape of the color swatch: Choose either round or square.
### **Swatch type** Choose how to display product variants: * **Variant image** – Displays the image assigned to each variant as the swatch. * **Color** – Displays a solid color swatch or a custom image based on the selected color option and any custom colors you define. {% tabs %} {% tab title="Variant image" %}
{% endtab %} {% tab title="Color" %}
{% endtab %} {% endtabs %} ### **Color swatch trigger** Enter the exact option name(s) for the variant type you want to display as color swatches (e.g., “Color,Colour,Cor"). If you have multiple option names, separate each with a comma. The names must match your product variant option names exactly. If left blank, the default option name “Color” will be used. **When the color swatch trigger has been set:**
**When no color swatch trigger is defined, or the defined trigger does not match any of your variant options:**
### **Custom colors** Define a custom value for your color variants by listing them with either a hex color code or an image name. Use the format: * Hex color code → `Sunlit Bronze:#4b2f27` * Image name → `Sunlit Bronze:sunlit-bronze.png` Separate multiple entries with commas, and make sure each color name matches your product variant name exactly. Ensure any referenced images are uploaded to your store’s files beforehand. {% hint style="info" %} **For example:** You upload an image named `cosmetic_products_29_7.jpg` and assign it to the **Black Cherry** color. After this, even if the swatch type is set to **Color**, the **Black Cherry** option will still display using the `cosmetic_products_29_7.jpg` image. {% endhint %}