New Shopify Certification now available: Liquid Storefronts for Theme Developers

Javascript is hiding variant selector on product pages

3 0 0

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>


The display:none; is not being generated in the html, instead it is being added by this javascript file:



Shopify.OptionSelectors.prototype.replaceSelector = function (t) {
  var e = document.getElementById(t),
  o = e.parentNode;
  Shopify.each(this.buildSelectors(), function (t) {
    o.insertBefore(t, e)
  }), = '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?

Replies 3 (3)
Shopify Partner
803 32 62

Does it just happen on this theme?


Have you made any changes to the code in the past?


Third, is your theme updated?

3 0 0

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.

3 0 0
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