Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hello !
I have the following problem : On the dawn theme, the badge "Sold out" doesn't appear on the sold products. I tried many things, via the admin panel/ settings/ product card or via code customisation, but not really work.
I don't understand why because in discussions, i observed that people try generally to hide it, not make it appears.
If someone could help me... I will really apreciate 🙂
Thank you in advance.
Quentin
Solved! Go to the solution
This is an accepted solution.
@Quentin19 @Please add this code in base.css file at the start of the file only add this code.
.badge {
display: inline-block !important;
}
Hi @Quentin19,
Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.
.badge {
display: inline-block !important;
}
Thank you very much CodingFifty,
I added the code at the end of Base.css files. It is strange, sometimes, when i reload the product page, the badge appears really quickly (like 1/4 a second) and disapears.
I made it like this :
.................
.field__input:focus,
.select__select:focus,
.customer .field input:focus,
.customer select:focus,
.localization-form__select:focus.localization-form__select:after {
outline: transparent solid 1px;
}
.localization-form__select:focus {
outline: transparent solid 1px;
}
.badge {
display: inline-block !important;
}
}
This is an accepted solution.
@Quentin19 @Please add this code in base.css file at the start of the file only add this code.
.badge {
display: inline-block !important;
}
Thank you very much ! It works 😊
First - check if the product is really unavailable,
Then you need to find the place in your buy-buttons.liquid snippet, where the condition product.available is false - and see which class/attribute should be added to the <button> tag(usually it's attribute - disabled). Then open the Product URL you think should be OOS, click to Inspect the Code, and hover over the Add to Cart button - if the classes/attributes from the snippet are not there - then the product is available due to the reasons in the Documentation above 🙂
Thank you very much. It works with adding the css code in the base.css.
But, it's a good complement for any people in the case it had not been working 😊
Please add this code to Custom CSS in store admin > Sales channels > Online Store > Themes
html .badge { display: inline-block !important; }
- Solved it? Hit Like and Accept solution!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025