Sale price - Dawn theme

Store Design

Topic summary

Issue: The strikethrough (line-through) on the regular price for a sale product in the Shopify Dawn theme appears off-center on the product page.

Proposed fixes (CSS-based):

  • Add styles in theme.liquid (before ) targeting .product__info-container .price–on-sale .price-item–regular with: text-decoration: line-through, text-decoration-thickness: 2px, text-decoration-color: inherit, and line-height adjustments within a @media (min-width: 750px).
  • Alternatively, add only text-decoration-thickness: 2px for the same selector in base.css under the same media query.
  • An additional, possibly unrelated suggestion set text-align: center on a product-form pill input fieldset.

Outcomes:

  • Initial CSS with full properties did not resolve the issue for the requester.
  • A responder reports success with text-decoration-thickness alone on their own site.
  • The requester confirms the fix works in Safari but not in Chrome, indicating a browser-specific rendering discrepancy.

Notes: Screenshots were shared to illustrate results. Status: Unresolved; cross-browser consistency (especially in Chrome) remains an open issue.

Summarized with AI on December 22. AI used: gpt-5.
5

I applied my the given CSS and on my site it work

niraj_patel_0-1723550245864.png
niraj_patel_0-1723550245864.png659×452 108 KB

Add this

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (min-width: 750px) { .product__info-container .price--on-sale .price-item--regular { text-decoration-thickness: 2px !important; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.