Creating Text that Changes depending on the Variant Selected.

Highlighted
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
Highlighted
Shopify Expert
2684 67 794

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!
I am away till Feb-15.
0 Likes
Highlighted
New Member
8 0 0

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

0 Likes
Highlighted
Shopify Expert
2684 67 794

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!
I am away till Feb-15.
0 Likes
Highlighted
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
Highlighted
Shopify Expert
2684 67 794

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!
I am away till Feb-15.
0 Likes
Highlighted
New Member
2 0 1

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
Highlighted
Tourist
4 0 1

Hey there, 

 

Is it possible to use this to have a text box appear that the customer then has to fill out? I have line item properties with text boxes and would really like them to be triggered if a variant is chosen and I stubbled upon your code for this, and thought maybe I could alter it to have it trigger the line item properties rather than for the digital text to pop up... Would you be able to help me out with this?

1 Like
Highlighted
Tourist
7 1 2

I'm working on the same issue (in Debut). Did you happen to get it to work?

I can get the required check box / add to cart requirement to work for all variants.
However, I just want it to show up for the select variants. 

Desired:
If variant contains the word gallon
then show check box that's required for add to cart. 

Any recommended reading or code would be helpful to achieve this action.
I can't get the code above to work consistently so I'm not posting that. 

    <span class="line-item-property__field">
    <label for="pick-up-date-required">Pick Up Date (required)</label>
    <input required class="required" id="pick-up-date-required" type="text"   name="properties[PICK UP DATE (required)]">
    </span>
<p></p>
    <span class="line-item-property__field">
    <label>Pick Up Time (required)</label>
    <input required class="required" type="radio" name="properties[PICK UP TIME (required)]" value="Before 3PM"> <span>Before 3PM</span><br>
    <input required class="required" type="radio" name="properties[PICK UP TIME (required)]" value="After 3PM"> <span>After 3PM</span><br>
    </span>
0 Likes