Drop down menu for product variants.

Highlighted
New Member
4 0 0

I'm trying to implement a drop down menu in my store for several products that have alot of variants. 

 

Now, I can't find any answers on how to do this (I'm using the Brooklyn theme). 

 

I found several articles on how to create drop down menus for product variants, but none support my specific theme.

 

Can anyone help me out with this, or direct me to a guide?

 

 

0 Likes
Highlighted
New Member
4 0 0

Bump

0 Likes
Highlighted
Shopify Partner
1445 195 523

Where are you trying to do this? Usually this functionality is native to themes on the product page. 

 

Generally inside the product.liquid it would be something like:

      {% if product.variants.size > 1 %}
        {% for option in product.options_with_values %}
      <div class="options">
      <div>{{ option.name }}</div>
          <select class="product-variants {{ option.name | handleize }} option-{{option.position}}" data-url="{{ product.url }}">
            {% for value in option.values %}
              <option {% if option.selected_value == value %}selected{% endif %}>{{ value }}</option>
            {% endfor %}
          </select>
      </div>
        {% endfor %}
      {% endif %}

So if you had variants of "Size" and "Color" it would output something like:

Size:
Dropdown Menu options below
S
M
L
XL

 

Color: 
Dropdown Menu options below
Red
Black
Blue
Green

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
Highlighted
New Member
4 0 0

Hey @Ninthony thanks for your reply!

 

Unfortunately a drop down variant menu is not native to the Brooklyn theme. 

 

Do I have to edit the HTML code to get the result I'm looking for?

0 Likes
Highlighted
Tourist
5 0 2

BUMP.

I'm also trying to figure out how to change radio buttons for variants into a drop down menu in Brooklyn.

Tried a code that I found on a post from 2017, but it gave me an error...

not sure if I did it correctly or not, but this is where I found it:

PLEASE HELP, thank you!

https://community.shopify.com/c/Shopify-Design/Variants-Option-For-Brooklyn-Theme/td-p/295931

0 Likes
Highlighted
New Member
4 0 0

Hi there @cocorostudios!

 

I've managed to fix the problem. Simply contact live support and they will guide you along the process.

 

Hope this helps!

0 Likes
Highlighted
Tourist
5 0 2

Thanks, but what does that mean "live support"?  Do you have the  number?

I tried calling but it was a major redirecting of recordings and menus...  couldn't get any help with an actual person.

Thanks in advance!

0 Likes
Highlighted
Tourist
5 0 2

This post explains how to switch to a drop-down for variant selection for the Brooklyn theme.  Its a 'one-click' change!

https://community.shopify.com/c/Shopify-Design/Change-option-selection-to-drop-down-menu/td-p/601214

Highlighted
Tourist
8 0 0

Lifesaver thanks!

0 Likes