Both on product page and collections page, I would like to display % of next to price as shown in the image. By default, enterprise theme shows in a different place (on the image in collections page) and have the title on product page.
Even better: how to do like the image with savings & % below the price.
Thank you for your time and help!
On a product page this can be attempted with CSS only, without editing theme code, and would look kinda like this:
However, on collection page you’d need to edit theme code.
Should be relatively simple if one has access to the source code, however – this will make your future theme updates significantly more complex.
Just the recent example – Update theme error: Rebase failed with conflicts:
So I’d recommend you to consider whether relocating the badge would be worth it in the long run…
@reddyinc it will need some code editing to make it like the image with savings and % below the price
Can you kindly post the solution on how to accomplish this on product page? Thank you!
Premium themes are a tough one to get custom help like that, especially one as rigid as Enterprise.
Basically you have 2 options:
Personally I like number 2, because I could copy any logic the theme already does, place it where I want, and it shouldn’t interrupt any updates.
I agree with your guidance. Kindly share solution on how to accomplish this. Thank you!
To do that you need to position your product badges/labels block to be right below the product price (looks like it is a default anyway) and then add this to the sections “Custom CSS”:
.product-price, .product-price+* {
display: inline-block;
width: fit-content;
vertical-align: top;
}
.product-price {
margin: 0 0.5rem 0 0;
}
.product-price+*{
margin-top: .5em;
}
Before / After:
→Not working for me with Enterprise theme.
You have not shared a link to your store.
So I’ve based my suggestion on the theme demo store – https://enterprise-theme-digital.myshopify.com/products/d3400
It works there.
