Create drop down button when more than one variant

Store Design

Topic summary

A user sought to replace individual variant buttons for iPhone case models with a dropdown menu to achieve a cleaner product page design. The original layout displayed all model options as separate buttons, which appeared cluttered.

Solutions provided:

  • Theme customizer approach: Navigate to Shopify Admin → Online Store → Themes → Customize, select the product template, then change the variant selector from pills/buttons to dropdown format
  • Third-party apps: Two apps were suggested—MultiVariants – Bulk Order and Kickflip—both offering dropdown-style variant displays with additional customization features

Resolution: The original poster confirmed they successfully resolved the issue independently before receiving all responses. The discussion is now closed with the problem solved.

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

Dear All,

I have created iphone cases products with Gelato print on demand. How can I create a drop down button that shows me all models on my product page instead of seeing them all as buttons? It will look much more elegant. See screen shot.

Many thanks for your help,

Lumi

Screenshot 2025-04-30 at 16.55.46.png
Screenshot 2025-04-30 at 16.55.46.png1179×539 284 KB

2

I believe you can change this from the customizer for the product template.

So open customizer —> choose product template from drop-down above ----> variant selector. On clicking variant selector you will get an option to show variants either as pills or buttons like you have now or drop-down.

Hope this helps

1 Like
3

Hello @Magicart ,

Regarding your query about displaying variants in a drop-down style in the product page, I would like to suggest two possible approaches:
1.Using Your Shopify Theme Settings:
If your current theme supports it, you can change the variant display style to a dropdown by following these steps:
Go to Shopify Admin > Online Store > Themes > Customize.
Then, select the Product Variant Section and set the Variant Picker Type to “Dropdown. Don’t forget to save the changes.
(Please note that this option may vary depending on your theme’s capabilities.)

or

2.Using the MultiVariants – Bulk Order App:
MultiVariants – Bulk Order offers a dropdown display style for variants. So you can show your variants in a drop-down style.
Here is an example of a dropdown variant style in use:

Drop down Style demo
Drop down Style demo1653×744 126 KB

4

Thank you for your time, I already figured it out yesterday.

1 Like
5

Hi @Magicart ,

Thank you for reaching out.

To enhance the appearance of your iPhone case product page and replace the individual model buttons with a more elegant dropdown menu, you can use a product configurator like Kickflip. Kickflip allows you to streamline your product options by presenting them in a dropdown format, improving both the user experience and the visual design of your page.

Capture d’écran, le 2025-05-20 à 11.49.22.png
Capture d’écran, le 2025-05-20 à 11.49.22.png1754×818 79 KB

This tool integrates seamlessly with Shopify and offer print-ready assets.

Please let us know if you need any assistance setting it up or customizing it further.

Best regards,

The Kickflip team

1 Like