How to Display Color Variants as Buttons and Model Variants as Dropdown?

[Stoba_Store]

Hi everyone,

I’m trying to customize the variant selector on my Shopify product page. I want the color variants to be displayed as buttons, while the model variants should be in a dropdown list. --> Product page here

However, in Shopify's default customization settings, it seems like I can only apply one style to all variants (either buttons or dropdowns). Is there a way to achieve this customization?\

Would I need to modify the theme’s code (Liquid/JavaScript), or is there an easier way to do this through Shopify’s settings ?

Thanks for your help!

[CodingFifty]

Hi @Stoba_Store,

Sure, this is possible, but it will take some time. You can hire a developer to solve this issue for you.

Or, you can use an app like Variant Option Product Options or G:Variants & Product Options to achieve this.

[Stoba_Store]

Hey, thanks for your comment. I asked ChatGPT, did a great job. Thanks 

[Easify-Jolie]

Hi @Stoba_Store 

You can try the Easify Product Options app to customize your variant selector without modifying theme code. It allows you to display color variants as buttons while keeping model variants in a dropdown. This way, you get the flexibility you need without complex coding. Here's how it works:

• This is the result

• This is the app setting:

You’ll find this app easy to use, so I hope you give it a try. If you need assistance, just let me know! 🤗

[Stoba_Store]

Hey thank you for your input, however buying an app just for this is not worth it for me. I updates the code and succeed. Thanks