Color Swatches for Studio Theme - Where are they?

Store Design
, ,

Topic summary

A user is struggling to enable color swatches in the Shopify Studio theme despite finding references to swatch functionality in the theme’s code files (main-product.liquid).

Initial Problem:

  • Cannot locate swatch settings in Theme Settings
  • Only finds “Product Card” options, no “Products” or “Variants” section as described in tutorials
  • Video tutorial instructions don’t match their theme’s code structure

Escalation:

  • User attempted to implement swatches using metafields following another tutorial
  • This broke the site’s size variant functionality, preventing customers from placing orders
  • User urgently requests help to restore ordering capability

Suggested Solutions:

  • One response provided standard setup instructions (variant naming conventions, theme settings navigation)
  • Another recommended using the Easify Product Options app as a no-code alternative, with screenshots showing swatch configuration and results

Status: Unresolved critical issue - site functionality is currently broken and needs immediate repair.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

I’m trying to add color swatches to my updated Studio theme. I’ve looked everywhere in the Product page and the Settings only have “product card” with no mention of swatches.

I thought maybe there just wasn’t any swatch capability in Studio but I’ve seen others with Studio using swatches, plus in my code there is reference to displaying swatches as a circle/square in the main-product.liquid file so I feel like they must be there somewhere. Any ideas? Site is www.sweetviolet.co.

2

Hi @SweetViolet

The Shopify Studio theme does support color swatches, but enabling them requires specific configurations. Here’s how you can set them up:

  1. Verify Variant Naming:

    Ensure your product variants are named “Color” or “colour” to align with Shopify’s default swatch functionality.

  2. Assign Color Values:

    For each product, specify the color values (e.g., Red, Blue, Green) in the variant options.

  3. Enable Swatches in Theme Settings:

    Navigate to your Shopify admin panel: Online Store > Themes.
    Click Customize next to your active theme.
    In the theme editor, select Theme Settings.
    Look for a section related to Products or Variants.
    Enable the option for Color Swatches.

  4. Add Custom Swatch Images (Optional):

    If you prefer specific images for swatches, upload swatch images to your theme’s assets and ensure they match the color names.

For a visual walkthrough, you might find this tutorial helpful:

Shopify Tutorial - How To Add Color Swatches (beginner friendly)
https://youtu.be/dSpB53XgmIo

3

Thank you for your reply. These are the exact instructions I followed, but there are no Products or Variants in the Settings, just Product Card with basic settings. I did watch the video and they mentioned setting the variants to pills, which I could do through the Product Template, not the Settings (mine were set to dropdown). I tried to follow the code changes but I could not find the code mentioned in the video anywhere in my main-product.liquid file. If anyone has any ideas, I would be very grateful.

1 Like
4

I watched another video on how to use metafields to set up variants and now my site is broken. Customers can’t order anything based on size anymore. I am begging anyone out there for help.

5

Hi @SweetViolet

If you want to try an app, Easify Product Options lets you add color swatches easily without coding. It gives you full control over how swatches appear on your product page. Here’s how it works:

  • This is the result:

EasifyJolie_0-1741833188493.png
EasifyJolie_0-1741833188493.png1116×614 127 KB

  • This is the app setting:

EasifyJolie_1-1741833387393.png
EasifyJolie_1-1741833387393.png1330×562 43.8 KB

This app is simple to set up, and I hope you check it out. Let me know or reach out to Easify if you need any support! :hugs: