Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
I changed the colour of the 'sale' badge for the product cards and product pages, however I don't know how to do it for only the 'sale' badge. I want the 'sold out' badge to be a black background and white text on the product cards and product pages.
This is my shop link d63bb7.myshopify.com
Hello @miab1567
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
.badge--bottom-left{
background: #000 !important;
}
span.badge--bottom-left.color-accent-2 {
background: #eb1c1c !important;
}
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
not quite right.
I want the sale badge on all pages to be red and the sold out badge on all pages to be black
I have update the above code please add that
Thanks
Go to online store ---------> themes --------------> actions ------> edit code------->base.css
at the end of the file and save.
.badge--bottom-left, {
background: #000 !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
But this also changes the 'sale' badge to be the same colour as the 'sold out' badge
I want the sale badge on all pages to be red and the sold out badge on all pages to be black
Go to online store ---------> themes --------------> actions ------> edit code------->base.css
at the end of the file and save.
span#NoMediaStandardBadge-template--20458406019403__product-grid-10132389036363 {
background: red !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Hi,
Add this on your theme.liquid file.
<style>
.badge--bottom-left, span.badge.price__badge-sale {
background: black!important;
}
</style>
I want the sale badge on all pages to be red and the sold out badge on all pages to be black
Hello @miab1567 , You have to make some code changes in your files. First, You need to open the code editor to add a class for sold-out badges.
To open the code editor go to Shopify Admin > Online Store > Themes > Edit Code. Review below screenshot for the reference.
Open the "card-product.liquid" file and locate the HTML elements that have the class "badge badge--bottom-left color-". Add the "sold-out" class to these elements, but only if they are used for displaying the "Sold Out" badge. If the class appears multiple times for the "Sold Out" badge, ensure the "sold-out" class is added to each occurrence. Do not add the class for badges displaying "Sale. Review the screenshot below for reference:
Once you add the class open the "theme.liquid" file and add the below code before the </head> tag.
{% style %}
.badge.sold-out {
background-color: #000;
}
{% endstyle %}
AT...
Hi @miab1567
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the </head> to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the </head>
<style>
span.badge.price__badge-sale {
background-color: red !important;
}
<style>
Hope this can help you solve the issue
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024