Help hiding default title

[Josh_Patterson2]

I need help hiding the dropdown that says "default title" when there are no variants on an item: I have seen code sampls for other templates, but can't find a similar example for the Supply template. Here is the Product.liquid code.

<!-- Bold Duplicate And Hide -->{% if product.metafields.inventory.ShappifyHidden == "true" %}
Product is not available
{% break %}{% endif %}

{% include 'shappify-bdl-no-select' %}
{% include 'breadcrumb' %}

<div class="grid" itemscope itemtype="http://schema.org/Product">
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">

  <div class="grid-item large--two-fifths">
    <div class="grid">
      <div class="grid-item large--eleven-twelfths text-center">
        <div class="product-photo-container" id="productPhoto">
          {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
          <img id="productPhotoImg" src="{{ featured_image | img_url: 'large' }}" alt="{{ featured_image.alt | escape }}" {% if settings.product_image_zoom_enable %} data-zoom="{{ featured_image | img_url: '1024x1024' }}"{% endif %}>
        </div>
        {% if product.images.size > 1 %}
          <ul class="product-photo-thumbs grid-uniform" id="productThumbs">

            {% for image in product.images %}
              <li class="grid-item medium-down--one-quarter large--one-quarter">
                <a href="{{ image.src | img_url: 'large' }}" class="product-photo-thumb">
                  <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
                </a>
              </li>
            {% endfor %}

          </ul>
        {% endif %}

      </div>
    </div>

  </div>

  <div class="grid-item large--three-fifths">

    <h2 itemprop="name">{{ product.title }}</h2>

    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">

      {% assign variant = product.selected_or_first_available_variant %}

      <meta itemprop="priceCurrency" content="{{ shop.currency }}">
      <meta itemprop="price" content="{{ variant.price | money }}">

      {% if settings.product_vendor_enable %}
        <p class="product-meta" itemprop="brand">{{ product.vendor }}</p>
      {% endif %}

      <ul class="inline-list product-meta">
        <li>
          <span id="productPrice" class="h1">
           {% include 'shappify-bdl-min-price' with product %}
          </span>
        </li>
        {% if product.compare_at_price_max > product.price %}
        <li>
          <span id="comparePrice" class="sale-tag large">
            {% assign compare_price = variant.compare_at_price %}
            {% assign product_price = variant.price %}
            {% include 'price-sale' %}
          </span>
        </li>
        {% endif %}
        {% if settings.product_reviews_enable %}
          <li class="product-meta--review">
            <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
          </li>
        {% endif %}
      </ul>

      <hr id="variantBreak" class="hr--clear hr--small">

      <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

      <form class="shappify_add_to_cart_form" action="/cart/add" method="post" id="addToCartForm" data-product-id="{{ product.id }}" enctype="multipart/form-data">
        <select name="id" id="productSelect" class="product-variants">
          {% for variant in product.variants %}
          {% if variant.metafields.shappify_bundle.is_bundle == "true" %}{% else %}
            {% if variant.available %}

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

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

        <!-- Bold: Options -->{% include 'shappify-options' %} 
        
        {% if settings.product_quantity_enable %}
          <label for="quantity" class="quantity-selector">{{ 'products.product.quantity' | t }}</label>
          <input type="number" id="quantity" name="quantity" value="1" min="1" class="quantity-selector">
        {% endif %}

        <button type="submit" name="add" id="addToCart" class="btn">
          <span class="icon icon-cart"></span>
          <span id="addToCartText">{{ 'products.product.add_to_cart' | t }}</span>
        </button>
        {% if settings.product_quantity_message %}
          <span id="variantQuantity" class="variant-quantity"></span>
        {% endif %}
      </form>
{% include 'shappify-bdl-load-bundle' %}
      <hr>

    </div>

    <div class="product-description rte" itemprop="description">
      {% include 'product-description-tabs' %}
    </div>

    {% if settings.social_sharing_products %}
      {% include 'social-sharing' %}
    {% endif %}

  </div>
</div>

{% if settings.related_products_enable %}
  {% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %}
  {% include 'related-products' %}
{% endif %}

{% if settings.product_reviews_enable %}
  <hr>
  <div id="shopify-product-reviews" data-id="{{ product.id }}">{{ product.metafields.spr.reviews }}</div>
{% endif %}

{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script>

  // Pre-loading product images, to avoid a lag when a thumbnail is clicked, or
  // when a variant is selected that has a variant image.
  Shopify.Image.preload({{ product.images | json }}, 'large');

  var selectCallback = function(variant, selector) {

    var $addToCart = $('#addToCart'),
        $productPrice = $('#productPrice'),
        $comparePrice = $('#comparePrice'),
        $variantQuantity = $('#variantQuantity'),
        $quantityElements = $('.quantity-selector, label + .js-qty'),
        $addToCartText = $('#addToCartText'),
        $featuredImage = $('#productPhotoImg');

    if (variant) {
      // Update variant image, if one is set
      // Call timber.switchImage function in shop.js
      if (variant.featured_image) {
        var newImg = variant.featured_image,
            el = $featuredImage[0];
        $(function() {
          Shopify.Image.switchImage(newImg, el, timber.switchImage);
        });
      }

      // Select a valid variant if available
      if (variant.available) {
        // We have a valid product variant, so enable the submit button
        $addToCart.removeClass('disabled').prop('disabled', false);
        $addToCartText.html({{ 'products.product.add_to_cart' | t | json }});

        // Show how many items are left, if below 10
        {% if settings.product_quantity_message %}
        if (variant.inventory_management) {
          if (variant.inventory_quantity < 10 && variant.inventory_quantity > 0) {
            $variantQuantity.html({{ 'products.product.only_left' | t: count: '1' | json }}.replace('1', variant.inventory_quantity)).show();
          } else {
            $variantQuantity.hide();
          }
        }
        {% endif %}


        $quantityElements.show();
      } else {
        // Variant is sold out, disable the submit button
        $addToCart.addClass('disabled').prop('disabled', true);
        $addToCartText.html({{ 'products.product.sold_out' | t | json }});
        $variantQuantity.hide();
        $quantityElements.hide();
      }

      // Regardless of stock, update the product price
      var customPriceFormat = timber.formatMoney( Shopify.formatMoney(variant.price, "{{ shop.money_format }}") );
      $productPrice.html(customPriceFormat);

      // Also update and show the product's compare price if necessary
      if ( variant.compare_at_price > variant.price ) {
        var priceSaving = timber.formatSaleTag( Shopify.formatMoney(variant.compare_at_price - variant.price, "{{ shop.money_format }}") );
        {% comment %}
        priceSaving += ' (' + ( (variant.compare_at_price - variant.price)*100/(variant.compare_at_price) ).toFixed(0) + '%)';
        {% endcomment %}
        $comparePrice.html({{ 'products.general.save_html' | t: saved_amount: '[$]' | json }}.replace('[$]', priceSaving)).show();
      } else {
        $comparePrice.hide();
      }

    } else {
      // The variant doesn't exist, disable submit button.
      // This may be an error or notice that a specific variant is not available.
      $addToCart.addClass('disabled').prop('disabled', true);
      $addToCartText.html({{ 'products.product.unavailable' | t | json }});
      $variantQuantity.hide();
      $quantityElements.hide();
    }
  };

  jQuery(function($) {
    new Shopify.OptionSelectors('productSelect', {
      product: {{ product | json }},
      onVariantSelected: selectCallback,
      enableHistoryState: true
    });

    // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
    {% if product.options.size == 1 and product.options.first != 'Title' %}
      $('.selector-wrapper:eq(0)').prepend('<label>{{ product.options.first | escape }}</label>');
    {% endif %}

    // Hide selectors if we only have 1 variant and its title contains 'Default'.
    {% if shappify_qb_options_count == 1 and product.variants.first.title contains 'Default' %}
      $('.selector-wrapper').hide();
    {% else %}
      $('#variantBreak').removeClass('hr--clear');
    {% endif %}
  });
</script>

{% if settings.product_image_zoom_enable %}
  {{ 'jquery.zoom.min.js' | asset_url | script_tag }}
{% endif %}

[Michael_Morales]

Hey Josh, 

I don't think you need to go through all that hassle. If your products don't have any variants, just don't click on "Add a variant" when you create the product (see attached). Let me know if that helps.

Cheers,

Michael

[Brickmaster]

Yeah that doesnt work.  I also do not have any variants selected on any of my products and it continues to come up on all products.

[Josh_Patterson2]

Hey Michael, any ideas? WIth no varians selected, it still shows up. See the example on Brickmasters page here:

http://www.bricksandfigs.com/collections/lego-minifigurepacks-bundles/products/minifigurepacks-lego-...

[Help_Desk]

After frustratingly looking at this problem myself for 45 minutes and speaking with a guru that was very kind and helpful in offering to (escelate my claim) , however that will not be necessary for any of you.

I have discovered a quick fix for all of your default title woes... 

Simply add 1 variant (of the exact type that you are already selling) this will change default title to the Variant type / Variant name that you select

Now enjoy the rest of your day ! 

[Adam_Bowen]

I have the same issue and can not find a solution on these help forums. I am using the SUpply template and have uploaded my products using import function from a CSV file.

For some reason products without variants appear with a 'Default Title' dropdown on the product page (image attached).

How to i get rid of this?

[SproutTherapy]

Has anyone found a solution to this problem?

I am having the same issue. For some reason "DEFAULT TITLE" has appeared below the price for one of my products. The product has NO variants and I have not edited the product recently.

Here are what I think are the relevant bits of code:

{{ 'variant_selection.js' | asset_url | script_tag }}
<script>
  var selectCallback = function(variant, selector) {
    timber.productPage({
      money_format: "{{ shop.money_format }}",
      variant: variant,
      selector: selector
    });
    mlvedaload();
  };

  jQuery(function($) {
    new Shopify.OptionSelectors('ProductSelect', {
      product: {{ product | json }},
      onVariantSelected: selectCallback,
      enableHistoryState: true
    });

    // Add label if only one product option and it isn't 'Title'. Could be 'Size'.

    {% if product.options.size == 1 and product.options.first != 'Title' %}
      $('.radio-wrapper:eq(0)').prepend('<label for="ProductSelect-option-0" class="single-option-radio__label">{{ product.options.first | escape }}</label>');
    {% endif %}

    // Hide drop-down selectors if we only have 1 variant and its title contains 'Default'.
    {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
      $('.selector-wrapper').hide();
    {% endif %}

  });
</script>

// ---------------------------------------------------------------------------
// SingleOptionRadio
// takes option name and values and creates a series of radio buttons from them
// ---------------------------------------------------------------------------
Shopify.SingleOptionRadio = function(multiSelector, index, name, values) {
  this.multiSelector = multiSelector;
  var selectors = this.multiSelector.selectors;
  this.values = values;
  this.index = index;
  this.name = name;
  this.element = document.createElement('fieldset');

  for (var i = 0; i < values.length; i++) {
    var radio = document.createElement('input');
    var label = document.createElement('label');

    //set radio button values
    radio.type = 'radio';
    radio.value = values[i];
    radio.setAttribute('name', name);
    radio.setAttribute('class', this.multiSelector.selectorClass + '__radio');
    radio.setAttribute('data-option', 'option' + (index+1));
    radio.id = multiSelector.domIdPrefix + '-option-' + name.replace(/\s/,'-') + '-' + values[i].replace(/\s/,'-');

    label.htmlFor = radio.id;
    label.innerHTML = values[i];

    if (!this.multiSelector.product.variants[i].available && this.multiSelector.product.options.length === 1) {
      $(radio).addClass('disabled').attr('disabled', 'disabled');
      $(label).addClass('disabled');
    }

    this.element.appendChild(radio);
    this.element.appendChild(label);
  }

  this.element.setAttribute('class', this.multiSelector.radioClass);
  this.element.setAttribute('data-option', 'option' + (index+1));
  this.element.name = name;
  this.element.id = multiSelector.domIdPrefix + '-option-' + index;
  this.element.onchange = function(event, options) {
    options = options || {};

    multiSelector.updateSelectors(index, options);
  };

  return true;
};

[simonski]

What fixed it for me, I had an error in the code (due to a change of the jquery library in my case).

I saw it in the chrome console (dev tools). I corrected the mistake, and the default title was gone...

[what_ever]

{% for option in item.options_with_values %}
{% unless option.name contains 'Title' %}
{{ option.name }}: {{ option.value }}
{% endunless %}
{% endfor %}