Change option selection to drop down menu

Solved
Highlighted
Tourist
19 0 2

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.  

0 Likes
Highlighted
Shopify Staff
Shopify Staff
397 50 65

This is an 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:

 

09-54-6l7p6-jw8zn

 

 

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 | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

2 Likes
Highlighted
Tourist
19 0 2

Hey Helen,

 

Got it! Thanks a lot!

0 Likes
Highlighted
Tourist
5 0 1

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

 

Screen Shot 2020-01-23 at 9.16.02 PM.png



 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
397 50 65

This is an 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:

 

27-20-ikjut-5extd

 

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:

 

27-21-ichz8-luxqn

 

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 | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes
Highlighted
Tourist
5 0 1

Thank you!! It worked!

1 Like
Highlighted
Tourist
7 0 3

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?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
397 50 65

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!

Helen | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes
Highlighted
Shopify Partner
1 0 0

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.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
397 50 65

Hello, @Jraw23

 

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

Helen | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution 

0 Likes