Back to Blog

    How to add colour swatches to your collection pages in Shopify - Turbo Theme

    By We Are Chain• January 19, 2025

    Why Use Colour Swatches on Collection Pages?

    Colour swatches allow you to showcase the variety of product options available at a glance. Instead of requiring customers to click into a product page to see different colours, they can immediately view their options. This creates a smoother browsing experience, increases engagement, and can lead to higher sales.

    Step 1: Access the Theme Customiser

    1. Log in to your Shopify admin dashboard.
    2. Click on Online Store in the left-hand menu.
    3. Under the Themes section, locate your active theme (Turbo) and click Customize.

    Step 2: Enable Colour Swatches in Product Grid Settings

    1. In the Theme Customiser, navigate to a Collection Page by clicking the top navigation dropdown.
    2. Once on a collection page, open the settings panel on the left-hand side.
    3. Locate the Product Grid settings and ensure that the Show Colour Swatches option is enabled.
    4. Save your changes.

    At this point, Shopify will attempt to display default colour swatches (e.g., black, red, green) for any products with available variants.

    Step 3: Create Custom Colour Swatches

    1. Use a photo editing tool like Photoshop, Canva, or an online colour generator.
    2. Create a 100x100 pixel image representing the desired colour.
    3. Save the file in PNG format.
    4. Ensure the filename follows these rules:
      • All letters must be lowercase.
      • For multi-word colours, use a dash (e.g., black-grey.png).

    Step 4: Upload Custom Swatches to Your Theme

    1. In your Shopify admin, click on Online Store > Themes.
    2. Find your active theme (Turbo) and click the Actions dropdown, then select Edit Code.
    3. Scroll down to the Assets folder in the left-hand menu.
    4. Click on Add a new asset and upload your PNG files.
    5. Repeat this step for all custom colour swatches you need.

    Step 5: Test and Verify

    1. Return to the Theme Customiser and open a collection page.
    2. Check that the colour swatches now appear under the relevant products.
    3. Hover over the swatches to confirm they match the product variants.

    If the swatches don’t appear correctly, double-check the following:

    • The PNG files are named correctly (all lowercase, with dashes for multi-word colours).
    • The files are uploaded in the Assets folder.

    Additional Tips

    • Shopify’s default colour names (e.g., black, red) do not require custom PNGs. These will be automatically generated by Shopify.
    • Use a consistent naming convention for your product variants to avoid errors.
    • Regularly update your assets if new colours or variants are added to your store.

    Why This Matters for Your Shopify Store

    Adding custom colour swatches not only enhances the visual appeal of your store but also simplifies the shopping journey for your customers. This small tweak can lead to significant improvements in user satisfaction and ultimately sales.

    Need Help?

    If you have questions or run into challenges, feel free to reach out to us at We Are Chain. We specialise in Shopify support and are here to help you optimise your store.

    Don’t forget to explore our YouTube channel for more step-by-step tutorials and expert tips. Be sure to like and subscribe for regular updates that help you get the most out of your Shopify store.

    Start implementing these colour swatches today and give your customers a seamless shopping experience that they’ll love!