Solved

How can I add a drop down menu on my product page?

Ramy91
Tourist
25 0 3

Hi, my current product page displays my product selection this way: https://gyazo.com/7783ade4ae20c36e9bac65d1dededeeb

Would it be possible (Brooklyn theme) to display it with this functionality ?

https://gyazo.com/474f84615fb2e737d49354d08720a036

 

Thank you! 🙂

Accepted Solution (1)

Brie
Shopify Staff
571 48 113

This is an accepted solution.

Hi, @Ramy91

 

Thank you for reaching out about that. If you have a recent version of the Brooklyn theme, this should be a customization option in your theme settings. To do this, navigate to Online Store > Themes > Customize (beside your current theme), which will open up your theme editor. From there, select "Product pages" from the drop down menu at the top of the page, then click on "Product pages" from the lefthand menu, and under "Product Options Form" change the "Picker type" to "Dropdown". Let me know if you have any questions! 

Brie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

View solution in original post

Replies 30 (30)

Brie
Shopify Staff
571 48 113

This is an accepted solution.

Hi, @Ramy91

 

Thank you for reaching out about that. If you have a recent version of the Brooklyn theme, this should be a customization option in your theme settings. To do this, navigate to Online Store > Themes > Customize (beside your current theme), which will open up your theme editor. From there, select "Product pages" from the drop down menu at the top of the page, then click on "Product pages" from the lefthand menu, and under "Product Options Form" change the "Picker type" to "Dropdown". Let me know if you have any questions! 

Brie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Ramy91
Tourist
25 0 3

Thanks a lot Brie! It's just what I was looking for 🙂

jwidjaja
Visitor
1 0 1

hey, if in case where I am adding three options for one product, where:

- one option I'd like to use click

- two options I'd like to use dropdown

 

how can I configure that?

 

Also, is there any ways where I can use option for click (say colour black) and add the colour icon to it?

 

Thanks

Brie
Shopify Staff
571 48 113

Hi, @jwidjaja!

 

That wouldn't be a built in option, however you can use an app such as Bold Product Options to do that. Alternatively, you could contact a Shopify Expert, and have them custom code this into your store for you. 

Brie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Lia91
Tourist
9 0 1

Hi, sorry to jump on the bandwagon late, I was wondering the same thing whether drop down menus could be added to the product listing in the Debut theme? 

Many thanks!

Brie
Shopify Staff
571 48 113

Hey, @Lia91!

A dropdown option should be the default for the Debut theme, if you have variants on a product. How many options/variants are you trying to have exactly? Are you not able to see a dropdown when you add different variants to a product?

Brie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Lia91
Tourist
9 0 1

Hi Brie, thanks for your response... no I don't have variants, but I would like to add them on my product page to add more info without making the listing look so bulky. 

Brie
Shopify Staff
571 48 113

@Lia91 -

Okay, I see. I'd suggest walking through our help docs on creating product variants, which should take you through the whole process. Feel free to contact support any time if you need help along the way. 

Brie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

OlgaK
Visitor
2 0 0

Hi Brie,

Sorry for jumping in. I have Blockshop theme and also looking for the drop down menu option on product pages. Is it possible to implements somehow? And also I would like to organise FAQs the drop down menu way. Could you please help?

Thank you!

Brie
Shopify Staff
571 48 113

Hey, @OlgaK!

Blockshop is a third party theme, not developed or supported by Shopify, so your best bet for support with your product pages will be to contact the theme developers directly. They'll be able to tell you if this is a built in option for that theme, or if it will require custom coding. Regarding drop down options on your FAQ page, using an app like HelpCenter might do the trick. Hope that helps!

 

 

Brie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

AsAlwaysAleia
Visitor
1 0 0

Does this work with "Express" Theme too? I just tried and no luck. Is there a free app that will help?

Sophia
Shopify Staff
1666 108 217

Hey, @AsAlwaysAleia!

