Change option selection to drop down menu

[fangsb]

Hi guys,

Currently my option selection on product page such as 'Color" or 'Material' is in button format which looks ugly. 

How do I change it to drop down menu instead?

Thank you.  

[Helen · Accepted solution]

Hey, @fangsb!

I’m Helen from Shopify Support. Thanks for your question.

Changing the variant selector is dependant on the theme that you are using on your store. What theme are you using?

Brooklyn is currently the only theme made by Shopify that has a variant picker built-in. Let me show you where it generally lives in the Theme Editor for themes that have the option to change it.

From your Shopify admin, please access go to ‘Online Store > Themes > Customize’. Navigate to a product page and click on Product Page on the left hand side. Within here is where all of your built-in customization options are for the product page. 

The variant picker looks like this in the Brooklyn theme:

If you are using a third party theme and unable to find where to change it, please reach out to the developer directly for assistance. Hope this helps!

[Helen · Accepted solution]

Hey, @cocorostudios. 

Thanks for reaching out. You’re almost there!

The screenshot you have shared above shows that you are in the Theme Editor on the ‘Homepage’. To navigate to a product page, so that you can customize that page, please choose ‘Product pages’, from the dropdown menu at the top of the editor as seen here:

Once you are on the product page, there are sections that now apply to this template on the left hand side. It looks like this:

Clicking on ‘Product pages’ will expand to show all of the customization options for this section, including the option to change your variant drop down menu style.

Hope this helps! Let me know if you need any further clarification.

[Helen · Accepted solution]

Hey, @fangsb!

I’m Helen from Shopify Support. Thanks for your question.

Changing the variant selector is dependant on the theme that you are using on your store. What theme are you using?

Brooklyn is currently the only theme made by Shopify that has a variant picker built-in. Let me show you where it generally lives in the Theme Editor for themes that have the option to change it.

From your Shopify admin, please access go to ‘Online Store > Themes > Customize’. Navigate to a product page and click on Product Page on the left hand side. Within here is where all of your built-in customization options are for the product page. 

The variant picker looks like this in the Brooklyn theme:

If you are using a third party theme and unable to find where to change it, please reach out to the developer directly for assistance. Hope this helps!

[fangsb]

Hey Helen,

Got it! Thanks a lot!

[cocorostudios]

Hi Helen,

I'm trying to change the radio buttons in Brooklyn to a dropdown menu as well, but wasn't able to follow these directions.

I lost you at "Navigate to a product page and click on Product Page on the left hand side. Within here is where all of your built-in customization options are for the product page. "  When I go to ‘Online Store > Themes > Customize’. , there is no "Product Page", and cannot find product options form, or any built-in customization.  I've attached a screenshot of what my left side menu looks like after I follow   Online Store > Themes > Customize’...

Please advise on how to change my variants to a drop down menu.

Thanks!

-Heather

---

---

[Helen · Accepted solution]

Hey, @cocorostudios. 

Thanks for reaching out. You’re almost there!

The screenshot you have shared above shows that you are in the Theme Editor on the ‘Homepage’. To navigate to a product page, so that you can customize that page, please choose ‘Product pages’, from the dropdown menu at the top of the editor as seen here:

Once you are on the product page, there are sections that now apply to this template on the left hand side. It looks like this:

Clicking on ‘Product pages’ will expand to show all of the customization options for this section, including the option to change your variant drop down menu style.

Hope this helps! Let me know if you need any further clarification.

[cocorostudios]

Thank you!! It worked!

[Jraw23]

Hello!

How do you do the same thing but for the product section of the homepage? There doesn't seem to be the same options as the product page.

[Helen]

Hello, @Jraw23! 

Are you referring to the Featured Product section on your Home page? What theme are you using?

[ajordan98]

I’m able to change the radio button on the product page, but when the product is featured on the home page it still has those annoying radio buttons. How can I fix this for the home page as well??

[Helen]

Hi, @ajordan98.

Great question!

