A common sight: the sale price, the crossed-out price and a "-49%" badge with different gaps between them, and the badge sitting higher or lower than the text. It looks unfinished. Here's why it happens and how to fix it.
Why the gaps are uneven
The price elements are usually inline, so the space between them is a literal space character (about 5px), while the badge gets its own margin-left (often 20px). Different sources, different gaps.
Why the bottoms don't line up
Each element has different font sizes and line heights, so their boxes align but the visible text doesn't. Aligning by baseline lines up the text itself. Then nudge the badge by its bottom padding so its box sits on the same line.
[ref="priceContainer"] {
display: flex;
flex-wrap: wrap;
align-items: baseline; /* price + compare text on one line */
gap: 6px 10px; /* equal spacing */
}
.product-discount-badge {
margin-left: 0;
position: relative;
top: -4px; /* = the badge's bottom padding */
}Show the percentage on product pages only
In the price snippet, calculate the percentage before prices are formatted as money, and only for the main product on the product template:
{%- if compare_at_price > price and template.name == 'product' and product.handle == product_resource.handle -%}
{%- assign pct = compare_at_price | minus: price | times: 100.0 | divided_by: compare_at_price | round -%}
<span class="product-discount-badge">-{{ pct }}%</span>
{%- endif -%}Keep the badge inside the theme's price container so it updates when the variant changes.
Want it done for you? I fix price, badge and mobile layout issues across your product pages. See the fixed-price service or get a free video audit.