Sophia here from Shopify. While the Express theme doesn't have theme editor settings for how a product's variant options appear on the product page, drop down menus are automatically enabled for products that have variants. Here's an idea of what it looks like before and after you click on the variant menu:

 

21-04-8kgir-8xwmg

21-04-vfxo8-dbum1

Some other themes (like Brooklyn, for example) have a setting for drop down menus in the theme editor because they allow a choice between a menu or buttons. Since Express only has the menu option at this time, you won't need to configure the setting first. I hope that helps!

 

 

Sophia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

GemmaBrennan
Visitor
1 0 0

Hi, I am also having this issue however I do not have the option to add this, when I go to "Product page" it only gives me the option to enable image zoom?

Sophia
Shopify Staff
1666 108 217

@GemmaBrennan wrote:

Hi, I am also having this issue however I do not have the option to add this, when I go to "Product page" it only gives me the option to enable image zoom?


Hi, @GemmaBrennan!

Are you using the Express theme as well? Products that have variants might display either a drop-down menu or buttons, even if there isn't an option to enable them in the theme settings. I'm happy to take a closer look if you are able to confirm the name of your theme. Feel free to share your store link here too so we can view the product pages.

Sophia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Sophia
Shopify Staff
1666 108 217

@GemmaBrennan wrote:

Hi, I am also having this issue however I do not have the option to add this, when I go to "Product page" it only gives me the option to enable image zoom?


How are things going, Gemma? If you still need help with your product page, I'd be happy to take a look at the options based on the theme you're using.

Sophia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

THENAMASTEGANG
Visitor
2 0 0

Hi…I’m also facing same issue and I’m using “Minimal theme” now ..could you please help us out ? Thank you!!

Sophia
Shopify Staff
1666 108 217

@THENAMASTEGANG wrote:

Hi…I’m also facing same issue and I’m using “Minimal theme” now ..could you please help us out ? Thank you!!


Hey, @THENAMASTEGANG!

The Minimal theme's quantity selector can be enabled by following these steps:

  1. In your Shopify admin, go to Online Store > Themes > Customize
  2. From the menu at the top of the theme editor, select Products > Default product
  3. Under the Product pages settings, ensure that the quantity selector checkbox is checked
  4. Remember to Save your changes

09-13-70769-88407

 

Below is an example of what the quantity selector looks like on desktop (from the demo in the Shopify Theme Store). It displays a number that customers can increase or decrease with the up and down arrow buttons that surface when hovered over. If you want to change the style of the quantity selector, I recommend getting in touch with our team through the Shopify Help Center so we can submit a customization request to the Theme Support team for you. I can't guarantee whether the customization request will be approved, but we can absolutely look into it.

09-54-65202-26452

Sophia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

THENAMASTEGANG
Visitor
2 0 0
I've asked you about adding drop down menu in minimal theme.. Could you
please guide me on that?
Sophia
Shopify Staff
1666 108 217

@THENAMASTEGANG wrote:
I've asked you about adding drop down menu in minimal theme.. Could you
please guide me on that?

My apologies for the miscommunication there!

If a product has variants, there will already be a drop down menu enabled by default. The settings for this menu are in the same section of the theme editor as the quantity selector settings, under Variant picker and button size (you can choose between a Small, Medium, or Large menu). Here's what the Small menu looks like in the demo of the Minimal theme:

11-56-26347-6219

 

Do you need a drop down menu for something other than a product's variants? If so, one of the apps for additional product options may offer the customization you're looking for. Otherwise, please let me know in as much detail as possible what section of the page you want to add a drop down menu to and what information you need to display there. If you have examples of what you want the page to look like, feel free to share them here as well. Thanks!

Sophia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

GymGearAus
Visitor
1 0 0

Good Morning Sophia
I am selling a product that has 3 option variations, I am using the Warehouse Version 1.5.0 theme. 
Would you possibly have a way to add a drop down menu for each of these 3 options?
If the client goes to the "Product Page" they then get to choose a,b or c from the first drop down, then they chose a,b or c from drop down 2 etc.
Thank you in advance
Brian

