How can I display product options as dropdowns instead of buttons?

[Omikai]

Hi
I have a product with a maximized amout of variants. 3 options and 100 variants in total.

In the product detail its looking kinda cramped

I would like to display the options as dropdowns instead of buttons.
Are there any plugins for that?
Are there any themes that by default display options as dropdowns?
Do I have to alter some html my self to do this. I have seen some examples of that but looking for something more out of the box solution.

//Mathias

[PaulNewton]

There are plenty of apps you can pay for to have different ways to display options.

For theme replacements, you just have to do the legwork and see which themes have it as a setting options.

Don’t require some visual/UI/UX feature having a specific “default” that just pigeonholes the problem making non existent unicorns.

@Omikai

Do I have to alter some html my self to do this. I have seen some examples of that but looking for something more out of the box solution.

If you want just one drop down that contains ALL options most themes have a hidden master selector that the UI interacts with to set which variant is selected from option combinations. You will have to dig around and figure out the CSS to show that and hide the other buttons. A slapdash replacement is here: https://shopify.dev/docs/themes/architecture/templates/product#the-variant-selector But is not dynamic and doesn’t come with javascript. It’s an outright replacement if the theme doesn’t have selects for options, or multiple selects for different option types. This can be done as a theme customization but the scope of code and styling and subfeatures is way beyond the scope of a simple forum conversation. If you need this customization then contact me by my email for services. Contact info in forum signature. ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

[EasifyApps]

Hi @Omikai ,

I recommend leveraging the Easify Product Options app (free plan available) to surpass the constraints imposed by Shopify, which currently restricts products to 3 options and 100 variants.

To offer you more targeted guidance on configuring your custom options, please share additional details. This way, I can provide specific suggestions tailored to your requirements .

[Omikai]

Yes that will solve all my problems with various options.
I didnt try that plugin but other like that and the problems I found was
I cannot att a fixed starting price
I have a product that cost 10/piece and a starting price of 100 so 1 cost 110, 2 cost 120 and so on. Can that plugin or another plugin solve that?
Secondly when i purchase the product and go to the shopping cart the plugins usually add multiple products. One for the main product and additional for the options. That makes it hard to process the order later because I dont know what option belongs to what product. I want a plugin that adds price to the main products price and not adding any additional products for the options.
I need to find a solution to both problems.

[EasifyApps]

Hi @Omikai ,

In addressing your requirement regarding pricing tiers (“1 cost 110, 2 cost 120, and so on”), I recommend utilizing the Tiered Wholesale Pricing feature within the app. This functionality enables you to set discounts based on the quantity of the product ordered.

Regarding your concern about multiple products being added to the shopping cart, we’ve made enhancements to ensure that in the cart, only 1 product with its respective options is displayed, eliminating the clutter of separate product entries.

While, unfortunately, the checkout page, due to Shopify’s limitations, will still show options with prices as separate items, we’ve added a summary of custom options beneath the main product to help customers easily associate options with the correct product.

Achieving perfection may be challenging, you should only find an optimal solution tailored to your specific needs.