Put Sold out badge below price on collection page - DAWN THEME

23 0 2


Is there any way to move the "sold out" badge at the bottom of the price on the collection page for Dawn Theme? Also, Is there any way to make the shape rectangle instead of the oval frame that is currently on it? (see screenshot below to see what i'm trying to achieve).


I look forward to any response! I would really appreciate it! Thank you

Reply 1 (1)
Shopify Partner
4878 412 1054


Always backup themes and files before making changes to code

For installation help contact me paull.newton+shopifyforums@gmail.com with this topic url, store url, theme ,and any other use-case details.

Roughly add the follow either to the themes component-card.css, or as a <style> to the bottom of theme.liquid , or relevant collection template.

Note this is repositioning the element to the bottom so extra padding must be added or the badge will sit over the price elements



#product-grid .card-wrapper {
    position: relative;
    padding-bottom: 25px;

#product-grid .card--product {
    position: unset;

#product-grid .card__badge {
    bottom: 0;
    left: 0;
#product-grid .badge {
    border-radius: unset;



To have white background , black border and text change your themes settings > styles > 'sold out badge color scheme' = Background



Finally Combinable Discounts - EARLY ACCESS ONLY - Use Free Shipping With Other Discounts

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com