Question 11619 in Shopify Question posted in
The Shopify help center can be found here.

Liquid: Show Text for specific Product Variant – Shopify

can you help me figure out how to show a notification for specific variants?
If customer selected "IPhone 14" show notification "Thats a Pre-order" and hide this message if the customer changes to "IPhone 13".

{% if selected variant.name contains '14' %}
    {p} Thats a Pre-order {/p}
  {% endif %}

The main Problem is, that the URL does not change by selecting the variant. Otherwise i could simply check the URL. But in my Case the URL is always the same..

Tags:

3

Answers


  1. 0

    You have a misunderstanding on how liquid works.

    Liquid finish executing before the DOM is loaded. (a.k.a the moment you see the page liquid is finished and no code will be processed after that).

    What you are describing is interacting with the DOM elements (select or radio buttons) and expecting liquid to execute some code after the variant is changed, which is not possible.

    Long story short you need to use Javascript to handle this logic, not liquid.

    Login or Signup to reply.
  2. 0

    You can use js to show an specific text for some options and then hide it with all other options, something like this:

    $(document).on('change', '.js-variant-id-text', function() {
  let
    variant_id = this.value,
    variant_text = $('.single-product-text[data-variant="' + variant_id + '"]');
  variant_text.show()
  //get all single product text div's, if it isn't a variant text, hide it.
  $(".single-product-text").not(variant_text).hide()
})
    .single-product-text {
  display: none
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="{{option_name}}" id="select-{{option_name}}" class="js-variant-id-text">
  <option class="js-variant-radio" value="placeholder" disabled selected>Select one</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<div class="single-product-text single-option-selector" data-variant="1" style="">Some text for option 1</div>
<div class="single-product-text single-option-selector" data-variant="2" style="">Some text for option 2</div>
<div class="single-product-text single-option-selector" data-variant="3" style="">Some text for option 3</div>
    Login or Signup to reply.
  3. 0

    You can do this with Shopify metafields.
    Add a metafiled data to the variant
    For example:
    Product – iPhone – variant – iPhone 14, iPhone 13, iPhone SE

    Variant Metafield – namespace&key :pro.preorder Value – Preorder

    In the javascript on the change of variant, you can add a condition if the metafield is not empty then show this:

    {{variant.metafields.pro.preorder}}

    The output will be the value you wrote for that metafield: Preorder

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search