Adding variant color instead of pills

[Alurithardd]

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

[Flair-Liam]

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.

2. 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).

3. 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 

[Alurithardd]

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

[Flair-Liam]

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 

[Rony_ShopiDevs]

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

[Alurithardd]

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

[Rony_ShopiDevs]

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

[Alurithardd]

Done can you help now

[Rony_ShopiDevs]

Please send your product page URL