Hello!
So i have been trying the whole day to make this sale badge but i’ve only managed to do it on the product page and i,m lost on how to do it on collection page hope you can help!
Hey there, I’m sure someone would be happy to help you. We’ll need a url to your store, a password if password protected, and the name of your Theme. This can be a bit troublesome to walk someone through because it’s different for every theme, but there are plenty of people here who will probably be willing to help you out. If it’s a free theme, no problem they can get it themselves and figure it out and guide you, but if not they’ll just need access to your theme so if you provide a URL they’ll be able to post here and let you know they are requesting access. You can give them whatever permissions you wan. The community here is very helpful so I wouldn’t worry about giving anybody access.
Also when I say password if your store is password protected I am referring to the storefront, please don’t post your password and credentials to your admin.
1 Like
Hi @windef
What theme you are using for your store?
Please share your store URL, page URL and also password (if your store has one) so we can help you.
Hi @windef
For your case, we suggest you use a third-party app - The Product Labels & Badges app, and you can make a label or badge like this:
I hope that you find it useful.
Hi @windef
you can try to replace the code in file card-product.liquid with this code
{% comment %}
Renders a product card
Accepts:
- card_product: {Object} Product Liquid object (optional)
- media_aspect_ratio: {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)
- show_vendor: {Boolean} Show the product vendor. Default: false
- show_rating: {Boolean} Show the product rating. Default: false
- extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
- lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
- show_quick_add: {Boolean} Show the quick add button.
- section_id: {String} The ID of the section that contains this card.
- horizontal_class: {Boolean} Add a card--horizontal class if set to true. Default: false
Usage:
{% render 'card-product', show_vendor: section.settings.show_vendor %}
{% endcomment %}
{{ 'component-rating.css' | asset_url | stylesheet_tag }}
{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == 'portrait'
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == 'adapt'
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == nil
assign ratio = 1
endif
-%}
{%- if card_product.featured_media -%}
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{% comment %}theme-check-enable ImgLazyLoading{% endcomment %}
{%- if card_product.media[1] != nil and show_secondary_image -%}
{%- endif -%}
{%- endif -%}
###
{{ card_product.title | escape }}
{%- if card_product.available == false -%}
{{- 'products.product.sold_out' | t -}}
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
{% liquid
assign save_amount = card_product.compare_at_price | minus: card_product.price | times: 1.0 | divided_by: card_product.compare_at_price | times: 100 | round: 2
%}
-{{ save_amount }}%
{%- endif -%}
###
{{ card_product.title | escape }}
{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}
{{ card_product.vendor }}
{%- endif -%}
{{ block.settings.description | escape }}
{%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = 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
%}
{{- card_product.metafields.reviews.rating.value }} /
{{ card_product.metafields.reviews.rating.value.scale_max -}}
({{ card_product.metafields.reviews.rating_count }})
{{- card_product.metafields.reviews.rating_count }}
{{ "accessibility.total_reviews" | t -}}
{%- endif -%}
{% render 'price', product: card_product, price_class: '' %}
{%- if show_quick_add -%}
{%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%}
{%- if card_product.variants.size == 1 -%}
{%- else -%}
{%- endif -%}
{%- endif -%}
{%- if card_product.available == false -%}
{{- 'products.product.sold_out' | t -}}
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
{{- 'products.product.on_sale' | t -}}
{%- endif -%}
{%- else -%}
###
{{ 'onboarding.product_title' | t }}
###
{{ 'onboarding.product_title' | t }}
{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}
{{ 'products.product.vendor' | t }}
{%- endif -%}
{% render 'price' %}
{%- endif -%}
Hi @windef To remove the dot, you can follow this image and remove the : 2 in round: 2
Hi @windef
To make it corner rounded,
You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css
.badge{
border-radius: 20px;
}
Thank you very much!