Adding a Percentage OFF tag to the Venture theme.

Highlighted
New Member
2 0 0

Hi May, I follow your instruction but it seems doesn't work and I'm using supply theme. Can you please help me to take a look? I wanna show the %OFF on the top left corner of every product image. Thank you.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
335 32 134

Hi, @Sean88!

 

May here from Shopify. Welcome to our Shopify Community!

 

The tutorial in this discussion is meant for Venture theme, which is most likely why it did not work on your theme (Supply). Each theme has different structures in the way that it is built, so the way the code is written and placed will differ from one theme to another. That said, since Supply is a theme made and supported by Shopify, I can pass this request to our theme specialists to look over. To proceed with next steps, I will send you an email to the email address attached to your Shopify Community account.

 

For future reference, and in case other merchants see this post, I do want to mention that although we try our best to answer all posts as quickly as possible, the discussions on our Community page is not monitored by our staffs 24/7. If your theme is made and supported by Shopify and your request falls under our design policy, you can contact our support directly for a more immediate response.

 

Keep your eyes peeled for the email, Sean88! I'll send you an email very shortly.

 

Cheers.

May | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Tourist
14 0 1

Hi May,

 

Is this still accurate for the 2020 Venture version ? 

 

It doesn't seem to work as is.

 

It just displays 0% OFF.

 

Thanks in advance.

 

Julian

0 Likes
Highlighted
Tourist
14 0 1

found the solution :

 

{% if product.compare_at_price > product.price %}
{{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by:product.compare_at_price | times: 100 | divided_by: 100 | floor }}%
{% endif %}

0 Likes
Highlighted
New Member
1 0 0

10-00-9pqxe-lvk89.jpg HOW I CAN ADD THIS PERCENTAGE OFF DISCOUNT TAG IN MY BROKLEN THEME AND  Remove red save circle from featured collection - Brooklyn Theme

0 Likes
Highlighted
New Member
2 0 0

Hello ,

I have tried in my Debut theme but won't work.

Could you guide me in that????

0 Likes
Highlighted
New Member
9 0 0

I have just recently added this code to a copy of my venture theme ... and it did not work... but while i was looking through the code i noticed "hidden" content. I will first upload a copy of the code i added to my copy of the venture theme. Image 1 below

code to display compared prices after discount.png

 

My next image is an example of how my website would look... as you can see .. there has been no changes.

no compared prices showing.png

 

However . i did notice while scrolling down through the code the word hidden a lot.... a copy of the full code below. Maybe you can help more?

{% comment %}
The product card snippet is passed a liquid object, used in this file
as "product". The object is either "product" or "item", the latter if
it is from search results.
{% endcomment %}

{%- assign current_variant = product.selected_or_first_available_variant -%}

<a href="{{ product.url | within: collection }}" class="product-card">
{% comment %} <img src="{{ product.featured_image.src | img_url: '480x480' }}" alt="{{ product.featured_image.alt | escape }}" class="product-card__image"> {% endcomment %}
{% assign image = product.featured_image %}
<div class="product-card__image-container">
<div class="product-card__image-wrapper">
<div class="product-card__image js" style="max-width: {% include 'image-width' with image: image, width: 235 %}px;" data-image-id="{{ image.id }}" data-image-with-placeholder-wrapper>
<div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100 }}%;">
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="lazyload"
data-src="{{ img_url }}"
data-widths="[100, 140, 180, 250, 305, 440, 610, 720, 930, 1080]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
data-parent-fit="contain"
data-image
alt="{{ image.alt | escape }}">
</div>
<div class="placeholder-background placeholder-background--animation" data-image-placeholder></div>
</div>
<noscript>
<img src="{{ product.featured_image.src | img_url: '480x480' }}" alt="{{ product.featured_image.alt | escape }}" class="product-card__image">
</noscript>
</div>
</div>
<div class="product-card__info">
{% if settings.product_vendor_enable %}
<div class="product-card__brand">{{ product.vendor }}</div>
{% endif %}

<div class="product-card__name">{{ product.title }}</div>

{% if product.available %}
<div class="product-card__price">
{% if product.compare_at_price > product.price %}
{% comment %}
Product is on sale
{% endcomment %}
{% if product.price_varies %}
{% assign sale_price = product.price | money_without_trailing_zeros %}
{{ 'products.product.on_sale_from_html' | t: price: sale_price }}
{% else %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s class="product-card__regular-price">{{ product.compare_at_price | money_without_trailing_zeros }}</s>

<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
{{ product.price | money_without_trailing_zeros }}
{% endif %}

{% else %}
{% comment %}
Not on sale, but could still have varying prices
{% endcomment %}
{% 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 %}

{% endif %}
{%- unless product.price_varies -%}
{%- if current_variant.unit_price_measurement -%}
{% include 'product-unit-price', product_variant: current_variant, wrapper_class: "product-card__unit-price" %}
{%- endif -%}
{%- endunless -%}
</div>
{% else %}
<div class="product-card__availability">
{{ 'products.product.sold_out' | t }}
</div>
{% endif %}
</div>

{% if product.compare_at_price > product.price %}
{% comment %}
A visually-hidden label before regular/sale prices clarifies
prices for screen readers, so hide the sale tag from them.
{% endcomment %}
<div class="product-tag product-tag--absolute" aria-hidden="true">
{% if product.variants.size > 1 %}
UP TO {{ product.compare_at_price_min | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_min | money_without_currency | times: 100 | replace: '.0', '' | append: "% OFF"}}
{% else %}
{{ product.compare_at_price_min | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_min | money_without_currency | times: 100 | replace: '.0', ''| append: "% OFF"}}
{% endif %}
</div>
{% endif %}
<div class="product-card__overlay">
{% assign view_string_length = 'products.product.view' | t | size %}
<span class="btn product-card__overlay-btn {% if view_string_length > 8 %} btn--narrow{% endif %}">{{ 'products.product.view' | t }}</span>
</div>
</a>

0 Likes