Variant descriptions in Venture

New Member
3 0 0

I have a couple of products that have a large amount of variants, which each variant requiring a small write up. (In my situation it will be a better solution to keep these variants together under the same base product as apposed to creating a new separate products).

 

From my under standing I have get my products variant ID, which I have done by adding .xml to the end of my products admin link. From that point my product description looks like this: 

 

<p class="description" id="########">Description for var 1</p>
<p class="description" id="########" style="display: none;">Description for var 2</p>

And so on...

 

Up to this point I was following this tutorial: https://community.shopify.com/c/Shopify-Design/Demo-change-description-in-product-with-different-var...

 

Having this done in the description you need to edit the product.liquid (or wherever your variant change is) and add this:

var selectCallback = function(variant, selector) {

$
('.description').css('display', 'none');
$
('#' + variant.id).css('display', 'block'); // rest of the Timber code
}

I am using the Venture Theme, and for the life of me I cannot figure out:

a) where to put the code above in venture?

           - does venture use the selectCallback function?

b) if this method is applicable to use in 2020 with Shopify?

 

Any information would be greatly appreciated, I've yet to find a straight forward answer to this question for the venture theme, thanks.

0 Likes
Shopify Partner
424 79 90

Hello

The solution you shared was posted in 2015 for Timber theme and as you know every theme have different structure, means it gives you idea not exact solution.
btw to achieve this there are many ways:
1) Instead of 'selectCallback ' you can write your own change function to get variant 

e,g

$('selectoreclss-or-id').change(function() {
// Your code here
    $('.description').css('display', 'none');
    $('#' + variant.id).css('display', 'block');
});

2) If you are comfortable with editing theme js file, edit theme.js and search for this function 

 

_onSelectChange: function() {
var variant = this._getVariantFromOptions();

and just next of this line add your code 

like this

_onSelectChange: function() {
      var variant = this._getVariantFromOptions();
      if(variant){
        $('.description').css('display', 'none');
		$('#' + variant.id).css('display', 'block');
      }

Note: take backup of theme.js before editing and don't break anything in it otherwise most of theme features will stop working

Thanks

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes