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

NewYorkais
Tourist
7 0 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

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

Reply 1 (1)
PaulNewton
Shopify Partner
3419 224 657

@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

 

 

Join the discussion - What was learned this Black Friday?


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