FROM CACHE - en_header

Variants not showing up

Solved
Andrew2018
Tourist
7 0 6

Hi, I'm using the Supply Theme.  I have four variants on most of my products, but none of them are showing up.  The price of the first variant appears under the product title. I went through and checked the variants with inventory in stock and without, and it's happening on all of them.  What am I missing?

Accepted Solution (1)

Accepted Solutions
Bo
Shopify Staff (Retired)
Shopify Staff (Retired)
1793 196 461

This is an accepted solution.

Hey there, @Andrew2018 

 

Bo here from Shopify Support! 

 

That is a really interesting issue, in my experience, this generally happens when the javascript that controls the variant function has been deleted. Can you please do the following: 

  • Go to Online Store > Current Theme > Actions > Edit Code. 
  • Go to the Assets Folder > theme.js.liquid. 
  • At the bottom of this file paste the following code:
$(document).ready(function() {
  var sections = new theme.Sections();
  sections.register('collections-list-template', theme.FeaturedCollections);
  sections.register('collection-row-section', theme.CollectionRows);
  sections.register('collection-template', theme.Collection);
  sections.register('header-section', theme.HeaderSection);
  sections.register('list-collections-template', theme.ListCollections);
  sections.register('map-section', theme.Maps);
  sections.register('product-template', theme.Product);
  sections.register('slideshow-section', theme.SlideshowSection);
});
  • Click Save.

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

 

All the Best,

Bo

Bo | Retired Staff Member

View solution in original post

Replies 33 (33)
Bo
Shopify Staff (Retired)
Shopify Staff (Retired)
1793 196 461

This is an accepted solution.

Hey there, @Andrew2018 

 

Bo here from Shopify Support! 

 

That is a really interesting issue, in my experience, this generally happens when the javascript that controls the variant function has been deleted. Can you please do the following: 

  • Go to Online Store > Current Theme > Actions > Edit Code. 
  • Go to the Assets Folder > theme.js.liquid. 
  • At the bottom of this file paste the following code:
$(document).ready(function() {
  var sections = new theme.Sections();
  sections.register('collections-list-template', theme.FeaturedCollections);
  sections.register('collection-row-section', theme.CollectionRows);
  sections.register('collection-template', theme.Collection);
  sections.register('header-section', theme.HeaderSection);
  sections.register('list-collections-template', theme.ListCollections);
  sections.register('map-section', theme.Maps);
  sections.register('product-template', theme.Product);
  sections.register('slideshow-section', theme.SlideshowSection);
});
  • Click Save.

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

 

All the Best,

Bo

Bo | Retired Staff Member

Andrew2018
Tourist
7 0 6

Wow, that worked a treat.  Copied/pasted the theme.js.liquid code into a document first (just in case), but was pleased that your solution was so effective.  Thanks!

pmartensen
Excursionist
28 2 4

This didn't work for me.  I can't find the "theme.js.liquid" file.  I can only find the "theme.js" file.  I pasted the code into that and it didn't change anything on the site.  Where should I see the variants show up?  On the shopping cart page?  I'm using the Debut theme.

Bo
Shopify Staff (Retired)
Shopify Staff (Retired)
1793 196 461

Hey there, @pmartensen 

 

If you are using the Debut theme, this code will not work for you as it is written specifically for the Supply theme. Are you experiencing the same issue mentioned above on your theme? 

 

All the best,

Bo

Bo | Retired Staff Member

pmartensen
Excursionist
28 2 4
Bo,

Sorry, I should have come back to this. I was not setting up the variants
properly, which is why they didn't show up. I finally got them to work.
A slightly different question though. I have one product that I sell in a
5 pack, 10 pack, and 20 pack. Those are the variants I created. When I
add inventory, it is for each variant, but that isn't quite correct. Is
there a way to indicate that I have 100 pieces, and when someone buys a 5
pack that gets reduced to 95 and so on?

Thanks,

Peter
Bo
Shopify Staff (Retired)
Shopify Staff (Retired)
1793 196 461

Great question! While this is not a native feature of the platform, there are apps that can achieve this for you. One example would be Bulk Order which is only $2.99 in the app store. 

 

All the Best,

Bo

Bo | Retired Staff Member

Laina1
New Member
1 0 0

Hi Bo,

 

I'm having the exact same problem with the minimal theme, is there a code to fix it on that theme?

 

Thanks,

 

Laina

Relie
New Member
2 0 0

Is there a code for the fashionopolism theme? When I add additional variants such as color and size (I already have length as variant) to my products  it doesn't show anything and all variants disappear from product page. Is there a way to fix this?

Tyreguy
New Member
1 0 2

Hi Bo,

Can you please tell me what I require to fix the same problem using the "Debut" theme?

Thanks.

melenga
New Member
1 0 0

Hi! 

I have the problem, I have the minimal theme, How can I fix this problem?

KatrinaP
New Member
1 0 1

Hi Bo,

I am using the Debut theme and variants are not showing up?

Can you help?

Bo
Shopify Staff (Retired)
Shopify Staff (Retired)
1793 196 461

Hey there, @KatrinaP and @melenga 

 

I would recommend reaching out to our support team so they can take a look at your individual themes to see what the errors may be. 

 

All the Best,

Bo

Bo | Retired Staff Member

manosantastore
New Member
1 0 0

