Can I split a variant dropdown menu into separate buttons on Shopify?

Shubhamgopal
Tourist
7 0 4
 

Hello, can anyone help me. I want to split variant dropdown menu into seperate button. I am trying to do this since 4 days still not done. Can anyone tell me how we can split drop down into buttons. 

 

This is the drop down menu which I have now

 

Screenshot_2021-09-26-01-43-04-502_com.android.chrome.jpg

I want to separate all option in form of button

Replies 9 (9)

PaulNewton
Shopify Partner
6274 573 1319

Did you check your theme settings for this feature? What theme are you using? What have you tried? What is your store url and storefront password if applicable? etc etc

 

How to solve this varies wildly by theme and context.

 

If you need to buy this customization contact me at paull.newton+shopifyforums@gmail.com with relevant detail

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


Shubhamgopal
Tourist
7 0 4

Hi Paul

Thank you for your message this is my store url https://www.spicemode.co

Store is live you can check. 

Theme turbo

Also this is the reference store button https://bachans.com/products/hot-spicy-japanese-barbecue-sauce?variant=40034098708660

Please check the product page

Thank you

PaulNewton
Shopify Partner
6274 573 1319

If this is not currently a feature in your theme settings, you can try and use the swatch feature of your theme https://help.outofthesandbox.com/hc/en-us/articles/115006911447-Enable-Color-Swatches-for-Product-Va... 

 

Otherwise you have to customize the theme.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


Dami_mond
Shopify Partner
83 0 9

Hello @Albarkhan 

My name is Damimond, Shopify partner.

 

Kindly provide your store URL to suggest the best solution.

 

Best regards

Damimond

 

 

 

 

 

 

 

 

banned
Shubhamgopal
Tourist
7 0 4

 

 

Hi dami, can you check my store https://www.spicemode.co

Thankyou

Dami_mond
Shopify Partner
83 0 9

Hello @Shubhamgopal 

 

I checked out your store as requested and I have a solution for you:

 

1. Go to online store section of your Shopify account.

2. Click on customize and scroll down to theme settings.

3. Click on product grid and select the swatches button.

4. Save the settings and visit your Shopify store.

 

I have tested this and hope it works for you too.

 

Best regards

 

Damimond

banned
Shubhamgopal
Tourist
7 0 4

Hello dami, 

Thanks for your reply I did this but again showing same dropdown 

Screenshot_2021-09-26-10-46-10-081_com.whatsapp.jpg

Dami_mond
Shopify Partner
83 0 9

I'd love to help you on this:

 

I will send you a collaborator request

banned
Shubhamgopal
Tourist
7 0 4

<div class="select">
<select id="product-select-{{ product.id }}{{ product-form }}{{ section.id }}{{ block.id }}" name="id" class="multi_select">
{% for v in product.variants %}
<option {% if v == variant %}selected="selected"{% endif %} value="{{ v.id }}" data-sku="{{ v.sku }}">{{ v.title }}</option>
{% endfor %}
</select>
</div>

 

 

 

I think this is the dropdown button code. I want to seperate all button from dropdown