Color Mastery
Advanced Swatch Mapping
Take control of your product swatches by mapping custom color names (e.g., "Deep Sea") to exact Hex or CSS codes.
Why use Mapping?
Standard Shopify swatches often fail when you use unique brand names for colors. Mapping allows you to explicitly tell the theme what color to render for a specific string.
The Mapping Snippet
Locate `snippets/color-swatch-mapping.liquid` in your theme files. This is where the logic lives.
Example Configuration:
{%- case color_name -%}
{%- when 'sky-blue' -%}
#87CEEB
{%- when 'forest-green' -%}
#228B22
{%- when 'sunset-orange' -%}
#FF4500
{%- endcase -%}Implementation Steps
1
Edit the Snippet
Open color-swatch-mapping.liquid and add a new {%- when -%} block for your color name.
2
Slugify the Name
The theme converts color names to lowercase and replaces spaces with hyphens. "Sky Blue" becomes "sky-blue".
3
Define the Hex
Provide the exact Hex code (e.g., #FFFFFF) or CSS color name.
Case Sensitivity
The mapping is case-insensitive because the theme pre-processes the string, but ensure you use the hyphenated "slug" version in your `when` statements.