How can I eliminate the Sale button from my online store?

Store Design
1

Hey everyone,

I was wondering how to remove the Sale button in my store. I’d like to have it removed from every page and keep the Sold out button.

Any help is greatly appreciated!

URL: https://glowee.nl/

Thank you.

2

@Dike

try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-card.css ->paste below code at the bottom of the file.
.card__badge {
    display: none;
}
3

Thank you @KetanKumar

This removed the Sale button on every page as wanted, but also removed the Sold out button which I would like to keep. Do you know how to do this?

Thank you!

4

@Dike

sorry but i can;t see sold out! please show me

5

@KetanKumar No problem, I have removed your code so you can see the Sold out button now.

6

@Dike

great thanks for update

7

You’re welcome!

Still looking to get this done, anyone know how to do this?

8

@Dike

i have just clear asap do you need remove sale and show to soldout right?

9

Correct, I’d like to remove the Sale buttons but keep the Sold out buttons. Thank you!

10

@Dike

great thanks for asap clear

yes please sent product card gird code so i will check and update

11

@KetanKumar No problem and thank you for assisting me.

Did you mean component-product-grid?

This is the code:

.product-grid .grid__item {
padding-bottom: 2rem;
}

.product-grid.negative-margin {
margin-bottom: -2rem;
}

@media screen and (min-width: 750px) {
.product-grid .grid__item {
padding-bottom: calc(5rem + var(–page-width-margin));
}

.product-grid.negative-margin {
margin-bottom: calc(-5rem - var(–page-width-margin));
}

.product-grid.negative-margin–small {
margin-bottom: calc(-1rem - var(–page-width-margin));
}
}

product-card-liquid:

{% 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 }}

{%- 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
-%}

<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 -%}
12

Still looking for help, thank you!