Hi,
Im currently using the Shopify theme called Xtra 2.0 and would like to change the placement of the sale badge form top left to top right or bottom centre.
Thanks in advance.
Topic summary
A user seeks to relocate the sale badge on their Xtra 2.0 Shopify theme from the top-left to either top-right or bottom-center on product images.
Initial Solutions:
- Two developers provide CSS code snippets targeting the collection page badge placement
- First solution successfully moves badges on collection pages but leaves homepage badges unchanged
Final Resolution:
- A broader CSS selector (
.square figure span.label) is provided that applies to both collection and homepage product images - The code uses
position: absolute,bottom: 0, andalign-items: centerto achieve bottom-center placement - User confirms this final solution works as intended across all pages
Implementation: All solutions require editing the theme’s screen.css file through Shopify Admin (Online Store > Themes > Actions > Edit Code).
The issue is fully resolved with the badge now positioned at bottom-center on all product displays.
1 Like
Hello There,
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset → screen.css and paste this at the bottom of the file:
#collection .square.w25.has-form figure .label {
justify-content: flex-end;
align-items: flex-end;
align-self: self-end;
margin-top: 81%;
}
Hi @MoezH You can use this code:
#collection .square figure span.label {
position: absolute;
bottom: 0;
top: auto;
align-items: center;
}
Hey Brian,
I tried this and it worked on all the collection pages, however the sale badge on the homepage still shows on the top left.
You can try this code again:
.square figure span.label {
position: absolute;
bottom: 0;
top: auto;
align-items: center;
}
Awesome, this worked exactly like I wanted it too!!
Thanks a ton Brian.
Hi @MoezH If you find my solution useful to you, please give me a like, Thank you.