Hi, I´m also new on Shopify. My store was working fine for the past three months until I installed apps like Kit and Facebook pixel, now my product variants are not showing up anymore. I talked to a shopify and Wetheme technician but they only told me it was a problem with  the jquery code of some third party app.   They told me to check the apps so I actually deleted all the apps I had just installed and the "assets/custom.js" section on the code (a Wetheme guy told me I could do that) Nothing work...I think now it was gotten worse I can´t even see my store anymore. Can someone help me? I have no clue where to start. Thanks!

CharitoHalabi
New Member
1 0 0

Hello i am using booster theme and HAVING SAME problem but it didnt work for me the solution you have provided

Sudhirguptaapp
Tourist
8 0 1

try this Js code, theme.js file code for variants

 


/**
* Variant Selection scripts
* ------------------------------------------------------------------------------
*
* Handles change events from the variant inputs in any `cart/add` forms that may
* exist. Also updates the master select and triggers updates when the variants
* price or image changes.
*
* @namespace variants
*/

slate.Variants = (function() {
/**
* Variant constructor
*
* @param {object} options - Settings from `product.js`
*/
function Variants(options) {
this.$container = options.$container;
this.product = options.product;
this.singleOptionSelector = options.singleOptionSelector;
this.originalSelectorId = options.originalSelectorId;
this.enableHistoryState = options.enableHistoryState;
this.currentVariant = this._getVariantFromOptions();

$(this.singleOptionSelector, this.$container).on(
'change',
this._onSelectChange.bind(this)
);
}

Variants.prototype = _.assignIn({}, Variants.prototype, {
/**
* Get the currently selected options from add-to-cart form. Works with all
* form input elements.
*
* @Return {array} options - Values of currently selected variants
*/
_getCurrentOptions: function() {
var currentOptions = _.map(
$(this.singleOptionSelector, this.$container),
function(element) {
var $element = $(element);
var type = $element.attr('type');
var currentOption = {};

if (type === 'radio' || type === 'checkbox') {
if ($element[0].checked) {
currentOption.value = $element.val();
currentOption.index = $element.data('index');

return currentOption;
} else {
return false;
}
} else {
currentOption.value = $element.val();
currentOption.index = $element.data('index');

return currentOption;
}
}
);

// remove any unchecked input values if using radio buttons or checkboxes
currentOptions = _.compact(currentOptions);

return currentOptions;
},

/**
* Find variant based on selected values.
*
* @param {array} selectedValues - Values of variant inputs
* @Return {object || undefined} found - Variant object from product.variants
*/
_getVariantFromOptions: function() {
var selectedValues = this._getCurrentOptions();
var variants = this.product.variants;

var found = _.find(variants, function(variant) {
return selectedValues.every(function(values) {
return _.isEqual(variant[values.index], values.value);
});
});

return found;
},

/**
* Event handler for when a variant input changes.
*/
_onSelectChange: function() {
var variant = this._getVariantFromOptions();
console.log("data change")
this.$container.trigger({
type: 'variantChange',
variant: variant
});

if (!variant) {
return;
}

this._updateMasterSelect(variant);
this._updateImages(variant);
this._updatePrice(variant);
this._updateSKU(variant);
this.currentVariant = variant;

if (this.enableHistoryState) {
this._updateHistoryState(variant);
}
},

/**
* Trigger event when variant image changes
*
* @param {object} variant - Currently selected variant
* @Return {event} variantImageChange
*/
_updateImages: function(variant) {
var variantImage = variant.featured_image || {};
var currentVariantImage = this.currentVariant.featured_image || {};

if (
!variant.featured_image ||
variantImage.src=== currentVariantImage.src
) {
return;
}

this.$container.trigger({
type: 'variantImageChange',
variant: variant
});
},

/**
* Trigger event when variant price changes.
*
* @param {object} variant - Currently selected variant
* @Return {event} variantPriceChange
*/
_updatePrice: function(variant) {
if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
}

this.$container.trigger({
type: 'variantPriceChange',
variant: variant
});
},

/**
* Trigger event when variant sku changes.
*
* @param {object} variant - Currently selected variant
* @Return {event} variantSKUChange
*/
_updateSKU: function(variant) {
if (variant.sku === this.currentVariant.sku) {
return;
}

this.$container.trigger({
type: 'variantSKUChange',
variant: variant
});
},

/**
* Update history state for product deeplinking
*
* @param {variant} variant - Currently selected variant
* @Return {k} [description]
*/
_updateHistoryState: function(variant) {
if (!history.replaceState || !variant) {
return;
}

var newurl =
window.location.protocol +
'//' +
window.location.host +
window.location.pathname +
'?variant=' +
variant.id;
window.history.replaceState({ path: newurl }, '', newurl);
},

/**
* Update hidden master select of variant change
*
* @param {variant} variant - Currently selected variant
*/
_updateMasterSelect: function(variant) {
$(this.originalSelectorId, this.$container).val(variant.id);
}
});

return Variants;
})();

fashiongearhub
New Member
2 0 0

Hi, its the same issue i had with andrew. The variants selections just automatically disappears and i tried to this resolution you gave but it did not work. 

kokoruz
New Member
2 0 0

I discovered that having these extra spaces were the cause of the variants going away.

Go through you code and closed them up and the variants will come back

 

soldOut: { { 'products.product.sold_out' | t | json } }

Should be:

soldOut: {{ 'products.product.sold_out' | t | json }},

Nathalie14
New Member
1 0 0

There is no file theme.js.liquid in the assets of my theme (minimal). There is only a theme.js

raibuttigieg
New Member
1 0 0

Hi Bo

 

I am having issues with my variants too.  I am not using debutify but another theme called Bachas V2.5.

 

Are you able to assist me with this?

Thanks