Show/Hide Text/Divs/Text Box on Variant Selection in shopify

 

In this tutorial we are going to learn about how to toggle divs,paragraph or text box when we select a varaint.

Basic idea behind this like switch image when we select a variant.

Step 1.

Each product variant have an ID assigned so we are going to find variant Id

     1.1 Go to product page

     1.2 View/Preview

     1.3 Select Variant and look into url. End of the url it is look like                           ?variant=24290057091

so 24290057091 is your variant ID

 Step 2.

Go to your product page in shopify admin panel

Step 3. 

Switch into HTML Mode Paste this Gist and change description according to you also change Variant ID according to your products Variant   

Step 4.

Now we are going to edit our product.liquid file

Go to Online store and Click on Edit HTML/CSS into theme and open product.liquid file under Templates

Step 5.

Find

var selectCallback = function(variant, selector) {

and put this code


 $('.description').css('display', 'none');
 $('#' + variant.id).css('display', 'block');

After this line of code


var selectCallback = function(variant, selector) {


Try Shopify for free, and explore all the tools and services you need to start, run, and grow your business.