Product.price in Product Description

Solved
Highlighted
Tourist
9 0 1

Hello, I've been trying to get the product price of the product to show up in the product description but it's not working.

 

In the html section of the product description I wrote the following code: 

<p>The price of <script>{{ product.price }} </script> is great value...</p>

If someone could help me make this work I'd be very greatful.

Thank you.

0 Likes
Highlighted
Shopify Expert
1381 111 206

Hey @Liamo,

 

Could you please share your website URL?

0 Likes
Highlighted
Shopify Partner
31 6 7

Hello Liamo, 

 

i don't think you can use liquid tags in the Shopify HTML Editor. 

If you want to dynamicly display the price of the product and only if you added in the description HTML editor would be with javascript. 

 

One method would be to do the following: 

1. Instead of using {{ product.price }} you could use an empty html tag like 

<p>The price of <span class="price_tag"></span> ...... </p>

2. Now simple in the product template/section you could do something like this: 

<script>
// assign the product.price to a JS variable
const price_tag = {{ product.price | money }} // lowest price of all variants -> read more here https://help.shopify.com/en/themes/liquid/objects/product#product-price

// requires jQuery 
$( document ).ready(function() {
    // now select the empty span and add the price
if( $('.price_tag').length ) {
$('.price_tag').html(price_tag);
} }); </script>

3. That should do the trick 

Best regards,

✓ Was your problem solved? Please like and accept the solution to help others.
1 Like
Highlighted
Tourist
9 0 1

Hello mrpacman,

 

Thank you for your response and for writing out the JavaScript for me, but unfortunately that didn't work for me.

 

Maybe there is a minor error with the script? I am using Brooklyn, though I shouldn't imagine that would make a difference. 

If you could make this work I would be entirely grateful.

 

Thanks once again.

0 Likes
Highlighted
Shopify Partner
31 6 7

This is an accepted solution.

Hello, 

 

here is the solution: 

1. In your shopify backend - edit the product description using the HTML Editor and add the following html where you want the price to show up

 

<span class="price_tag"></span>

 

 

For example: 
<p>My description text with ... and the price is <span class="price_tag"></span> ... the output of the price is already formatted.... </p>

 

2. Open your Code Editor: Online Store -> Themes -> Actions -> Edit Code: 

Find this file under sections:

product-template.liquid and open this file.

 

3. Add the bottom before the {% schema %} tag starts add the following code snippet:

{% comment %}
  You can change the format of the price output using the money_filter 
  https://help.shopify.com/en/themes/liquid/filters/money-filters

  product.price only works for single variant products. if you have multiple variants then it might be trickier. 
{% endcomment %}
{% assign descProductPrice = product.price | money_with_currency %}

<script>
  // assign price to JS variable
  const descPrice = '{{ descProductPrice }}';

  $(document).ready(function(){
    // assign which element class to look for
    const descPriceSelec = $('.price_tag');

    // if element class is available
    if( descPriceSelec.length ) {
      // set price
      descPriceSelec.html(descPrice);
    } else {
      console.log("HTML class not available");
    }
  });
</script>

I have tested it in my demo store and it should work. If that's what you where looking for, feel free to mark this answer as the solution. 

 

 

Best regards,

✓ Was your problem solved? Please like and accept the solution to help others.
1 Like
Highlighted
Tourist
9 0 1

Hi, Thanks so much it worked! Great work!

0 Likes
Highlighted
New Member
1 0 0

I not sure how to go about the pricing showing of my products, I cant believe that its that complicated, please assist me urgently as I move my website to Shopify in the hope that I works better than the previous one, and not I feel like it so complicated?

 

0 Likes