Customizing Pricing and Offer Text on SENSE THEME

Topic summary

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.

Summarized with AI on February 12. AI used: gpt-5.

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:

30.07.2022_14.23.24_REC.png

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:

30.07.2022_14.22.27_REC.png

How is this done?

1 Like

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!