Price size o product page

Topic summary

A user seeks to adjust pricing display on their Shopify product page, specifically wanting the sale price to appear smaller to match the crossed-out original price on both desktop and mobile.

Solutions Provided:
Multiple respondents offered CSS-based solutions with slight variations:

  • Add custom CSS code to reduce sale price font size (typically to 12-13px)
  • Code can be added either to base.css/theme.css files or through Theme Settings > Custom CSS
  • Target CSS selector: span.price-item.price-item--sale.price-item--last

Additional Request:
The user also asked about making the crossed-out original price larger instead. One respondent provided code to increase the original price size (to 17px) using the selector s.price-item.price-item--regular.

Status: Multiple working solutions provided with screenshots demonstrating results. The discussion appears resolved with actionable CSS code snippets ready for implementation.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.

Hello

I am looking for help on my product page..

I want my sale price t be smaller so it matches the original crossed out price..

on both Desktop and Mobile

website: www.gogghi.ch

password: GOGGHI10NEWWEBSITE2025

thank for the help!

here the screenshot:

Hi @LeandroS ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css file Add the provided code at the end of the file.

span.price-item.price-item--sale.price-item--last {
    font-size: 13px !important;
}

hi thanks! and what if i would want the original crossed out price bigger?

so exactly the opposite?

Or

Size change 15

span.price-item.price-item--sale.price-item--last {
    font-size: 15px !important;
}
s.price-item.price-item--regular {
    font-size: 17px !important;
}

Hi @LeandroS ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

span.price-item.price-item--sale.price-item--last {
    font-size: 12px !important;
}

Here is the result:

Please let me know if it works!

Best,

Daisy

Hi LeandroS

  • You can try to follow this step
    Step 1: Go to Edit code
    Step 2: Find file component-price.css and add this code at the end of the file
span.price-item.price-item--sale.price-item--last {
    font-size: 13px !important;
}

Result:

Best,
LizHoang