Can someone help me change the default “out of stock” badge to my own badge design? I already have the design ready.
In case you need it here’s my store url: https://c1e46d.myshopify.com/collections/all
Hi @suoshie ,
This is Victor from PageFly - Shopify Page Builder App, you should seek help from an expert. Or you can refer to a page builder app in this case.
Hope you find my answer helpful!
Best regards,
Victor | PageFly
Hi @suoshie
Thank you so much for sending a message to us. Regarding your requirement "
I do have a new problem could you please help me make my product image smaller on the individual product page (not effecting the size of the image on catalogue page).", we would like to suggest a solution below:
- Please go to Online Store → Edit Code, and find the theme.css, base.css, or styles.css file. Then add the following code at the end of the file:
#MainContent .product--large:not(.product--no-media) .product__media-wrapper {
max-width: 40%
}
You can increase or decrease the 40% number above as you want.
I hope that this can help you solve the issue.
Hi @suoshie
Regarding your requirement “can you help me change the position of the badge for mobile only?”, we would like to suggest you a solution below:
- Please add the following code:
@media only screen and (max-width: 600px) {
.card__badge img {
max-width: 60%!important;
margin-left: 0px!important;
margin-top: 0px!important;
position: absolute;
top: -8px;
left: 0;
}
}
Here is the result:
I hope that this is useful for you.
Hi unfortunately your code makes no changes. I want to change the size and positioning of the “Out of stock” badge on my mobile view, NOT effecting the desktop version. Please can you help again.
Hi @suoshie
We double-checked your site and saw that the badge displayed on mobile is correct as you want.
Please provide us with details (screenshots) if you still need further help.