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

NewYorkais
Tourist
24 0 3

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

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

Reply 1 (1)

PaulNewton
Shopify Partner
6339 579 1350

@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

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org