Solved

Items with no variant showing Default Title Dropdown

MTNOffroadFab
New Member
9 0 0

All of my items without variants are showing a dropdown with "Default Title". How do I remove this?

 

Using the Supply Theme

Accepted Solution (1)
SocialAutoPost
Shopify Partner
434 59 105

This is an accepted solution.

Hello @MTNOffroadFab,

 

Thank you for your reply.

 

Please try updated code :

 

{% if product.has_only_default_variant %}
  <input type="hidden" name="id" value="{{ product.variants.first.id }}">
{% else %}
  <select name="id" id="productSelect-{{ section.id }}" class="product-variants product-variants-{{ section.id }}">
    {% for variant in product.variants %}
      {% if variant.available %}
        <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">
          {{ variant.title }} - {{ variant.price | money_with_currency }}
        </option>
      {% else %}
        <option disabled="disabled">
          {{ variant.title }} - {{ 'products.product.sold_out' | t }}
        </option>
      {% endif %}
    {% endfor %}
  </select>
{% endif %}

 

If it still doesn't solve the issue, feel free to revert back. 

Was the reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Auto post your Shopify products to Instagram, Facebook, Pinterest, LinkedIn and Twitter.
App: Social Schedular

View solution in original post

Replies 5 (5)

SocialAutoPost
Shopify Partner
434 59 105

Hello @MTNOffroadFab,

 

Welcome to Shopify community!

 

To hide "Default title" variant dropdown you have to make some customization to your theme if you are comfortable doing it (or DM me our team can do it for free for you)

 

Step 1: From your Shopify admin, go to Online Store > Themes > Edit Code

 

Step 2: Find the file named product-template.liquid or product.liquid. The exact file can vary, but typically product-template.liquid is the right one in the Supply theme.

 

Step 3: Look for the code that handles the variants dropdown. It usually includes a loop, example code :

 

{% if product.variants.size > 1 %}
  <select id="product-select" name="id">
    {% for variant in product.variants %}
      <option value="{{ variant.id }}">{{ variant.title }}</option>
    {% endfor %}
  </select>
{% else %}
  <input type="hidden" name="id" value="{{ product.variants.first.id }}">
{% endif %}

 

 

Step 4: Modify the Code

 

 

{% if product.has_only_default_variant %}
  <input type="hidden" name="id" value="{{ product.variants.first.id }}">
{% else %}
  <label for="product-select">{{ 'products.product.select_variant' | t }}</label>
  <select id="product-select" name="id">
    {% for variant in product.variants %}
      <option {% if variant == current_variant %}selected="selected"{% endif %} value="{{ variant.id }}">{{ variant.title }}</option>
    {% endfor %}
  </select>
{% endif %}

 

 

Step 5: Save the changes and see theme preview.

 

What we did?

 

 

  • The condition {% if product.has_only_default_variant %} checks if the product only has the default variant.
  • If true, it hides the dropdown and sets the variant ID in a hidden input.
  • If false, it displays the dropdown for selecting variants.

 

 

If you still have any questions feel free to reach out.

Was the reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Auto post your Shopify products to Instagram, Facebook, Pinterest, LinkedIn and Twitter.
App: Social Schedular
MTNOffroadFab
New Member
9 0 0

 

 

<select name="id" id="productSelect-{{ section.id }}" class="product-variants product-variants-{{ section.id }}" {% if product.has_only_default_variant %} data-has-only-default-variant {% endif %}>
          {% for variant in product.variants %}
            {% if variant.available %}

              <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

            {% else %}
              <option disabled="disabled">
                {{ variant.title }} - {{ 'products.product.sold_out' | t }}
              </option>
            {% endif %}
          {% endfor %}

I tried adding the code here and it worked on the items with no variants but it broke the other items with variants 

SocialAutoPost
Shopify Partner
434 59 105

This is an accepted solution.

Hello @MTNOffroadFab,

 

Thank you for your reply.

 

Please try updated code :

 

{% if product.has_only_default_variant %}
  <input type="hidden" name="id" value="{{ product.variants.first.id }}">
{% else %}
  <select name="id" id="productSelect-{{ section.id }}" class="product-variants product-variants-{{ section.id }}">
    {% for variant in product.variants %}
      {% if variant.available %}
        <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">
          {{ variant.title }} - {{ variant.price | money_with_currency }}
        </option>
      {% else %}
        <option disabled="disabled">
          {{ variant.title }} - {{ 'products.product.sold_out' | t }}
        </option>
      {% endif %}
    {% endfor %}
  </select>
{% endif %}

 

If it still doesn't solve the issue, feel free to revert back. 

Was the reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Auto post your Shopify products to Instagram, Facebook, Pinterest, LinkedIn and Twitter.
App: Social Schedular
MTNOffroadFab
New Member
9 0 0

That worked great! Thanks. 

SocialAutoPost
Shopify Partner
434 59 105

Glad to help 🙂 

Was the reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Auto post your Shopify products to Instagram, Facebook, Pinterest, LinkedIn and Twitter.
App: Social Schedular