Impact theme remove sale badge collection

Impact theme remove sale badge collection

Derraa
Tourist
6 0 1

Hello, how can I remove the sales badge on the collection page in the Impact theme?

The sale badge should only be visible on the product page.

Replies 3 (3)

JasmeetVT14313
Shopify Partner
292 63 77

Hi @Derraa 

Try adding the below code to your "theme.liquid" file

<style>
.collection .product-card__badge-list .badge--on-sale {
display: none;
}
</style>

Let know it it helps or not.

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com

azamgill
Shopify Partner
325 47 82

@Derraa 

 

Go to Theme Editor:

From your Shopify admin, navigate to Online Store > Themes.

Find your Impact theme and click on Customize.

Edit Theme CSS:

In the theme editor, click on Theme actions at the bottom of the sidebar.

Select Edit code.

Locate the CSS File:

Find a CSS file where you can add custom styles. This could be base.css, theme.scss.liquid, or similarly named file under the Assets folder.

Add Custom CSS:

At the bottom of the chosen CSS file, add the following CSS code to hide the sales badge on collection pages but keep it on product pages:

 

.collection-page .sale-badge {
  display: none;
}
​

 

If the .collection-page class does not accurately target the collection pages in your theme, you might need to inspect the HTML structure of your collection page to find the correct class or ID that uniquely identifies collection pages. Adjust .collection-page in the CSS snippet above with the correct selector.

Azam Gill
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Encourage me ❤️

Come and visit us at Wbify

BrainStation23
Shopify Partner
416 62 61

Hi @Derraa 
You can try this flowing step to achieve your result

Go to online store -> Click edit code-> go-to theme.css file then use bellow code 

.collection .product-card__badge-list  {
display: none !important;
}



Brain Station 23 PLC (Mail: js.sbu@brainstation-23.com)
- Was your question answered? Mark it as an Accepted Solution
- Did the solution not address your concern? We kindly request that share or mail your store URL with us this will enable us to collaborate more closely.
- Explore our Shopify public apps