Remove Sale badge from dawn theme (on both desktop and mobile site)

[JamesC1990]

Hi - im keen to include the striked through price but want the "Sale" badge removed from both the image and next to the price on the product page.

I have included code from other discussion boards:

Have also included the following on base.css

.badge.price__badge-sale.color-accent-2 {
display: none !important;

Whilst this has solved the issue for desktop - if I go on my site on a mobile the Sale badge still remains next to the price? 

Any suggestions would be great,

Best,

James

[Made4uo-Ribe]

Hi @JamesC1990 

You need to add media query maybe there are some codes that is blocking your code. 

Check this one if it work. If not would you mind to share your store? 

@media only screen and (max-width: 749px){
.badge.price__badge-sale.color-accent-2 {
display: none !important;
}
}

 Thanks!

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[JamesC1990]

Hi - Thanks for your help.

Have added in on base.css but still appearing.

Site is: https://80563f-4.myshopify.com/

PW: James123!

Example is on product 

NEW Stormy Waves

on a mobile.

Best,

James

[Erik_Abrio]

Hello James, 

Product Card:

If u want to completely remove the sale badge I would remove this part of Code in the card-product.liquid file

before:

          {%- if card_product.available == false -%}
            <span
              id="Badge-{{ section_id }}-{{ card_product.id }}"
              class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
            >
              {{- 'products.product.sold_out' | t -}}
            </span>
          {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
            <span
              id="Badge-{{ section_id }}-{{ card_product.id }}"
              class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
            >
              {{- 'products.product.on_sale' | t -}}
            </span>
          {%- endif -%}

after:

          {%- if card_product.available == false -%}
            <span
              id="Badge-{{ section_id }}-{{ card_product.id }}"
              class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
            >
              {{- 'products.product.sold_out' | t -}}
            </span>

          {%- endif -%}

 This code is appearing 2 Times in the card-product.liquid File. First: Line 123 - 136, Second: 308 - 322.

If u want to do this via css Then try: 

.product-card-wrapper .card__badge{
    display:none!important;
}

Keep in Mind this css also removes the Soldout Badge.

Product Page:

add the css:

price__badge-sale{
display:none!important;
}

Another Solution is to set the Property show_badges:false when rendering Price on your Product Page:

change the Code lines of main-product.liquid Line 100 - 105 

From:

                {%- render 'price',
                  product: product,
                  use_variant: true,
                  show_badges: true,
                  price_class: 'price--large'
                -%}

To:

                {%- render 'price',
                  product: product,
                  use_variant: true,
                  show_badges: false,
                  price_class: 'price--large'
                -%}

Best regards Erik 

[Erik_Abrio]

Removed Content and added to previous Replay

[JamesC1990]

Thanks Erik for your fast response.

Sorry am new to code. Happy to take the CSS route as wont be in a position where products are sold out.

Just so im clear - Go edit code > snippets > card-product.liquid and past 

.product-card-wrapper .card__badge{
display:none!important;
}

At the very end of all the code?

Best,

James

[Erik_Abrio]

Yea right you have to go to edit code --> assets --> base.css and add the css at the end of the file. 

for the Product card:

.product-card-wrapper .card__badge{
    display:none!important;
}

For the product page:

price__badge-sale{
   display:none!important;
}

Best regards

[JamesC1990]

Hi Erik,

Thanks for your continued help - have added but still appearing when on a mobile

Best,

James

[Erik_Abrio]

Okay @JamesC1990 

Did you try the way i showed you via editing the liquid files,

Those definitely will help your not displaying it at any time.

If you want me to deep dive into it you can provide your myshopify url and a password if there is one or send me the preview link of your theme.

Best Regards Erik

[JamesC1990]

Hi Erik, 

I didnt try the liquid change (incase I do want to have a sale badge in future)... and figured removing code at the end is easier.

Site is https://80563f-4.myshopify.com/

PW: James123!

Example speicifically at the moment is on New Stormy Waves product.. havent set up anymore yet.

Best,

James

[Erik_Abrio · Accepted solution]

Okay the Problem seems to be a little bit weird,

What you can try:

Add this to the component-price.css file

.badge.price__badge-sale{
 display:none!important;
}

 or write it with inline css in the price.liquid file

search for price__badge-sale and change this code:

<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
      {{ 'products.product.on_sale' | t }}
    </span>

To this:

<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}" style="display:none !important;">
      {{ 'products.product.on_sale' | t }}
    </span>

Best Regards Erik

[RodorianJewel]

Hello Community: This is a noble thank you to: Erik Abrio, it took me days to find the solution to removing my sales badges on my pages.  Came across your instructions as you were helping: Mr. Jame.  I tried it, and it worked.

Thank you kindly

Rodorian Jewel