I’m happy to contact our Theme department on your behalf to have them look into it to see if this is something they can customize on your theme for you. 

Please keep an eye out for the email I am sending you in order to gather a few more details about your store.

[TheresaMB]

Hello!

I am having the same problem as @ajordan98. I am using the Brooklyn theme, and I  would like to change the radio buttons to a drop down menu when the product is featured on the home page. Could you share this solution with me also? 

[Helen]

Hi, @TheresaMB!

I’m happy to have our Theme department take a look to see if they are able to customize this on your store as well. I am sending you an email to facilitate this; Please reply to it at your earliest convenience.

[gleko123]

Hi, I am facing the same issue, could you help me out as well please!

[Helen]

Hi, @gleko123! 

Thanks for reaching out. We certainly can look into this customization for you as well. I’ll send you an email to get started on it.

[Blts]

Hi there, I'm having the same issue where I would like to replace buttons by dropdown menu in the Featured Product on the Home Page.

Could you please help me on this? Thank you!

[Helen]

Hello, @Blts. 

I’d be happy to! Please keep an eye on your inbox for correspondence from me with the next steps. 

Thanks,

[paul_bailey]

Helen, I am having trouble finding the options you are referring to in earlier post.  These are the only options I have available.

[Helen]

Hey, @paul_bailey! 

Thanks for reaching out. Just to confirm, you are using the Brooklyn theme, correct?

If so, then this is most likely due to the version of the theme that is on your store being out of date. Please check which version you are on by going to ‘Online Store > Themes > Customize > Theme settings’. The version of the theme will show here, as seen below:

The most current version of Brooklyn is 16.0.9. Therefore if your version is quite a bit older than this, then you’ll need to upgrade to the newest version, which has the variant picker options on the product pages. 

Adding the Brooklyn theme again to your theme library won’t affect your current theme. You can customize the new version to your liking before publishing it to be live on your storefront, and the Brooklyn Help Doc is useful to guide you through all of the up-to-date built-in customization options.

Let me know if this helps, or if you have any further questions.

[seangaffney]

Hi @Helen! I, like many of the others above, am having the same issue where I would like to replace variant buttons with a dropdown menu in the Featured Product on the Home Page. It is working on the product pages, but not on the home page.

I'm using the latest version of the Brooklyn theme, which at this time is 16.0.10. Could you please help me on this? Thank you!

[Helen]

Hey, @seangaffney. 

I’m happy to help! Please keep an eye out for an email that I am sending to you so that I can authenticate your account and look into if we can make this customization for you too.

Thanks!

[Enoch111]

Hi there, I'm having the same issue where I would like to replace buttons by dropdown menu in the Featured Product on the Home Page.

Could you please help me on this? Thank you!

[Helen]

No problem, @Enoch111 ! Email on its way to your inbox shortly.

[photogeniee]

Hello Helen! We have the same problem about putting the dropdown menu to our home page. Can you please help us? Thank you.

[Helen]

Sure, I’d be happy to help, @photogeniee! Please keep an eye out for an email I am sending you to get started with this. 

Thanks,

[JuanB]

Hello Helen! We have the same problem about putting the dropdown menu to our home page on the featured product section. Would you be able to help us?? Thank you in advance.

[Helen]

Hi, @JuanB. 

Welcome to the Community! I’ll send you an email to look into this for you as well. However, it has been a few days since your post within this thread, so if you have contacted live support in the meantime to have this facilitated, please let me know.

Thanks!

[freetoplayer]

Hello @Helen,

I would also like to add the dropdown menu in the featured product section of my home page. It would be lovely if you could help me with that.

[Helen]

You bet! I’m happy to see if we can help with this customization for you too, @freetoplayer. There should be an email from me in your inbox shortly. Please reply to it with the requested info, and we can get started.

[simonfalk104]

Hello @Helen,

I would also like to add the dropdown menu in the featured product section of my home page. It would be lovely if you could help me with that. I am using the Brooklyn theme.

