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

[NewYorkais]

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

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

[PaulNewton]

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