Is your Shopify store’s discounted price displaying too small or too large and, as a result, throwing off your product page’s clean design? Ultimately, a well-presented price is crucial for capturing customer attention and, more importantly, for highlighting a great deal. Therefore, knowing how to resize discounted price on product page in Shopify is a fundamental skill for any store owner looking to polish their site’s professionalism.

Fortunately, this beginner-friendly guide will walk you through the simple steps of adjusting your sale price font size using Shopify’s built-in code editor. Best of all, you don’t need to be a coding expert—just follow along, and you’ll have it mastered in no time.

Why Resizing Your Discounted Price Matters

Before we dive into the “how,” let’s quickly touch on the “why.” A prominent, well-sized discounted price does more than just look good. It creates a strong visual contrast with the original price, making the savings feel more significant. This subtle change can improve user experience, build trust, and ultimately, help boost your conversion rates.

Step-by-Step Guide: Resizing the Discounted Price

This process involves editing your theme’s code, specifically the CSS (Cascading Style Sheets) which controls the look and feel of your store. Always back up your theme before making changes (more on that in our best practices).

1: Access Your Shopify Theme Code Editor

1. From your Shopify admin, navigate to Online Store > Themes.
2. Find your current theme and click on Actions > Edit code.

2: Locate the CSS File (theme.css or base.css)

1. In the code editor sidebar, look for the “Assets” folder and click to expand it.
2. Scroll through the list of files and click on one named theme.scss.css or base.scss.css. If you don’t see a .scss.css file, look for any file ending in .css. This is where we will add our custom styling.

3: Add Your Custom CSS Code

1. Scroll to the very bottom of the CSS file. This is the best place to add new code to avoid conflicts.
2. Copy and paste the following CSS snippet:css/* Resize Discounted Price on Product Page */ .product__price–on-sale { font-size: 24px !important; font-weight: bold; color: #ff0000; /* Change to your preferred color */ }
3. Customize the values:
   • font-size: Change 24px to your desired size (e.g., 28px, 1.5rem).
   • color: Change #ff0000 (red) to any hex code for your brand’s color.
   • font-weight: bold makes the price stand out. You can change it to normal or a number like 700.

4: Save Your Changes

1. Click the Save button in the top-right corner of the code editor.
2. Open one of your product pages that has a discount applied to see the changes in action!

Troubleshooting Tip: If the code doesn’t work immediately, your theme might use a different CSS class name. You can find the correct class by using your browser’s “Inspect” tool. Right-click on the discounted price and select “Inspect.” Look for the class name (it will often contain words like price, sale, compare, or on-sale) and use that in your CSS code instead of .product__price--on-sale.

Best Practices & Tips for Price Display

When you customize product prices in Shopify, keeping a few key principles in mind will ensure a positive impact on your customers.

• DO maintain a clear visual hierarchy. The discounted price should be the largest and most prominent price element on the page.
• DO use a contrasting color for your sale price. Red is a classic choice for signaling a deal, but ensure it fits your Shopify store design.
• DON’T forget about mobile. Always check how your resized price looks on mobile devices. You may need to add a separate mobile-specific CSS rule using a @media query.
• DO create a backup before editing any code. Always duplicate your theme (go to Online Store > Themes > Actions > Duplicate) before you start editing. This is your safety net!
• DON’T make the original price unreadable. It should be struck through but still legible so customers can easily see the value they’re getting.

Recommended Tools & Apps For Advanced Customization

If you’re not comfortable editing code or want more powerful control over your entire store’s typography and styling, these apps are excellent alternatives:

1. Growave (formerly Ali Reviews): Beyond just reviews, this robust app often includes tools to easily modify product page elements without code.
2. PageFly Landing Page Builder: This powerful page builder gives you drag-and-drop control over every element on your product pages, including prices. It’s perfect for deep customization.
3. Simple Custom CSS: A lightweight app that lets you add custom CSS like we did in this guide, but without ever touching your theme code. It’s a safer option for beginners.

Conclusion: Master Your Store’s Look and Feel

Knowing how to resize discounted price on product page in Shopify is a small change that can have a big impact on your store’s perceived value and professionalism. By following this simple guide, you’ve taken control of your store’s design to better highlight your amazing deals and improve the customer experience.

Ready to take the next step? Back up your theme now and try implementing this change on your store. A more aesthetically pleasing and effective product page is just a few clicks away

Did this guide help you? Have any questions? Let us know in the comments below