Hide single option selectors (Dawn Theme)

Technical Q&A
1

Hi! I have scoured the internet for a solution for this, and have tried writing some liquid. (I used to be a Shopify Dev & second-tier support but It’s been several years)

Essentially I want to hide single option selectors on the product page :

Screenshot 2023-12-08 at 10.35.06 AM.png
Screenshot 2023-12-08 at 10.35.06 AM.png1312×679 46.9 KB

I am having a hard time figuring out which selector to use. I know I’m probably way off, but something like this?

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

Placed in the

here:

{%- for option in product.options_with_values -%}
        
        
          
          

            
            {% render 'icon-caret' %}
          

        

      {%- endfor -%}

Thank you!

2

Jay120_0-1702047567589.png

do you want to hide this? i mean when it is 1 it should be hidden. If user select 2 the thing should appear, Correct?

3

You could give this a try: snippets/product-variant-picker.liquid (Dawn 12, l.24)

{%- for option in product.options_with_values -%}
  {% if option.values.size > 1 %}
    
  {% else %}
    
  {% endif %}
{%- endfor -%}

My two cents. Good luck!

4

I was so hopeful this would work but it didn’t I can’t figure out why.

5

No, I don’t want to hide that, I want to hide the option selector when there is only one option. In my screenshot you can see there is only ONE width and only one finish for that product. So the option selectors are redundant.

6

Hi @Samanthals ,

I think you can try

{%- for option in product.options_with_values -%}
        
        
          
          

            
            {% render 'icon-caret' %}
          

        

      {%- endfor -%}

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

7

Hi @Samanthals ,

My understanding is you want to hide the option name and values if the option value is only one. So you can call the option value size instead. You can wrap the code of the option values with if statement.

{%- for option in product.options_with_values -%}
    {% if option.values.size > 1 %}
        
          
          

            
            {% render 'icon-caret' %}
          

        

   {% endif %}
{%- endfor -%}

Hope it helps!