Display "FREE"under product card thumbnail in Venture theme

Solved
Tourist
15 0 0

Hello beautiful people.

I am having an issue with displaying the word "FREE" underneath my product card thumbnail when i set the price as $0. I already changed the code thanks to a topic I found in this forum. It shows "FREE" only on the product page after you have clicked on it. What should I do? I'm using Venture theme.

 

My store: Take My Beans 

Password: keekee

 

Thanks.

 

cc6141f9-dc54-4b46-a673-8af94a015f87.pngChange $0 to FREE

0 Likes

on product-template section :check your price if price is equal to 0 than show your free html

Shopify theme developer and customization

I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com

0 Likes
Astronaut
1091 150 274

What section is that in Venture theme? I can't right click on your website so I can't inspect the code. You'll need to go into that section and find your product price and like @ashiqueh4  said you'll need to check if the products price is 0 and display FREE instead of 0. Probably something like:

 

{% if product.price > 0 %}
{{ product.price }}
{% else %}
FREE
{% endunless%}
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Tourist
15 0 0

Thank you both of you. I have re-enabled the right click so you guys can go and check it out. 

0 Likes

Success.

Astronaut
1091 150 274

Backup your theme in case anything goes wrong. You can go to Online Store > Actions > Edit Code -- Open your Snippets folder and open up product-card.liquid.

 

Scroll to around line 63, you should see this directly after a comment that says "Not on sale but still may have varying prices":

 

          {% if product.price_varies %}
            {% assign price = product.price | money_without_trailing_zeros %}
            {{ 'products.product.from_text_html' | t: price: price }}
          {% else %}
            <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
            {{ product.price | money_without_trailing_zeros }}
          {% endif %}

You can change that to this and it should give you what you want:

 

          {% if product.price_varies %}
            {% assign price = product.price | money_without_trailing_zeros %}
            {{ 'products.product.from_text_html' | t: price: price }}
          {% else %}
            <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
        	{% if product.price > 0 %}
            {{ product.price | money_without_trailing_zeros }}
        	{% else %}
        	<b>FREE</b>
        	{% endif %}
          {% endif %}

If you want it for sale prices (say you had an item that was a certain amount and you wanted to give it away for free, but also wanted to show the compare at price) you'll have to change the code above that comment in a similar way.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Tourist
15 0 0

OMG! It works thank you. However, on some products, it still displays 0$. You can go and check out on my site. Some products successfully displayed FREE while others stayed at $0.

 

(UPDATE): It finally works for real on all the products I set for free. Actually, I accidentally put the price compared to another one and that's why it showed 0$ instead of FREE. All I had to do is delete the compared price and voilà.

0 Likes
Astronaut
1091 150 274

Good, I initially thought you might have that issue, so I was trying to work it out but I'm glad you got it fixed. 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes