Search
  • Juan Barake

Shopify Liquid Code: How to display text on a product pages based on product price

Case 1: I don't want to display Buy Now Pay Later options on every single product page. Some products might only be $4.00 and it can look terrible if you have 4 easy payments of $1.00 showing underneath.


Let's get started!


1- Create the Variable


First we must create a variable to tell shopify how to look up our product's price.


The most common variable name for this method is normally titled current.


As it's a variable, you can change this to whatever word you want.


This will all make sense soon.


2- Assign the variable


We then assign this to the following product attribute called product.selected_or_first_available_variant


This product attribute, means just that. When you are on a product page, it will look at the relevant size/variant you have landed on, read it and assign the word Current, and store its identity as a variable, then it will work its magic in our IF STATEMENT Rules.


3- Create the Rules


Note: The following rules will not work without our variable statement from earlier.

Read on..


Rule 1:

If my product price is greater than $10, present some text

{% if current.price > 10 %}
        <p>this product is more than $10 in price</p>
{% endif %} 

Rule 2:

If my product price is less than $10, present some text

{% if current.price < 10 %}
        <p>this product is less than $10 in price</p>
{% endif %} 

Rule 3:

If my product price is greater than or equal to $39.95, present some text

{% if current.price >= 39.95 %}
        <p>is greater than or equal to $39.95 in price</p>
{% endif %}

4 - Adding it all together



Basically here's the code you need:


{% assign current = product.selected_or_first_available_variant %} 

{% if current.price > 10 %}
        <p>more than $10 in price</p>
{% endif %}   

{% if current.price < 10 %}
        <p>less than $10 in price</p>
{% endif %}   

{% if current.price >= 39.95 %}
        <p>is greater than or equal to $39.95 in price</p>
{% endif %}  

It helps if you have a text editor, I normally use Sublime Text Editor, which highlights your code. The code we are using is called Liquid Code, and if your editor doesn't have liquid syntax, then it might display your code in different colours so you know if your code is legit.


Once you install Sublime, follow the instructions on how to allow you to install the liquid language syntax so you can see your code just like mine below:

If you get stuck, shoot me an email: info@slickmedia.com.au








15 views0 comments