I would like to change the ‘sale’ badge into ‘Neu’. On the collection page and home page, so not on the product page. See picture:
Topic summary
A user wants to replace the ‘Sale’ badge with ‘Neu’ (German for ‘New’) on collection and home pages, but not on product pages.
Solution Provided:
- Custom CSS code can change the badge on collection/home pages only
- Liquid code would be required to exclude product pages from the change
- The responder can help with the badge modification but cannot prevent changes on product pages
Implementation Steps:
- Navigate to Shopify admin → Online Store → Themes
- Click Actions → Edit code on the desired theme
- Open the CSS file (base.css, style.css, or theme.css) in the Assets folder
- Add the provided CSS code at the bottom of the file
- Save changes
CSS Approach:
The code uses .card__badge.top.left::after pseudo-element with content: "Neu" to replace the badge text, along with styling for display, padding, colors, and font properties.
Status: Solution provided with code snippet, awaiting implementation.
1 Like
Hi @blasoo ,
Would you mind to share your URL website? with password if its protected. Thanks!
1 Like
1 Like
Thank you for the information. Sorry I read it late. For this change that only showed on the home page and collection page you need to have liquid code. So it wont change on the product page. I can help you with the changes with Badge, But I cant help you with the product page not to change.
Here’s the code anyway.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
- And Save.
.card__badge.top.left:after {
content: "Neu";
border: 1px solid transparent;
display: inline-block;
font-size: 1.2rem;
letter-spacing: .1rem;
line-height: 1;
padding: 0.5rem 1.3rem 0.6rem;
text-align: center;
background-color: #0047ab;
color: white;
word-break: break-word;
}
.card__badge.top.left span {display: none;}
Result:
1 Like