Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Using the classic theme we noticed that our variant options were not being displayed on the product pages.
<select name="id" id="productSelect" class="product-single__variants" style="display: none;">
<option selected="selected" data-sku="" value="42581103607960">Camoflage - $19.99 USD</option>
<option data-sku="" value="42581103640728">Black - $19.99 USD</option>
</select>
The display:none; is not being generated in the html, instead it is being added by this javascript file: https://cdn.shopify.com/shopifycloud/shopify/assets/themes_support/option_selection-9f517843f664ad32...
Shopify.OptionSelectors.prototype.replaceSelector = function (t) {
var e = document.getElementById(t),
o = e.parentNode;
Shopify.each(this.buildSelectors(), function (t) {
o.insertBefore(t, e)
}),
e.style.display = 'none',
this.variantIdField = e
},
This seems to be a file that Shopify is loading and then it is rewriting all the option selectors in the page to be hidden. How can we stop this from happening?
Does it just happen on this theme?
Have you made any changes to the code in the past?
Third, is your theme updated?
Yes it works fine with other themes.
Yes but only minor changes like text in the footer.
There is no update and iirc the theme used to be the default theme provided by shopify? It's been so long I don't recall and it's not in the theme shop.
option_selection-9f517843f664ad329c689020fb1e45d03cac979f64b9eb1651ea32858b0ff452.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
at Shopify.Product.getVariantById (option_selection-9f517843f664ad329c689020fb1e45d03cac979f64b9eb1651ea32858b0ff452.js:1:2264)
at Shopify.OptionSelectors.selectVariant (option_selection-9f517843f664ad329c689020fb1e45d03cac979f64b9eb1651ea32858b0ff452.js:1:4977)
at Shopify.OptionSelectors.selectVariantFromDropdown (option_selection-9f517843f664ad329c689020fb1e45d03cac979f64b9eb1651ea32858b0ff452.js:1:4740)
at Shopify.OptionSelectors.initDropdown (option_selection-9f517843f664ad329c689020fb1e45d03cac979f64b9eb1651ea32858b0ff452.js:1:3838)
at new Shopify.OptionSelectors (option_selection-9f517843f664ad329c689020fb1e45d03cac979f64b9eb1651ea32858b0ff452.js:1:3640)
at HTMLDocument.<anonymous> (akz-g6-bt-earphones:1414:5)
at j (jquery.min.js:2:27136)
at Object.fireWith [as resolveWith] (jquery.min.js:2:27949)
at Function.ready (jquery.min.js:2:29783)
at HTMLDocument.K (jquery.min.js:2:30128)
I noticed this error in the console that the javascript doesn't seem to be able to read the length of the variant object? I also found an older copy of the theme that doesn't have this problem but the code for product.liquid is identical.
Here's an example page https://smartwholesale.net/products/akz-g6-bt-earphones
In Canada, payment processors, like those that provide payment processing services t...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025