[Helen]

For sure, @simonfalk104  I’ve sent you an email now too. Please reply so that we can proceed. 

Thanks!

[tonibo]

Hi there, I'm having the same issue where I would like to replace buttons by dropdown menu in the Featured Product on the Home Page.

Could you please help me on this? Thank you!

[tonibo]

Hi there, I'm having the same issue where I would like to replace buttons by dropdown menu in the Featured Product on the Home Page.

Could you please help me on this? Thank you!

[Helen]

I certainly can help you with this too, @tonibo. Please check your inbox for an email from me.

[InstantLaces]

Hi @Helen 
I would also like to add the dropdown menu in the featured product section of my home page. It would be lovely if you could help me with that.
Thank you.

[Helen]

Happy to help, @InstantLaces! Same as above, please keep an eye out for an email from me. Once I receive your reply to that email, I’ll be able to authenticate your account, check your design time eligibility, and escalate your request to the Theme team.

[clespiritus]

I would also like to have an option to change button type to dropdown menu on my Featured Products on home page

[Helen]

Sure! Happy to help. Are you also using the Brooklyn theme, @clespiritus? 

I’ll send you the email needed to authenticate your account and check your eligibility for theme customizations, so please watch for that.

[clespiritus]

Yes, im using Brooklyn latest version

[Helen]

That’s great, @clespiritus! I sent you an email yesterday to be able to look into proceeding with the customization. Please check your inbox for it, and reply at your earliest convenience.

[royknaggs]

Hello @Helen,

I would also like to add the drop-down menu in the featured product section of my home page. It would be lovely if you could help me with that. I am using the Brooklyn theme.

Thank you!

[Helen · Accepted solution]

Welcome to the Community, @royknaggs! I certainly would like to help you with this, however at this time we’re not able to provide the account-specific support required to facilitate this request via the Shopify Community. But, we’d be happy to continue assisting you through live chat, email, or callback. Please visit the Help Center and log in to your account to create a support request.

In order to save some time so that the Support Advisor you speak with can help you as quickly as possible, please share this summary of your request at the beginning of your conversation:

"I am using the Brooklyn theme. I would like to submit a design request to the Theme department to 
customize the variant picker in the Featured Product section of my homepage. Currently, variants are 
shown as buttons there, however I’d like them to display in a dropdown instead."

Since this is the next step I've marked this reply as the solution for the benefit of others who may discover this topic. Thanks!

[mayasplaceny]

Hi so I have the supply theme and I'm trying to do the opposite. I would like to change it from a drop down to a radio button and I don't have an option to change the picker. Is it possible to code something in?

[Helen]

Hi, @mayasplaceny.

Great question!

Changing the drop-down variant option on your Supply theme into "radio buttons" (similar to Brooklyn) requires significant adjustments to the theme code, like rewriting all of the script used on the product page. This would far exceed the 60 minutes of design time that is available, therefore, this customization is not something the Shopify Theme department can support.

However, a Shopify Expert can do this for you! You can hire one directly from within the Experts Marketplace. 

Good luck!

[EasifyApps-Zoe]

Hi @fangsb,

I noticed that you received a suggestion for your issues, but I'd like to offer another simpler solution that doesn't require coding and can be helpful for you and other members in the future 🤗.

Consider using the free Easify Product Options app. Instead of managing custom options and variants in your product settings, this app allows you to create and manage them more effectively.

With 24 option input types available, such as dropdowns (with or without images), radio buttons, buttons, checkboxes, text boxes, file uploads, image swatches, color swatches, and many more, you can better illustrate your custom options 👍.

Additionally, the app offers features to boost sales, including Tiered wholesale pricing to encourage larger purchases with quantity discounts, displaying discount codes on the cart page, and editing custom options in the shopping cart.

There are many more features waiting for you to explore 🤘. Give it a try!

[MRamzan]

Hi.

If you have to keep your color swatches as pills and any other variant as dropdown then here is the solution: