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

Store Design
1

Hello!

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).

screenshot3.jpg
screenshot3.jpg2484×664 120 KB

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

2

@NewYorkais

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 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