Creating Text that Changes depending on the Variant Selected.

New Member
8 0 0

I've searched far and wide, but I can't find a solution for what I want.

I sell products that come in both digital and physical versions. Invariably, I have a customer who does not understand why they didn't receive a physical item when they've selected a digital variant, regardless of how clearly I name the variants.

So, what I want is notification text that appears when they've selected the digital variant and disappears when they don't. Currently, using this code:

{% if current_variant.title == "Digital Chart" %} 
              <p style="color:#ff00df">You will receive a link to download a PDF of this chart</p>
              {% endif %}

I can make the text appear if "Digital Chart" is the first item on the variants list, but it does not disappear when the customer changes their selection. It also does not work if "Digital Chart" is not the first variant. Ideally, I want this to be the look when "Digital Chart" is selected:

And this to be the result when someone clicks another option:

Quick notes:

  • I'm using Brooklyn because I like the look of the buttons. I really want to learn how to do this without giving that up.
  • The above is created by switching between templates
  • I have tried putting information in the products' description. People don't necessarily look all the way to the bottom. I thought a solution above the 'Add to Cart' button would be best
0 Likes
Shopify Expert
2686 67 681

Hi FF!

This can (and should) be done with javascript. The same javascript which updates the price depending on the variant chosen, can be modified to show additional text. You need to upate your liquid first, by slightly changing your text, so that it is always there, only hidden for non-digital products

<p id="digital_text" 
   style="color:#ff00df;
   {% if current_variant.title != "Digital Chart" %}display:none;{% endif %}">
 You will receive a link to download a PDF of this chart
</p>

Then, open your theme.js.liquid Asset, find function productPage (arond line 2014 in my theme) and in this function, after the lines

      if (variant) {
        // Select a valid variant if available

insert this code:

if( variant.title === "Digital Chart") {
  $('#digital_text').fadeIn();
} else {
  $('#digital_text').fadeOut();
}

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
New Member
8 0 0

I tried that coding, and it didn't work at all. Now the text is always hidden.

0 Likes
Shopify Expert
2686 67 681

Hi FF, 

the code is 100% working, I just tested it in your shop (using Chrome Developer tools).

Unfortunately, since I can not see it in your shop, I can not tell where you've made a mistake integrating it in your theme.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
New Member
8 0 0

Oh Tim, aren't you a peach?

I just looked again and realized there was a lot more code than I'd originally thought. I did go and add the rest. 

Here's the problem, when I add the <p> code above exactly as you have it, it appears the {%endif%} tag isn't working as expected. Here's a picture to show what I mean:

I realized after I posted this picture that you had {$endif%} instead of {%endif%} and it works and I could kiss you. Thank you, Tim!

0 Likes
Shopify Expert
2686 67 681

Oh I am so sorry, I mistyped it -- when I tested the code myself i did remove this liquid test altogether.

Will change the code above for future generations to reuse :)

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
New Member
2 0 0

Hi,

Thanks for this - it's exactly what I've been looking for! Where would I add the first bit of code that changes the liquid? Would it be somewhere in product.liquid? I'm trying to add this to the debut theme.

Thanks

0 Likes