Hi, I have the theme Refresh. How do I remove the sale tag icon that appears when I have a compare price and reduced price active on a product?
I don’t want the icon that appears and says sale. Can I remove it at all?
thanks
katie
You can hide it by adding CSS code below at the bottom of your base.css from Sale channels > Online store > Theme > Edit code > Assets > base.css
.card__badge.top { display: none !important; }
Hi @Craftyness
May I suggest to update code these steps:
- Go to Store Online-> theme → edit code
- Snippets/card-product.liquid
- Remove all code in this file after copy code below to this file
{% 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 -}}
{%- 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 -}}
{%- endif -%}
{%- else -%}
###
{{ 'onboarding.product_title' | t }}
###
{{ 'onboarding.product_title' | t }}
{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}
{{ 'products.product.vendor' | t }}
{%- endif -%}
{% render 'price' %}
{%- endif -%}
-
Assets/base.css
-
Add code below to bottom of file
.badge.price__badge-sale {
display: none!important;
}
Amazing thank you! Another person recommended deleting a load of code so I’m assuming I don’t need to? I’d prefer not to delete code if I can help it! I appreciate your help
Could I not just add the snippet of code you suggested without having to delete all the bits of code?
Hi @Craftyness
If you want hide sale badge that don’t want remove liquid code.
May I suggest to update code these steps:
- Go to Store Online-> theme → edit code
- Assets/base.css
- Add code below to bottom of file
.badge.price__badge-sale,
.card__badge .badge.color-accent-1,
.card__badge .badge.color-accent-2,
.card__badge .badge.color-background-2 {
display: none;
}
it worked for desktop but badge is still visible in mobile version
Hi @AJ562 !
Could you share your url store and protect password? I will help to check the issue.