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
Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024The Hydrogen Visual Editor is now available to merchants in Shopify Editions | Summer '...
By JasonH Sep 2, 2024Note: Customizing your CSS requires some familiarity with CSS and HTML. Before you cust...
By JasonH Aug 12, 2024