We have a few items that we use Infinite Options for - previously we used SC Product Options, and this issue existed there too - in order to allow customers to add things like personalization to our products.
Unfortunately, for some of these items, the default Shopify variant selection drop down is stuck on the page. It just says "Default Title" and will not go away.
We had Shopify support assist, and they were able to remove the dropdown... but that resulted in no products with options being able to be added to the cart due to "missing parameters". I have now removed the code snippets Shopify support added and the add to cart feature is available again.
We are using Shopify Simple theme. I see this has been an issue that has been resolved for others in the forums, but because of our installed apps, our code does not look like the examples I've seen here so I've been unable to adjust. I know enough code to make myself dangerous, so I'm hoping I can find some assistance with this - and maybe gain some understanding of how the fix was implemented.
Shopify edited our product-theme.liquid file. It looks like this.
{%- include 'bold-ro' -%}
{%- include 'bold-product' with product, hide_action: 'break', output: 'none' -%}
<!-- /templates/product.liquid -->
<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-show-extra-tab="{{ section.settings.show_extra_tab }}" data-extra-tab-content="{{ section.settings.extra_tab_content }}" data-cart-enable-ajax="{{ settings.cart_enable_ajax }}" data-enable-history-state="true">
<meta itemprop="name" content="{{ product.title }}">
<!-- Start of Judge.me code --><div style='{{ jm_style }}' class='jdgm-widget jdgm-preview-badge' data-id='{{ product.id }}' data-auto-install='false'>{{ product.metafields.judgeme.badge }}</div><!-- End of Judge.me code -->
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">
{% comment %}
Get first variant in stock, or deep linked one
{% endcomment %}
{% assign current_variant = bold_selected_or_first_available_variant %}
{%- include 'bold-variant' with current_variant, output: 'none' -%}
{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
<div class="grid product-single">
<div class="grid__item medium-up--one-half">
{% for image in product.images %}
{% capture img_id %}ProductImage-{{ image.id }}{% endcapture %}
{% capture wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}
{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% include 'image-style' with image: image, width: 720, height: 600, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}
<div id="{{ wrapper_id }}" class="product-single__featured-image-wrapper supports-js{% unless featured_image == image %} hidden{% endunless %}" data-image-id="{{ image.id }}">
<div class="product-single__photos" data-image-id="{{ image.id }}" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
<img id="{{ img_id }}"
class="product-single__photo lazyload{% unless featured_image == image %} lazypreload{% endunless %}{% if section.settings.product_image_zoom_type == 'lightbox' %} lightbox{% endif %}"
{% if section.settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{{ image | img_url: '1024x1024' }}"{% endif %}
src="{{ image | img_url: '200x200' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
</div>
{% if bold_compare_at_price_max > bold_price %}
<span class="badge badge--sale"><span>{{ 'products.product.on_sale' | t }}</span></span>
{% endif %}
</div>
{% endfor %}
<noscript>
<img src="{{ featured_image | img_url: 'grande' }}" alt="{{ featured_image.alt | escape }}">
</noscript>
{% if product.images.size > 1 %}
<ul class="product-single__thumbnails grid grid--uniform" id="ProductThumbs">
{% case product.images.size %}
{% when 2 %}
{% assign thumbnail_width = 'small--one-half medium-up--push-one-sixth medium-up--one-third' %}
{% when 4 %}
{% assign thumbnail_width = 'small--one-half medium-up--one-quarter' %}
{% else %}
{% assign thumbnail_width = 'small--one-third medium-up--one-third' %}
{% endcase %}
{% for image in product.images %}
<li class="grid__item {{ thumbnail_width }}">
<a href="{{ image.src | img_url: 'grande' }}" class="product-single__thumbnail" data-image-id="{{ image.id }}">
<img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% if section.settings.product_image_zoom_type == 'lightbox' %}
<ul class="gallery hidden">
{% for image in product.images %}
<li data-image-id="{{ image.id }}" class="gallery__item" data-mfp-src="{{ image | img_url: '2048x2048' }}"></li>
{% endfor %}
</ul>
{% endif %}
</div>
<div class="grid__item medium-up--one-half{% if product.images.size == 0%} medium-up--push-one-half{% endif %}">
<div class="product-single__meta small--text-center">
<h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>
{% if section.settings.vendor_show %}
<p class="product-single__vendor" itemprop="brand">{{ product.vendor }}</p>
{% endif %}
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<link itemprop="availability" href="http://schema.org/{% if current_variant.available %}InStock{% else %}OutOfStock{% endif %}">
<p class="product-single__prices">
{% if bold_compare_at_price_max > bold_price %}
<span id="ComparePriceA11y" class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
{% else %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
{% endif %}
<span id="ProductPrice" class="product-single__price" itemprop="price" content="{{ bold_variant_price | divided_by: 100.00 }}">
{{ bold_variant_price | money }}
</span>
{% if bold_compare_at_price_max > bold_price %}
<span id="PriceA11y" class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s class="product-single__price--compare" id="ComparePrice">
{{ current_variant.compare_at_price | money }}
</s>
{% endif %}
</p>
{% form 'product', product, class:'product-form' %}
<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 id="infiniteoptions-container"></div>
{% if section.settings.product_quantity_enable %}
<div class="product-single__quantity">
<label for="Quantity">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity" name="quantity" value="1" min="1">
</div>
{% endif %}
{{ bold_ro_widget }}
<div class="bold_options" data-product-id="{{ product.id }}"></div>
<div class="product-single__cart-submit-wrapper{% if section.settings.enable_payment_button %} product-single__shopify-payment-btn{% endif %}{% if section.settings.add_to_cart_width == 'full_width' %} product-form--full{% endif %} {% if product.selected_or_first_available_variant.metafields.bold_rp.rp_group_id %} bold-hidden {% endif %}">
<button type="submit" name="add" id="AddToCart"class="addtocart btn product-single__cart-submit{% if section.settings.add_to_cart_width == 'full_width' %} btn--full{% endif %}{% if section.settings.enable_payment_button %} shopify-payment-btn btn--secondary{% endif %}">
<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
<!-- bold-ro-liquid --><div class="bold_add_to_orders" style="display: inline-block;"></div><!-- bold-ro-liquid -->
{% unless current_variant.metafields.bold_rp.rp_group_id %}
{% if section.settings.enable_payment_button and current_variant.available %}
{{ form | payment_button }}
{% endif %}
{% endunless %}
</div>
{% endform %}
<!-- MultiVariants app code start [ https://apps.shopify.com/multivariants ] -->
<div id="MULTIVARIANTS_APP_SECTION_PLACE"></div><script type="text/javascript" src="https://sapp.multivariants.com/gate/out/sys/js/init.js?shop=creating-the-difference.myshopify.com&product_id={{product.id}}&locale={{shop.locale}}"></script>
<!-- MultiVariants App code end -->
</div>
{% if section.settings.product_description_position == 'right' %}
{%- assign position = 'right' -%}
{% include 'product-description' %}
{% endif %}
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
{% if section.settings.social_sharing_products %}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
{% endif %}
</div>
</div>
</div>
{% if section.settings.product_description_position == 'below' %}
{%- assign position = 'below' -%}
{% include 'product-description' %}
{% endif %}
{% include 'related-products' %}
</div>
{% unless product == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{%- include 'bold-product', output: 'json' -%}
</script>
{% endunless %}
<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.
window.productStrings = {
addToCart: {{ 'products.product.add_to_cart' | t | json }},
soldOut: {{ 'products.product.sold_out' | t | json }},
unavailable: {{ 'products.product.unavailable' | t | json }}
}
</script>
{% if product.selected_or_first_available_variant.metafields.bold_rp.rp_group_id %} <script>
BOLD.common.eventEmitter.on("BOLD_RECURRING_ORDERS_widget_loaded",function(response){
var hiddenButton = response.data.form.getElementsByClassName("bold-hidden")[0];
if(hiddenButton)hiddenButton.classList.remove("bold-hidden");
})
</script>
{% endif %}
{% schema %}
{
"name": "Product pages",
"settings": [
{
"type": "checkbox",
"id": "product_quantity_enable",
"label": "Show quantity selector"
},
{
"type": "checkbox",
"id": "vendor_show",
"label": "Show product vendor"
},
{
"type": "checkbox",
"id": "social_sharing_products",
"label": "Enable sharing for products",
"default": true
},
{
"type": "header",
"content": "Description"
},
{
"type": "select",
"id": "product_description_position",
"label": "Position",
"default": "below",
"options": [
{
"value": "right",
"label": "Right of images"
},
{
"value": "below",
"label": "Below images"
}
]
},
{
"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": "header",
"content": "Featured image"
},
{
"type": "select",
"id": "product_image_zoom_type",
"label": "Zoom type",
"options": [
{
"value": "lightbox",
"label": "Lightbox"
},
{
"value": "zoom-in",
"label": "Zoom-in"
},
{
"value": "",
"label": "No zoom"
}
]
},
{
"type": "header",
"content": "Add to cart button"
},
{
"type": "checkbox",
"id": "enable_payment_button",
"label": "Show dynamic checkout button",
"info": "Lets customers check out directly using a familiar payment method. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"default": false
},
{
"type": "select",
"id": "add_to_cart_width",
"label": "Button size",
"options": [
{
"value": "regular",
"label": "Regular"
},
{
"value": "full_width",
"label": "Full width"
}
]
}
]
}
{% endschema %}
This is the update they made - just {% comment %} and {% endcomment %} - which did remove the default title dropdown, but broke the cart. I removed both snippets and the cart works again, but of course the dropdown is back.
{% form 'product', product, class:'product-form' %}
{% comment %} <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>
{% endcomment %}
