Drop down menu for product variants.

New Member
3 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
New Member
3 0 0

Bump

0 Likes
Astronaut
1071 145 260

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 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
1 Like
New Member
3 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