Move the sale badge to top left corner and change color

Store Design
1

Hello. I want to move the sale badge to the top left corner of the picture and make it red instead of black.

The sold out badge should remain the same.

Here’s my website : www.petitlaurier.co

Can you help please?

petitlaurierco_0-1663465487317.png
petitlaurierco_0-1663465487317.png860×539 119 KB

Thank you!

2

@petitlaurierco - add this css to the very end of your base.css file and check

.card__badge {top: 1rem;    bottom: initial !important;}

.card__badge .badge{background-color: #ff0000;    border-color: #ff0000;}

.collection .product-sold-out .card__badge{border-color: rgba(var(--color-badge-border),var(--alpha-badge-border));    color: rgb(var(--color-foreground));}
3

Hi @petitlaurierco ,

You can try this code

  1. Go to Online Store-> Theme->Edit code
  2. Asset-> base.css ->paste the below code at the bottom of the file.
.card__badge {
    bottom: unset;
    top: 1rem;
    left: 1rem;
}
span.badge.badge--bottom-left.color-accent-1 {
    background: red;
}
4

Hi.

This is PageFly - Advanced Page Builder.

You can go to Online store => themes => actions => edit code and add this code on file base.css

.card__badge {
top: 1rem;    
bottom: initial !important;
}
span.badge.badge--bottom-left.color-accent-1 {
    background: yellow;
}

Hope this helps.

Best Regards;

Pagefly

5

@PageFly-Victor thank you so much, it worked ! :slightly_smiling_face: