Demo: change description in product with different variants

Highlighted
Shopify Partner
1366 24 246

 

I've been bumping myself with this issue and I see some people on the forums asking for this. This following solution is not elegant but will work. You can take a look at http://test-5791.myshopify.com/products/example-t-shirt

This is made on Timber theme but will work on all themes.

Each product variant have an ID assigned. You can see the available variants and IDs by looking at the product object:

console.log({{ product | json }}) 

When you edit the product description, go into "Show HTML" mode. You need to create some panels. Each panel should contain the ID and description of that variant:

<p class="description" id="7397573253">Description for variant 1</p>
<p class="description" id="7397573317" style="display: none;">Description for variant 2</p>
<p class="description" id="7397573381" style="display: none;">Description for variant 3</p>

Where:

  • id is the variant ID
  • style="display: none" tells the browser not to show that description
  • class="description" its a hook we need to use for the callback

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

// selectCallback is the callback name in Timber
var selectCallback = function(variant, selector) {

   // Simply toggle on/off the panel according to the variant selected
    $('.description').css('display', 'none');
    $('#' + variant.id).css('display', 'block');
// rest of the Timber code
}

This is the basic, better things can be done. 

Hope it helps

https://sections.design tips, tricks & Shopify sections
5 Likes
Highlighted
Not applicable
1394 0 0

Thank you very much Mircea Piturca

It help me a lot with my store.

 

0 Likes
Highlighted
Shopify Partner
1366 24 246

Glad I could help :)

https://sections.design tips, tricks & Shopify sections
1 Like
Highlighted
Tourist
4 0 3

Hey Mircea,

Thanks for the awesome code. It works perfectly on your website, but for some reason I'm not able to get it working on my site. Do you think you could give me some pointers?

Here's my product page: http://www.getsupply.com/products/copy-of-the-single-edge-razor

I pasted the following code at the top of my product.liquid:

<script>
// selectCallback is the callback name in Timber
var selectCallback = function(variant, selector) {

   // Simply toggle on/off the panel according to the variant selected
    $('.description').css('display', 'none');
    $('#' + variant.id).css('display', 'block');
// rest of the Timber code
}
  </script>

And I used this html in my production description:

<p class="description" id="9662098501">Description for variant 1</p>
<p class="description" id="9662071045" style="display: none;">Description for variant 2</p>

No luck! I've messed around with it for hours. Any thoughts for me?

Thanks so much!

 

 

0 Likes
Highlighted
Shopify Partner
1366 24 246

Looked to the  page, Everything is set up OK. You are using swatches, I am not how they are implemented but looks that when you select then the selectCallback function is not triggered. The swatch may be using different function to trigger product select. 

I would look on how the swatches work, they must have some similar callback. You need to bind into that.

Hope it helps. Good luck

https://sections.design tips, tricks & Shopify sections
0 Likes
Highlighted
Tourist
4 0 3

Mircea,

Thanks for the help. I'll look into it - It's a bit over my head, but here's hoping!

Thanks again!

0 Likes
Highlighted
Shopify Partner
1366 24 246

Your swatches do not trigger that callback.

You need to add a change event to '.single-option-selector' element. In Liquid set up a data attribute on each '.single-option-selector' option element containing the variant. Read it on change.

There are just few changes to be done, but are simple things for a developer with some Shopify knowledge.

Make sure you make a backup first, you don't wan to break this.

https://sections.design tips, tricks & Shopify sections
0 Likes
Highlighted
New Member
2 0 0

I've tried implementing this and it worked great. But then I wanted to add specs to my variants and tried to put the class within a table to be updated, the variants no longer loaded the description when the page first loads. I have to select a different variant before the descriptions start to change. Would anyone beable to help me diagnose this issue. This is for the Retina Theme.  I've been working on this for too many days...

Here is the code in my product.liquid:

<div class="description" itemprop="description">
            <ul class="tabs">
              <li><a class="active" href="#tab1">Specifications</a></li>
              <li><a href="#tab2">Description</a></li>
            </ul>
            <ul class="tabs-content">
              <li id="tab1" class="active">
                    <ul>
                      {{ product.description | split: '<!-- split -->' | first }}
                    </ul>
              </li>
			  <li id="tab2">
                <p>
  				  {{ product.metafields.description.description }}
                </p>
              </li>
            </ul>
</div>

The javascript code in my app.js.liquid:

selectCallback = function(variant, selector) {
      $('.desc').css('display', 'none');
      $('#' + variant.id).css('display', 'block');

<-------other selectcallback functions-------->
  };

HTML in the product description:

<table class="desc" id="12501311044" width="100%">
<tbody>
<tr class="tableizer-firstrow">
<th>Model#:</th>
<th>1 x GU24 13w CFL</th>
</tr>
<tr>
<td>Height</td>
<td>15.75''</td>
</tr>
</tbody>
</table>
<table class="desc" id="12501311108" style="display: none;" width="100%">
<tbody>
<tr class="tableizer-firstrow">
<th>Model#:</th>
<th>1 x GU24 18w CFL</th>
</tr>
<tr>
<td>Height</td>
<td>15.75''</td>
</tr>
</tr>
</tbody>
</table>

 

0 Likes
Highlighted
New Member
2 0 0

What would be the more eloquent way of doing this with the use of metafields?

0 Likes
Highlighted
Tourist
4 0 3

Hey Erwin,

I followed micrea's description exactly in his post above, except this is the javascript I used:

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

And this is the html:

<p class="variant-description" id="7397573253">Description for variant 1</p>

<p class="variant-description" id="7397573317" style="display: none;">Description for variant 2</p>

It worked like a champ. I had to hire the Out of The Sandbox folks to do a "theme tweak" - and they took care of it very quickly for me. I would reccomend doing the same. They have fantastic customer service.  It's worth the $75.

I looked into metafields, but it seemed too complicated given what I was trying to accomplish.

Hope that helps. 

Patrick

0 Likes