Customizing Color Swatches in the Surge Theme

Created by SURGE Theme Support, Modified on Mon, 19 Jan at 9:37 PM by SURGE Theme Support

Welcome to your guide on managing product colors! The Surge Theme makes it easy to align your product displays with your brand guidelines by using custom color swatches. This guide will walk you through setting up your variants and fine-tuning those shades in the theme editor.

Overview

To get your colors looking perfect, you'll work in two places:

Shopify Admin: Where you define the names of your colors (e.g., Red, Black, Blue).
Theme Editor: Where you map those names to specific hex codes or custom shades.

Step-by-Step Guide

1. Set Up Your Product Variants ?️Before editing the visuals, ensure your product data is correctly structured in your Shopify Admin.

Navigate to the Product Level in your Shopify backend.
Scroll to the Variants section.
Ensure you have a "Color" option set up.
Add your required color names (e.g., Red, Black, Blue, Green).
Save your changes.

2. Access the Theme Editor ?️Once your variants are set, you need to tell the Surge Theme how to display them.

Go to Online Store > Themes and click Customize on your Surge theme.
Use the top dropdown menu to navigate to Products > Default Product.
In the preview window, ensure you have selected a variant that features the colors you want to customize.

3. Locate the Product Option Selector ⚙️On the left-hand sidebar, you will see the page sections.

Find the Product Information section.
Locate the Product Option Selector block.
Note that the labels (buttons/dropdowns) are automatically pulled from the variant names you created in Step 1.

4. Customize Specific Color Shades ✨If the default colors don't match your brand guidelines (e.g., you need a specific "Burgundy" instead of a standard "Red"), follow these steps:

Look for the Header Group or the specific color settings area within the Option Selector.
You will see a list of color choices (e.g., White, Black, Red, Blue, Green).
To change a color: Click on the color swatch you wish to edit (for example, the Red one).
Adjust the Picker: Use the color picker to find the exact shade, brightness, or hex code you need.
Watch the Preview: You will see the swatch on the Product Detail Page (PDP) update in real-time as you move the picker.

5. Save Your Changes ?

Once you are happy with the new shades, click the Save button in the top right corner of the editor.

See the following video for a quick visual guide:

Pro Tip: If you have specific Hex codes from your brand's style guide, you can paste them directly into the color picker for a 100% accurate match!