Sophia
Shopify Staff
1666 108 217

@GymGearAus wrote:

Good Morning Sophia
I am selling a product that has 3 option variations, I am using the Warehouse Version 1.5.0 theme. 
Would you possibly have a way to add a drop down menu for each of these 3 options?
If the client goes to the "Product Page" they then get to choose a,b or c from the first drop down, then they chose a,b or c from drop down 2 etc.
Thank you in advance
Brian


Hi, Brian!

 

Additional drop down menus can be added with one of the apps for product options.

 

These apps are helpful for products that offer customizations and require customers to select their preferences. For example, jewelry products where the customer gets to choose the type of metal, chain length, etc. You can even add a custom text field if the product offers a custom message, like an engraving or a gift note.

 

Let me know if this is along the lines of what you need. 

Sophia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

KaelaCorine
Visitor
2 0 0

Thanks!

Samcherish
Visitor
3 0 0

I don't have a tab stating product pages, I have a tab that says pages or another that says products but when you click either of them they don't have much in them. is there something else I could click instead?

Sophia
Shopify Staff
1666 108 217

@Samcherish wrote:

I don't have a tab stating product pages, I have a tab that says pages or another that says products but when you click either of them they don't have much in them. is there something else I could click instead?


Hi, @Samcherish!

 

I'm happy to take a closer look into this with you. What is the name of the theme you're using?

Sophia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Samcherish
Visitor
3 0 0
Hi

Thanks for that, my theme is Brooklyn
Sophia
Shopify Staff
1666 108 217

@Samcherish wrote:
Hi

Thanks for that, my theme is Brooklyn

Thanks, @Samcherish!

 

You can follow these steps to find the product page variant options in the theme editor:

 

  1. From your admin, go to Online Store > Themes > Customize.
  2. At the top of the theme editor, click the drop-down menu and select Products > Default products.
  3. Once the menu on the left-hand side of the theme editor populates the product options, select Product pages.
  4. On the right-hand side of the theme editor, find the section called PRODUCT OPTIONS FORM and choose either Button or Dropdown from the Picker type menu.
  5. Save your changes.

27-11-34002-59972

This menu is set to 'Home page' by default. Select 'Products > Default product'.This menu is set to 'Home page' by default. Select 'Products > Default product'.

Once 'Default product' is selected in the menu at the top of the theme editor, select 'Product pages' on the left-hand side, and then find the picker type on the right-hand side.Once 'Default product' is selected in the menu at the top of the theme editor, select 'Product pages' on the left-hand side, and then find the picker type on the right-hand side.Once your settings are saved, any products that have variants will display the picker type you chose.

Sophia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

mmcpolin
New Member
4 0 0

How do I add a drop down menu in our product descriptions? We use the Brooklyn theme but cannot figure it out. We are not looking for variants. We just want to have drop downs in our product descriptions such as Care, Ingredients, Scent Profile etc. Is this possible or what apps offer this option?

Sophia
Shopify Staff
1666 108 217

Hello, @mmcpolin!

 

The dropdown menus mentioned in this thread are specifically for product variants. While the Brooklyn theme doesn't offer sections for product information, there are newer themes like Sense and Refresh that include collapsible sections to help you organize product details.

 

If you'd prefer to stick with Brooklyn, there are third-party apps that offer further customization of the product page design as well. Apps like those for product tabs or  custom pages may be of interest in this case.

Sophia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

marielrollins
Visitor
1 0 0

I'm trying to duplicate the product options on the right into the product page on the left but can't figure out how to do it. Can you help me?Screenshot 2023-12-07 135048.png

Sophia
Shopify Staff
1666 108 217

Hey, @marielrollins!

 

Your theme settings dictate the style of the product options (how they look on the page), but adding product information typically happens in the Products section of the admin instead.

 

In this case, additional product options can be added by using one of the third-party apps for product options. These apps allow customization beyond the standard variants and options that the product pages in the admin offer.

Sophia | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog