Why Font Size Matters for Product Pricing on Shopify
When it comes to eCommerce, every design element plays a crucial role in influencing customer decisions. One such element is the font size of product prices and compare-at prices in your Shopify store. If your price appears too small, customers might overlook it, affecting conversions. On the other hand, if it’s too large, it can overpower other design elements, making your store look unprofessional.
In this guide, we’ll walk you through the process of adjusting product price and compare-at price font sizes in Shopify to enhance user experience and boost sales.
“E-commerce is a battlefield where the best marketing wins.”
Understanding Product Price and Compare-at Price in Shopify
Before diving into the font size customization, it’s essential to understand the difference between Product Price and Compare-at Price:
- Product Price: This is the actual selling price of the product displayed on the product page and collections.
- Compare-at Price: This indicates the original price before a discount, making it clear that customers are getting a deal.
Shopify themes come with default font sizes, but you might want to modify them to match your store’s branding and improve readability.
How to Adjust Product Price and Compare-at Price Font Size in Shopify
There are two ways to modify font sizes in Shopify: using Theme Editor (if your theme allows it) or adding custom CSS code.
Method 1: Adjusting Font Size Using the Theme Editor
Some Shopify themes provide built-in options for adjusting font sizes through the Theme Editor. To check if your theme supports this:
- Go to Shopify Admin > Click Online Store > Select Themes.
- Click on Customize next to your active theme.
- Look for typography or product settings under Theme Settings.
- Adjust the font size settings for product prices if available.
- Save the changes and preview your store.
If your theme does not offer this option, proceed with the CSS method.
Method 2: Adjusting Font Size Using CSS Code
If you don’t find a font size option in the Theme Editor, you can manually adjust it by adding custom CSS.
Steps to Edit CSS in Shopify
- Go to Shopify Admin > Click Online Store > Select Themes.
- Click Actions > Select Edit Code.
- In the Assets folder, open the base.css or theme.css file (the exact file name depends on your theme).
- Add the following CSS code at the bottom:
/* Adjust product price font size */
.price-item.price-item–regular {
font-size: 18px; /* Adjust the size as needed */
font-weight: bold;
}
/* Adjust compare-at price font size */
.price-item.price-item–sale {
font-size: 16px; /* Adjust the size as needed */
text-decoration: line-through;
color: #888;
}
- Click Save, then refresh your store to see the changes.
Best Practices for Font Size Optimization
To ensure your price fonts look professional and boost conversions, follow these best practices:
- Keep It Readable: A font size between 16px and 20px is ideal for product prices.
- Highlight Discounts: Make the Compare-at Price slightly smaller than the actual price and use a different color to show discounts clearly.
- Mobile Responsiveness: Ensure font sizes adjust properly on mobile devices for a seamless shopping experience.
- Use a Bold Font for the Main Price: This makes it stand out and immediately grabs customer attention.
Adjusting the product price and compare-at price font sizes in Shopify is a simple yet effective way to enhance user experience and improve sales conversions. Whether you tweak the settings through the Theme Editor or use custom CSS, optimizing font sizes ensures that pricing information is clear and compelling.
If you need help customizing your Shopify store, ShopifyEcommerce is here to assist! We specialize in Shopify development, design, and optimization to help your business grow.
Need expert Shopify assistance? Contact us today!