Adding variant color instead of pills

Shopify Discussion

Topic summary

A user seeks to replace standard variant pills with color swatches displayed as images (showing fabric patterns or textures) on their product pages.

Proposed Solutions:

  • Custom code approach: Modify the theme using Liquid templating to create radio buttons styled as image swatches, pulling variant images via Shopify metafields
  • App-based solution: Use Shopify’s free “Variant Swatch King” app
  • Tutorial resource: A YouTube video demonstrating metafield implementation was shared

Current Status:
The user is working with the Refresh theme and reports finding no radio button code in their theme files after reviewing the tutorial. One developer offered paid custom development assistance (few hours of work), while another is guiding the user through a step-by-step process—first implementing variant switching, then applying CSS for radio button styling. The discussion remains ongoing as the user has completed initial steps and requested the product page URL for further assistance.

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

Hey can anyone please help me add the variant section as shown in the attached image on my website - https://svqe9p90arrunffn-66532409539.shopifypreview.com

Screenshot 2024-09-23 235130.png
Screenshot 2024-09-23 235130.png769×620 18.2 KB

2

Hi! This depends on the theme you’re using and the specific functionality you’re looking for. Implementing this would require some development work, especially if you’d prefer not to use an app and handle it through custom code. You would need to be comfortable working with Shopify’s Liquid templating language.

Here’s how I would approach it:

  1. Check for the Variant Option (e.g., Color):

I would start by checking if the product has a specific variant option, such as “Color”. For color variants, I would use radio buttons styled as swatches instead of the default dropdown selector.

  1. Style the Radio Buttons as Image Swatches:

Each variant would be represented by a radio input, and I’d style these buttons to look like swatches. Instead of using a flat color, I would pull an image into the swatch (like a thumbnail of the fabric, pattern, or product preview).

  1. Pull the Image for the Swatch:

I would use Shopify metafields to store the image associated with each variant. This way, instead of a solid color, each swatch will display an actual image (like a product texture or pattern). The swatch itself would display this image using Liquid to render the correct image in each swatch’s label.

This avoids the need for third-party apps but requires a bit of development to implement effectively. Let me know if you need more specific guidance or help with the code!

Hope that helps,

Liam

Flair

Screenshot 2024-09-24 at 12.20.05 PM.png
Screenshot 2024-09-24 at 12.20.05 PM.png2830×1394 393 KB

3

Can you help me with the code also? ##- Please type your reply above this
line -##

4

Hi, You can do it by two way one is shopify metafields and another way is shopify free app use

By Shopify metafields => https://youtu.be/FJGF-il7Sk4?si=BuVFGmIIDBPOrHc9

By Shopify free app => https://apps.shopify.com/variant-swatch-king

Thank You

5

Sure no problem we can help you with this but it will take a few hours of development depending on the theme you are using. Feel free to reach out to us: support@flairconsultancy.com

6

Thank you, I have referesh theme and I was watching the video literally there is nothing like radios in the code.

7

You can do variant switch first then I can provide you css to do radios. Thanks

8

Done can you help now

9

Please send your product page URL