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

Shopify Discussion
1

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!

2

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.

3

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

EasifyJolie_2-1740556038568.png
EasifyJolie_2-1740556038568.png1074×516 94 KB

  • This is the app setting:

EasifyJolie_1-1740555895161.png
EasifyJolie_1-1740555895161.png1330×562 43.9 KB

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

4

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

5

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