Product.price in Product Description

Solved
Highlighted
Tourist
3 0 0

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 Partner
1204 98 148

Hey @Liamo,

 

Could you please share your website URL?

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Excursionist
21 5 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 

1 Like
Highlighted
Tourist
3 0 0

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

Success.

Excursionist
21 5 7

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. 

 

 

1 Like
Highlighted
Tourist
3 0 0

Hi, Thanks so much it worked! Great work!

0 Likes