Adjusting the size relationship between the “compare at” price and the new sale price on Shopify Horizon theme sharpens pricing clarity, heightens perceived savings, and steers shoppers toward faster purchase decisions, unlocking several strategic advantages:

Visual Hierarchy

• Enlarges the discounted price so it becomes the primary focal point on the product page
• Scales down the crossed‐out compare figure, creating a clear contrast that highlights savings
• Prevents clutter by keeping prices proportional to surrounding text and imagery
• Maintains a polished layout on desktop and mobile with responsive font scaling

Conversion Signals

• Amplifies urgency when the sale price feels bolder and more prominent than the struck‐through amount
• Raises add to cart rates by emphasizing the deal’s value at first glance
• Lowers hesitation as shoppers perceive a larger discount gap, nudging quicker decisions
• Supports limited‐time promos where a dynamic font weight or size shift draws instant attention

Branding and Marketing Flexibility

• Aligns pricing typography with brand style guides for consistent visual identity
• Allows seasonal adjustments larger sale fonts for Black Friday or flash events without redesigning templates
• Accommodates multilingual stores where word length varies, ensuring harmonious spacing
• Pairs effortlessly with color cues such as red sale prices to reinforce promotional messaging

Implementation Ease

• Requires only CSS tweaks or Theme Editor font controls, no third‐party apps
• Adds negligible page weight, safeguarding Core Web Vitals and fast render times
• Provides real‐time preview in the Theme Editor for rapid A/B testing of size ratios
• Future‐proof across Online Store 2.0 sections, Hydrogen components, and headless builds through reusable classes

CODE :

.product-details .price {
  font-size: 28px !important; /* this is the current discounted price */
  font-weight: 600 !important; /* this is optional if you want ot make it bolder */
}

.product-details .compare-at-price {
  font-size: 18px !important; /* this is the compare at price */
  font-weight: 400 !important; /* this is optional if you want ot make it bolder */
  vertical-align: middle !important; /* this is for vertical alignment next to the new price */
}