How to Create Colour Swatches in Turbo Theme on Shopify

Why Choose the Turbo Theme?

At We Are Chain Ltd, we work with Shopify merchants daily, and Turbo stands out for its speed and functionality, especially for stores with large inventories. Turbo’s streamlined design and customization options make it ideal for merchants looking to provide a smooth, seamless shopping experience. If you're looking to level up your store’s appearance while maintaining optimal speed, Turbo is your go-to theme.

Step-by-Step Guide to Adding Color Swatches in Turbo

1. Set Up Your Product Variants

Before diving into customization, ensure your products have the necessary color variants. In Shopify’s admin:

• Navigate to Products > All Products.
• Choose a product you want to add color swatches to.
• Scroll down to Variants and add each color you want to offer.
• Add a unique name to each color (e.g., "Navy Blue," "Emerald Green"), as this will be essential for creating accurate swatches.

2. Enable Swatches in Turbo Theme Settings

The Turbo theme has built-in support for swatches, making it easy to activate them directly from the theme’s settings:

• Go to Online Store > Themes and select Customize for the Turbo theme.
• In the Turbo theme editor, navigate to Product Pages.
• Look for the Swatches option and ensure it’s enabled. Turbo typically has this setting under Variant Picker or Swatches Settings.

3. Uploading Swatch Images

To make sure each color swatch accurately represents your product, upload custom images for each variant. Here’s how:

• Go to Settings > Files in your Shopify admin.
• Upload images that match each color variant’s hex code or brand-specific shade.
• Save each file with the exact name as your variant name (e.g., "navy-blue.png") so Turbo can recognize it automatically.

4. Customize Swatch Colors in Theme Code

While Turbo’s theme editor is robust, you might want to further customize swatches to match your brand’s aesthetic. Turbo allows for custom CSS adjustments, which is handy if you want more control over swatch appearance:

• Go to Online Store > Themes > Actions > Edit Code.
• In your theme files, navigate to Assets > theme.scss.liquid.
• Add custom CSS to adjust swatch sizes, shapes, or hover effects.

For example:

cssCopy code.swatch {
    border-radius: 50%;
    width: 25px;
    height: 25px;
}

This snippet will round your swatches, giving them a button-like look.

5. Test Your Swatches

After configuring your swatches, test them on various devices to ensure they look consistent across desktops and mobile. Turbo is highly responsive, but double-checking ensures a flawless user experience.

Tips for Using Color Swatches Effectively

• Keep It Simple: Limit your color options to avoid overwhelming customers.
• Choose Distinct Colors: Use visually distinct colors that represent the product accurately.
• Match Swatch with Product Image: Turbo allows for automatic image changes with each swatch click. Enable this feature to boost customer engagement by showing relevant images as they click different swatches.

Why Turbo Is Perfect for Swatch Customization

Turbo isn’t just fast; it’s highly flexible, making it a top choice for store owners who want to showcase products in style. The theme’s built-in swatch functionality saves you from needing apps, streamlining your store and reducing loading times. Turbo empowers you to customize freely, letting you enhance the user experience while keeping branding consistent.

Get Started Today

With the Turbo theme and this guide, you’re well on your way to adding professional-looking color swatches to your Shopify store. Ready to take the next step? Check out our video tutorial, where we walk through each of these steps in detail. And if you’re looking for expert Shopify support, We Are Chain Ltd is here to help with all things Turbo and beyond.

Transform your product pages with Turbo’s versatile swatches and watch your conversions grow!