Color Swatches for Studio Theme - Where are they?

Color Swatches for Studio Theme - Where are they?

SweetViolet
Explorer
66 1 23

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.

Replies 5 (5)

Promer-Aila
Shopify Partner
103 4 37

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 

SweetViolet
Explorer
66 1 23

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.

SweetViolet
Explorer
66 1 23

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.

Easify-Jolie
Shopify Partner
199 7 17

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

  • This is the app setting:

EasifyJolie_1-1741833387393.png

 

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! 🤗

Easify Product Options: Any product options app can help you create custom options, but Easify turns those options into sales and conversions!
Easify Inventory Sync: Automate inventory syncing for Bundles, Duplicates, and Raw Materials. Say goodbye to manual tracking headaches.
Easify Product Attachments: Enrich your store with downloadable content. Easily add PDFs and other files to product or any page.
>>> Try Apps for Free | 24/7 Live Chat Support

ParseLab_Viyana
Shopify Partner
34 0 1

Hello @SweetViolet,

If you're looking for an easy way to add color swatches to your product pages, I recommend trying the Inkybay - Product Personalizer app. This app allows you to easily integrate color swatches on your product pages. You simply need to upload a white image and select a color set, which will automatically map to the chosen color. Alternatively, you can use individual images for each color to display the color swatch on the product page. Additionally, it offers robust personalization features to enhance the customer experience. You can take advantage of a free 21-day trial to see if it works for you.

 

color swatch.png

 

Emmy_Viyana | PARSELAB
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Checkout our app:Inkybay