Remove dropdown menu with only one option

Solved
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 

 

 

 


 

 

 

 

 

 

 

 

0 Likes

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();
         }
    }
})
Visit my Shopify Youtube channel to learn how to code your Shopify store and fix various coding issues on Shopify.(subscribe if you like it :)).
Glad to help out and wish your Shopify store great success.
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

0 Likes

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

 

Visit my Shopify Youtube channel to learn how to code your Shopify store and fix various coding issues on Shopify.(subscribe if you like it :)).
Glad to help out and wish your Shopify store great success.
nndbrgs
Tourist
4 0 0

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

0 Likes

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.
0 Likes

@Bflaherty03 it should work for debut theme

Visit my Shopify Youtube channel to learn how to code your Shopify store and fix various coding issues on Shopify.(subscribe if you like it :)).
Glad to help out and wish your Shopify store great success.
0 Likes

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.
0 Likes
paul_wing
New Member
1 0 0

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>

 

0 Likes