Solved

Remove dropdown menu with only one option

nndbrgs
Tourist
4 0 0

Hello.

I'm building a dropshipping store and almost all of my products have multiple variations of colors and sizes, most of them are shipped from a lot of countries too.

The thing is, I'm only buying the products from China and even when I delete all the "Ships from" variations it keeps appearing on the products pages with only one option to be selected.

I've tried the solutions @Nitin_Kujur 

 

 

 


 

 

 

 

 

 

 

 

Accepted Solution (1)

DeepCode
Shopify Partner
118 19 24

This is an accepted solution.

Try to add the JS script to the end of theme.js

$(document).ready(function(){
    for (const select of $(".template-product select")) {
         if ($(select).children().length == 1) {
            $(select).closest(".selector-wrapper").hide();
         }
    }
})
banned

View solution in original post

Replies 9 (9)

DeepCode
Shopify Partner
118 19 24

This is an accepted solution.

Try to add the JS script to the end of theme.js

$(document).ready(function(){
    for (const select of $(".template-product select")) {
         if ($(select).children().length == 1) {
            $(select).closest(".selector-wrapper").hide();
         }
    }
})
banned
nndbrgs
Tourist
4 0 0

Woooah, that worked almost perfectly. Thank you so, so much!

Just a perfectionist question, the dropdown menu is visible for something like a second when I open the page, is it possible to make it invisible even for this period of time?

 

I know it's a silly question, but as I've said, I'm a perfectionist. But your answer helped me a lot already. Thank you again ❤️

DeepCode
Shopify Partner
118 19 24

It is a client side solution, so I don’t think it is possible to make that perfect 🙂 but it depends on the network speed, if everything loads fast, it is hard to notice. 

If you have any problems in the future for your Shopify, you can visit my YouTube channel, I am keeping posting videos on how to fix different problems on Shopify store, you may have some thing useful there 🙂  https://youtube.com/channel/UCxx8s_d6t_RKNqHrp-4bpvQ

 

banned
nndbrgs
Tourist
4 0 0

No problem @DeepCode. And thanks again for your help.

Bflaherty03
Excursionist
33 0 4

Is there a way to do this in the Debut theme? 

https://www.babsbotanicals.com
It is our mission at Babs Botanicals to help our customers create more calming, soothing spaces in their homes and offices by providing quality houseplants and accessories delivered to their door.
DeepCode
Shopify Partner
118 19 24

@Bflaherty03 it should work for debut theme

banned
Bflaherty03
Excursionist
33 0 4

Unfortunately that did not work. I edited theme.js and added that code to the bottom but it did not change anything.

https://www.babsbotanicals.com
It is our mission at Babs Botanicals to help our customers create more calming, soothing spaces in their homes and offices by providing quality houseplants and accessories delivered to their door.
paul_wing
Visitor
1 0 1

add this to product-template.liquid

 

 

{% if option.values.size == 1%} style="display: none;"{% endif %}

 

 

you'll need to add it to the part of the code that iterates over the options. mine looks like this:

 

 

{% unless product.has_only_default_variant %}
        <div class="product-form__controls-group">
          {% for option in product.options_with_values %}
          <div class="selector-wrapper js product-form__item" {% if option.values.size == 1%} style="display: none;"{% endif %}>
            <label for="SingleOptionSelector-{{ forloop.index0 }}">
              {{ option.name }}
            </label>
            <select 
                    data-option-ezfy="option{{ forloop.index }}"
                    class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
                    id="SingleOptionSelector-{{ forloop.index0 }}"
                    data-index="option{{ forloop.index }}"
                    
                    >
              {% for value in option.values %}
              <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
              {% endfor %}
            </select>
          </div>

 

SiteBuilder
Excursionist
22 0 7

@paul_wing  Thanks a lot man, I confirm it works!