Hi Experts!
I am looking to try and show the actual % reduction for each product on my site i.e. 50% Off or You Save 50% something like this. I know it is possible with such code as this below but I am not sure here to place this code and on what page. Any help would be much appreciated!! using Dawn 2 theme.
www.generationaudio.co.uk
{% if product.compare_at_price_max > product.price %}
{{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}% off
{% endif %}
Thanks Scott
From your Shopify admin go to Product
Click the name of a product
In the Pricing section set the Compare at price to the product’s original price
Set the Price of the product to your new sale price. Note. The value in Compare at price must be higher than the value in Price to show a sale price
Click Save
plz try to find the code that is highlighted in below picture. You can search all files in you theme that contain card-product in their name. about line number ~200
Hi @Ahsan_ANC
Do I paste the code from my original post there?
@Ahsan_ANC
That doesn’t seem to work…i added the code to this page and in the position you said. It just makes the ‘sale’ tab go blank
product-card.liquid
plz use this one
{% if card_product.compare_at_price_max > card_product.price %}
{{ card_product.compare_at_price_max | minus: card_product.price | times: 100.0 | divided_by: card_product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}% off
{% endif %}
@Ahsan_ANC
Hi that doesn’t seem to work either, it just makes the ‘sale’ tab go blank (see pic)
can you share the code of card-product.liquid file.
or
do this
find this {{ ‘products.product.on_sale’ | t }} everywhere in file line number (~98)and replace it with the new code
-{% if card_product.compare_at_price_max > card_product.price %}
{{ card_product.compare_at_price_max | minus: card_product.price | times: 100.0 | divided_by: card_product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}% off
{% endif %}
1 Like
@Ahsan_ANC
{% comment %}
Renders a product card
Accepts:
- product_card_product: {Object} Product Liquid object (optional)
- media_size: {String} Size of the product image card. Values are “square” and “portrait”. Default is “square” (optional)
- show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
- add_image_padding: {Boolean} Enables padding on the image to space out the grid
- show_vendor: {Boolean} Show the product vendor. Default: false
- show_image_outline: {Boolean} Show card outline. Default: true (optional)
- show_rating: {Boolean} Show the product rating. Default: false
Usage:
{% render ‘product-card’, show_vendor: section.settings.show_vendor %}
{% endcomment %}
{{ ‘component-rating.css’ | asset_url | stylesheet_tag }}
{% comment %}Start automatically added Judge.me widget{% endcomment %}
{% render 'judgeme_widgets', widget_type: 'judgeme_preview_badge', concierge_install: true, product: product_card_product %}
{% comment %}End automatically added Judge.me widget{% endcomment %}
{%- if show_vendor -%}
{{ ‘accessibility.vendor’ | t }}
{{ product_card_product.vendor }}
{%- endif -%}
{%- if product_card_product.featured_media -%}
{%- endif -%}
{% comment %} TODO: metafield {% endcomment %}
{{ block.settings.description | escape }}
{%- if show_rating and product_card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = product_card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}
{{ product_card_product.metafields.reviews.rating.value }} / {{ product_card_product.metafields.reviews.rating.value.scale_max }}
({{ product_card_product.metafields.reviews.rating_count }})
{{ product_card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}
{%- endif -%}
{% render 'price', product: product_card_product, price_class: '' %}
{%- if product_card_product.featured_media -%}
{%- liquid
assign featured_media_aspect_ratio = product_card_product.featured_media.aspect_ratio
if product_card_product.featured_media.aspect_ratio == nil
assign featured_media_aspect_ratio = 1
endif
-%}
<div{% if add_image_padding %} class=“card__media-full-spacer”{% endif %}>
![{{ product_card_product.featured_media.alt | escape }}]()
{%- if product_card_product.media[1] != nil and show_secondary_image -%}
<img
srcset=“{%- if product_card_product.media[1].width >= 165 -%}{{ product_card_product.media[1] | img_url: ‘165x’ }} 165w,{%- endif -%}
{%- if product_card_product.media[1].width >= 360 -%}{{ product_card_product.media[1] | img_url: ‘360x’ }} 360w,{%- endif -%}
{%- if product_card_product.media[1].width >= 533 -%}{{ product_card_product.media[1] | img_url: ‘533x’ }} 533w,{%- endif -%}
{%- if product_card_product.media[1].width >= 720 -%}{{ product_card_product.media[1] | img_url: ‘720x’ }} 720w,{%- endif -%}
{%- if product_card_product.media[1].width >= 940 -%}{{ product_card_product.media[1] | img_url: ‘940x’ }} 940w,{%- endif -%}
{%- if product_card_product.media[1].width >= 1066 -%}{{ product_card_product.media[1] | img_url: ‘1066x’ }} 1066w,{%- endif -%}
{{ product_card_product.media[1] | img_url: ‘master’ }} {{ product_card_product.media[1].width }}w”
src=“{{ product_card_product.media[1] | img_url: ‘533x’ }}”
sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)”
alt=“{{ product_card_product.media[1].alt | escape }}”
loading=“lazy”
class=“motion-reduce”
width=“{{ product_card_product.media[1].width }}”
height=“{{ product_card_product.media[1].height }}”
{%- endif -%}
{%- else -%}
{%- endif -%}
{%- if product_card_product.available == false -%}
{{ 'products.product.sold_out' | t }}
{%- elsif product_card_product.compare_at_price > product_card_product.price and product_card_product.available -%}
{{ 'products.product.on_sale' | t }}
{%- endif -%}
plz use this one
{% comment %}
Renders a product card
Accepts:
- product_card_product: {Object} Product Liquid object (optional)
- media_size: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
- show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
- add_image_padding: {Boolean} Enables padding on the image to space out the grid
- show_vendor: {Boolean} Show the product vendor. Default: false
- show_image_outline: {Boolean} Show card outline. Default: true (optional)
- show_rating: {Boolean} Show the product rating. Default: false
Usage:
{% render 'product-card', show_vendor: section.settings.show_vendor %}
{% endcomment %}
{{ 'component-rating.css' | asset_url | stylesheet_tag }}
{% comment %}Start automatically added Judge.me widget{% endcomment %}
{% render 'judgeme_widgets', widget_type: 'judgeme_preview_badge', concierge_install: true, product: product_card_product %}
{% comment %}End automatically added Judge.me widget{% endcomment %}
{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}
{{ product_card_product.vendor }}
{%- endif -%}
{%- if product_card_product.featured_media -%}
###
{{ product_card_product.title | escape }}
{%- endif -%}
{% comment %} TODO: metafield {% endcomment %}
{{ block.settings.description | escape }}
{%- if show_rating and product_card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = product_card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}
{{ product_card_product.metafields.reviews.rating.value }} / {{ product_card_product.metafields.reviews.rating.value.scale_max }}
({{ product_card_product.metafields.reviews.rating_count }})
{{ product_card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}
{%- endif -%}
{% render 'price', product: product_card_product, price_class: '' %}
{%- if product_card_product.featured_media -%}
{%- liquid
assign featured_media_aspect_ratio = product_card_product.featured_media.aspect_ratio
if product_card_product.featured_media.aspect_ratio == nil
assign featured_media_aspect_ratio = 1
endif
-%}
{%- else -%}
##
{{ product_card_product.title }}
{%- endif -%}
{%- if product_card_product.available == false -%}
{{ 'products.product.sold_out' | t }}
{%- elsif product_card_product.compare_at_price > product_card_product.price and product_card_product.available -%}
-{% if product_card_product.compare_at_price_max > product_card_product.price %}
{{ product_card_product.compare_at_price_max | minus: product_card_product.price | times: 100.0 | divided_by: product_card_product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}% off
{% endif %}
{%- endif -%}
1 Like
@Ahsan_ANC
Worked great!!! Thank you very much 
Is there a way of making the tab bigger?
plz paste this at the bottom of base.css
.badge{
padding: 10px 20px;
}
first value 10 increase/decrease the space top and bottom
second value 20 increase/decrease the space right and left
plz use custom value to your choice
@Ahsan_ANC
Wow thanks again! So helpful and appreciate it very much
plz use this new code it will increase the font size of badge.
plz change the value as per your choice
.badge {
padding: 6px 15px;
font-size: 18px;
}
One last thing! promise its last
to change the color and background of the badge use this color;
paste the code at the bottom of base.css
.badge {
color: #fff;
background: #a84545;
border-color: #a84545;
}
you can give any color name or Hexa code.
Thanks
Ahsan ANC
