Adding and Customizing Advanced Color Variants

Ready to take your product pages to the next level? While the Surge Theme comes with standard color presets, you may have unique or "obscure" product shades that require a custom touch. This guide will walk you through adding custom color swatches and adjusting how they display on your storefront to ensure your brand's personality shines through. 

Step-by-Step Guide

1. Add the Variant to Shopify Admin ?️Before the theme can display a new color, it must exist in your Shopify backend.

• Go to your Shopify Admin > Products.
• Select the product you wish to edit.
• Scroll down to the Variants section.
• Add your new color name (e.g., "Purple" or "Midnight Teal") and hit Save.

2. Access the Theme Editor ?️Once the product is saved, you need to map that specific color name to a visual swatch.

• Go to Online Store > Themes > Customize (for the Surge Theme).
• Navigate to your Theme Settings (the gear icon) and look for the Color Variant/Swatches section.

3. Map the New Color Shade 

• Click the Add button to create a new color entry.
• Important: In the "Name" field, type the exact same name you used in the Shopify Admin (e.g., if you typed "Purple" in the backend, type "Purple" here).
• Use the Color Picker to select the specific shade or hex code that matches your product.
• Hit Save in the top right corner. Your new swatch will now populate on the product page!

4. Customize the Display Style ?Surge gives you control over how these variants appear to your customers. If you have many colors and want a cleaner look, you can adjust the styling:

• Under the same color settings, locate Color Style Options.
• Choose your preferred layout from the dropdown menu:
  • Color Circles Only: Best for a minimalist, visual look when you have many shades.
  • Text Only: Displays the name of the color as a button.
  • Color Circles with Labels: Displays both the visual swatch and the text name.
• Preview the changes in the editor and click Save once you’re happy with the layout.

See the following video for a quick visual guide: