Default product variant always being added

Highlighted
Tourist
9 0 1

When visitors select a variant and than press "add to cart" the default variant always gets added to the cart (instead of the one they chose). Can anyone see why the correct variant isn't being added to the cart (where in the code it's going wrong)? Here's the product.liquid & product-template.liquid code. I'm on Minimal theme.

I've already tried removing some apps (beeketing mobile sales boost & countdown timer, ultimate sales boost) but that didn't help. Also tried removing the shopify reviews but that didn't help.

For now I installed Hurrify so people can select a variant trough that app. But I'd like them to be able to do so on the product page.

& if anyone sees any line of code that can be removed to make my site faster, that would also be appreciated :)

product.liquid:

{%- include 'bold-product' with product, hide_action: 'break', output: 'none' -%}
<style>
.template-product #logo {
  display: none;
}
</style>
{% comment %}
  The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

{% section 'product-template' %}

<script>
  // Override default values of shop.strings for each template.
  // Alternate product templates can change values of
  // add to cart button, sold out, and unavailable states here.
  theme.productStrings = {
    addToCart: {{ 'products.product.add_to_cart' | t | json }},
    soldOut: {{ 'products.product.sold_out' | t | json }},
    unavailable: {{ 'products.product.unavailable' | t | json }}
  }
</script>
<script text="text/javascript">
  var _learnq = _learnq || [];

  var item = {
    Name: {{ product.title|json }},
    ProductID: {{ product.id|json }},
    Categories: {{ product.collections|map:'title'|json }},
    ImageURL: "https:{{ product.featured_image.src|img_url:'grande' }}",
    URL: "{{ shop.secure_url }}{{ product.url }}",
    Brand: {{ product.vendor|json }},
    Price: {{ bold_price|money|json }},
    CompareAtPrice: {{ bold_compare_at_price_max|money|json }}
  };

  _learnq.push(['track', 'Viewed Product', item]);
  _learnq.push(['trackViewedItem', {
    Title: item.Name,
    ItemId: item.ProductID,
    Categories: item.Categories,
    ImageUrl: item.ImageURL,
    Url: item.URL,
    Metadata: {
      Brand: item.Brand,
      Price: item.Price,
      CompareAtPrice: item.CompareAtPrice
    }
  }]);
</script>
<div class="yotpo yotpo-main-widget" data-product-id="{{ product.id }}" data-name="{{ product.title | escape }}" data-url="{{ shop.url }}{{ product.url }}" data-image-url="{{ product.featured_image | product_img_url: 'large' |replace: '?', '%3F' | replace: '&amp;','%26'}}" data-description="{{ product.description | escape }}"></div><div style="clear: both;"><div id="shopify-ali-review" product-id="{{ product.id }}"> {{ shop.metafields.review_collector.review_code }} </div></div>

 

 

 

product-template.liquid:

{%- include 'bold-product' with product, hide_action: 'break', output: 'none' -%}
<style>
.template-product #logo {
  display: none;
}
</style>

<div itemscope itemtype="http://schema.org/Product" id="ProductSection" data-section-id="{{ section.id }}" data-section-type="product-template" data-image-zoom-type="{{ section.settings.product_image_zoom_type }}" data-related-enabled="{{ section.settings.product_related_enable }}" data-show-extra-tab="{{ section.settings.show_extra_tab }}" data-extra-tab-content="{{ section.settings.extra_tab_content }}" data-enable-history-state="true">

  {% case section.settings.add_to_cart_width %}
    {% when 'small' %}
      {%- assign btn_class = 'btn' -%}
    {% when 'medium' %}
      {%- assign btn_class = 'btn btn--wide' -%}
    {% when 'large' %}
      {%- assign btn_class = 'btn btn--full' -%}
  {% endcase %}

  {% if section.settings.add_to_cart_width != 'small' %}
    <style>
      @media screen and (min-width: 769px){
        .single-option-selector {
          {% if  section.settings.add_to_cart_width == 'medium' %}
          min-width: 50%;
          {% else %}
          min-width: 100%;
          {% endif %}
        }
      }
    </style>
  {% endif %}

  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">

  <div class="section-header section-header--breadcrumb">
    {% include 'breadcrumb' %}
  </div>

  <div class="product-single">
    <div class="grid product-single__hero">
      <div class="grid__item post-large--one-half">

        {% if section.settings.product_thumbnails_position == 'below' or product.images.size < 2 %}

          <div class="product-single__photos">
            {% assign featured_image = bold_selected_or_first_available_variant.featured_image | default: product.featured_image %}

            {% for image in product.images %}
              {% capture img_id %}ProductImage-{{ image.id }}{% endcapture %}
              {% capture img_wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}
              {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
              {% include 'image-style' with image: image, small_style: false, width: 700, height: 1024, wrapper_id: img_wrapper_id, img_id: img_id %}

              <div id="{{ img_wrapper_id }}" class="product-single__image-wrapper supports-js{% unless featured_image == image %} hide{% endunless %}{% if section.settings.product_image_zoom_type == 'lightbox' %} zoom-lightbox{% endif %}" data-image-id="{{ image.id }}">
                <div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
                  <img id="{{ img_id }}"
                       class="product-single__image lazyload{% unless featured_image == image %} lazypreload{% endunless %}"
                       {% if featured_image == image %}src="{{ image | img_url: '300x300' }}"{% endif %}
                       data-src="{{ img_url }}"
                       data-widths="[180, 370, 540, 740, 900, 1080, 1296, 1512, 1728, 2048]"
                       data-aspectratio="{{ image.aspect_ratio }}"
                       data-sizes="auto"
                       {% if section.settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{{ image | img_url: '1024x1024', scale: 2 }}"{% endif %}
                       alt="{{ image.alt | escape }}">
                </div>
              </div>
            {% endfor %}

            <noscript>
              <img src="{{ featured_image | img_url: '1024x1024', scale: 2 }}" alt="{{ featured_image.alt | escape }}">
            </noscript>
          </div>

          {% if product.images.size > 1 %}

            <ul class="product-single__thumbnails grid-uniform" id="ProductThumbs">
              {% for image in product.images %}
                <li class="grid__item wide--one-quarter large--one-third medium-down--one-third">
                  <a data-image-id="{{ image.id }}" href="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumbnail">
                    <img src="{{ image.src | img_url: 'grande' }}" alt="{{ image.alt | escape }}">
                  </a>
                </li>
              {% endfor %}
            </ul>

          {% endif %}

        {% else %}

          <div class="grid">

            <div class="grid__item four-fifths product-single__photos" id="ProductPhoto">
              {% assign featured_image = bold_selected_or_first_available_variant.featured_image | default: product.featured_image %}

              {% for image in product.images %}
                {% capture img_id %}ProductImage-{{ image.id }}{% endcapture %}
                {% capture img_wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}
                {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
                {% include 'image-style' with image: image, small_style: false, width: 700, height: 1024, wrapper_id: img_wrapper_id, img_id: img_id %}

                <div id="{{ img_wrapper_id }}" class="product-single__image-wrapper supports-js{% unless featured_image == image %} hide{% endunless %}{% if section.settings.product_image_zoom_type == 'lightbox' %} zoom-lightbox{% endif %}" data-image-id="{{ image.id }}">
                  <div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
                    <img id="{{ img_id }}"
                         class="product-single__image lazyload{% unless featured_image == image %} lazypreload{% endunless %}"
                         {% if featured_image == image %}src="{{ image | img_url: '300x300' }}"{% endif %}
                         data-src="{{ img_url }}"
                         data-widths="[180, 370, 540, 740, 900, 1080, 1296, 1512, 1728, 2048]"
                         data-aspectratio="{{ image.aspect_ratio }}"
                         data-sizes="auto"
                         {% if section.settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{{ image | img_url: '1024x1024', scale: 2 }}"{% endif %}
                         alt="{{ image.alt | escape }}">
                  </div>
                </div>
              {% else %}
                <img src="{{ featured_image | img_url: '1024x1024', scale: 2 }}" alt="{{ featured_image.alt | escape }}">
              {% endfor %}

              <noscript>
                <img src="{{ featured_image | img_url: '1024x1024', scale: 2 }}" alt="{{ featured_image.alt | escape }}">
              </noscript>
            </div>

            <div class="grid__item one-fifth">

              <ul class="grid product-single__thumbnails" id="ProductThumbs">
                {% for image in product.images %}
                  <li class="grid__item">
                    <a data-image-id="{{ image.id }}" href="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumbnail">
                      <img src="{{ image.src | img_url: 'grande' }}" alt="{{ image.alt | escape }}">
                    </a>
                  </li>
                {% endfor %}
              </ul>

            </div>

          </div>

        {% endif %}

        {% if section.settings.product_image_zoom_type == 'lightbox' %}
        <ul class="gallery" class="hidden">
          {% for image in product.images %}
          <li data-image-id="{{ image.id }}" class="gallery__item" data-mfp-src="{{ image | img_url: '1024x1024', scale: 2 }}"></li>
          {% endfor %}
        </ul>
        {% endif %}

      </div>
      <div class="grid__item post-large--one-half">
        {% if section.settings.product_vendor_enable %}
          <span class="h3" itemprop="brand">{{ product.vendor }}</span>
        {% endif %}
        <h1 itemprop="name">{{ product.title }}</h1>
{% include 'rw-rating' %}
        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
          {% assign variant = bold_selected_or_first_available_variant %}
{%- include 'bold-variant' with variant, output: 'none' -%}

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

          <div class="product-single__prices">    
            <span id="PriceA11y" class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
            <span id="ProductPrice" class="product-single__price" itemprop="price" content="{{ bold_price | divided_by: 100.00 }}">
              {{ bold_price | money }}
            </span>

            {% if bold_compare_at_price > bold_price %}
              <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.product.sale_price' | t }}</span>
              <s id="ComparePrice" class="product-single__sale-price">
                {{ bold_compare_at_price_max | money }}
              </s>
            {% else %}
              <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.product.sale_price' | t }}</span>
              <s id="ComparePrice" class="product-single__sale-price hide">
                {{ bold_compare_at_price_max | money }}
              </s>
            {% endif %}
          </div>

          <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
            <select name="id" id="ProductSelect-{{ section.id }}" class="product-single__variants">
              {% for variant in product.variants %}
{%- include 'bold-variant' with variant, hide_action: 'skip' -%}
                {% if variant.available %}

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

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

            <div class="product-single__quantity{% unless section.settings.product_quantity_enable %} is-hidden{% endunless %}">
              <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
              <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
            </div>

            <button type="submit" name="add" id="AddToCart" class="{{ btn_class }}">
              <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
            </button>
          </form>

{%- unless bundle_loaded == 'true' -%}
{%- include 'shappify-bdl-load-bundle' -%}
{%- assign bundle_loaded = 'true' -%}
{%- endunless -%} 
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
            <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
            <select name="id" id="ProductSelect-{{ section.id }}" class="product-single__variants">
              {% for variant in product.variants %}
{%- include 'bold-variant' with variant, hide_action: 'skip' -%}
                {% if variant.available %}

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

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

            <div class="product-single__quantity{% unless section.settings.product_quantity_enable %} is-hidden{% endunless %}">
              <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
              <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
            </div>

            <button type="submit" name="add" id="AddToCart" class="{{ btn_class }}">
              <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
            </button>
          </form>
          {% unless section.settings.show_extra_tab == false or pages[section.settings.extra_tab_content] == empty %}
            <div class="tabs">
              <ul class="tab-switch__nav">
                <li>
                  <a href="#description" data-link="description" class="tab-switch__trigger h3">{{ 'products.product.description' | t }}</a>
                </li>
                <li>
                  <a href="#extra" data-link="extra" class="tab-switch__trigger h3">{{ pages[section.settings.extra_tab_content].title }}</a>
                </li>
              </ul>
              <div id="description" class="tab-switch__content" data-content="description">
                <div class="product-description rte" itemprop="description">
                  {% include 'custom-product-tabs' %}
                </div>
              </div>
              <div id="extra" class="tab-switch__content" data-content="extra">
                <div class="rte">
                  {{ pages[section.settings.extra_tab_content].content }}
                </div>
              </div>
            </div>
          {% else %}
            <div class="product-description rte" itemprop="description">
              {% include 'custom-product-tabs' %}
            </div>
          {% endunless %}

          {% if section.settings.social_sharing %}
            <hr class="hr--clear hr--small">
            <h2 class="h4">{{ 'products.general.share_title' | t }}</h2>
            {% include 'social-sharing' %}
          {% endif %}
        </div>

      </div>
    </div>
  </div>

            <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
            <select name="id" id="ProductSelect-{{ section.id }}" class="product-single__variants">
              {% for variant in product.variants %}
{%- include 'bold-variant' with variant, hide_action: 'skip' -%}
                {% if variant.available %}

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

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

            <div class="product-single__quantity{% unless section.settings.product_quantity_enable %} is-hidden{% endunless %}">
              <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
              <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
            </div>

            <button type="submit" name="add" id="AddToCart" class="{{ btn_class }}">
              <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
            </button>
          </form>
  
  {% if section.settings.product_related_enable %}
    {% include 'related-products' %}
  {% endif %}

</div>

{% unless product == empty %}
  <script type="application/json" id="ProductJson-{{ section.id }}">
    {%- include 'bold-product', output: 'json' -%}
  </script>
{% endunless %}

{% schema %}
  {
    "name": "Product pages",
    "settings": [
      {
        "type": "checkbox",
        "id": "product_vendor_enable",
        "label": "Show product vendor"
      },
      {
        "type": "checkbox",
        "id": "product_quantity_enable",
        "label": "Show quantity selector"
      },
      {
        "type": "select",
        "id": "product_image_zoom_type",
        "label": "Image zoom type",
        "options": [
          {
            "value": "lightbox",
            "label": "Lightbox"
          },
          {
            "value": "zoom-in",
            "label": "Zoom-in"
          },
          {
            "value": "",
            "label": "No zoom"
          }
        ]
      },
      {
        "type": "select",
        "id": "product_thumbnails_position",
        "label": "Product thumbnail position",
        "options": [
          {
            "value": "right",
            "label": "Right of main image"
          },
          {
            "value": "below",
            "label": "Below main image"
          }
        ]
      },
      {
        "type": "header",
        "content": "Description"
      },
      {
        "type": "checkbox",
        "id": "show_extra_tab",
        "label": "Show a tab next to your product description",
        "default": false
      },
      {
        "type": "page",
        "id": "extra_tab_content",
        "label": "Tab content",
        "info": "This page content will appear in the extra tab."
      },
      {
        "type": "checkbox",
        "id": "social_sharing",
        "label": "Enable product sharing"
      },
      {
        "type": "header",
        "content": "Related products"
      },
      {
        "type": "checkbox",
        "id": "product_related_enable",
        "label": "Enable related products"
      },
      {
        "type": "checkbox",
        "id": "vendor_enable",
        "label": "Show vendor"
      },
      {
        "type": "checkbox",
        "id": "show_sale_circle",
        "label": "Show sale circle"
      },
      {
        "type": "checkbox",
        "id": "show_sold_out_circle",
        "label": "Show sold out circle"
      },
      {
        "type": "checkbox",
        "id": "center_grid_link",
        "label": "Center text below product images"
      },
      {
        "type": "header",
        "content": "Product options form"
      },
      {
        "type": "select",
        "id": "add_to_cart_width",
        "label": "Variant picker and button size",
        "options": [
          {
            "value": "small",
            "label": "Small"
          },
          {
            "value": "medium",
            "label": "Medium"
          },
          {
            "value": "large",
            "label": "Large"
          }
        ]
      }
    ]
  }
{% endschema %}


 

 

0 Likes
Tourist
9 0 1

Anyone? quite an urgent error...

0 Likes
Highlighted
Tourist
9 0 1

Too bad noone on these forums helped, I've fixed it with some help now: there were 2 <select> parts in the code, which broke the product selection. One is removed and now it works again, hope it helps if anyone ever encounters this problem.

0 Likes
Highlighted
New Member
1 0 0

Hi Kas1, I have run into the exact same issue. Can you please pin-point what you changed in the code and where?

 

Thanks

0 Likes
Highlighted
New Member
1 0 0

My stores have started doing this also. Id love some help. - I changed the first variant to "." to try and get a gauge on how often it is happening and its a lot more prevalent than I originally thought.

0 Likes