Customizing the price display in the Shopify Sense theme to remove a simple crossed-out price and address a visible white blank next to the price. The desired outcome is a more styled price/offer presentation shown in provided images.
One responder requested the store URL and password to investigate the exact cause of the spacing/blank area. This suggests the white blank may be theme- or configuration-specific and might require inspection.
A concrete suggestion was provided: add custom CSS in Assets > base.css. The snippet adjusts the price badge’s border-radius (to square corners) and color (black), and increases the regular (struck-through) price size on sale for desktop screens (min-width 750px).
Technical notes: the CSS targets classes .product .price .badge (badge style) and .product__info-container .price–on-sale .price-item–regular (regular price size). This helps align the visual style closer to the desired screenshot, though it may not directly eliminate the white blank.
Status: no confirmation of results from the original poster. Next steps: share store access for diagnosis and test the CSS changes; images and the code snippet are central to understanding the intended styling.
Hello! I am using sense theme and my pricing offer on the product page is a simple cross out price, then the actual price, as so:
The white blank next to the price also is annoying, so how do I change that?
I would like customization that allows the price to look something like this on the product page:
How is this done?
Hello There,
Please share your store URL and password.
So that I will check and let you know the exact solution here.
Hi @stream797 ,
Go to Assets > base.css and paste this at the bottom of the file:
.product .price .badge {
border-radius: 0 !important;
color: #000 !important;
}
@media screen and (min-width: 750px) {
.product__info-container .price--on-sale .price-item--regular {
font-size: 1.8rem;
}
}
Hope it helps!