Variants not showing up

Solved
Highlighted
New Member
1 0 0

Hi! 

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

0 Likes
Highlighted
New Member
1 0 1

Hi Bo,

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

Can you help?

1 Like
Highlighted
Shopify Staff
Shopify Staff
1108 108 275

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 - Social Care @ Shopify


Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
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!

0 Likes
Highlighted
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

0 Likes
Highlighted
Tourist
8 0 0

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;
})();

0 Likes