How to Display Sale Price and Regular Price on One Line in Shopify's Mobile View

In the world of eCommerce, especially when running a Shopify store, optimizing your product display for different screen sizes is crucial. One common issue store owners face is ensuring that both the regular price and sale price are displayed attractively and legibly on smaller screens, such as mobile devices. In this guide, we'll delve into the reasons behind this issue and provide a comprehensive solution to keep your product pricing looking sharp across all devices.

Understanding the Problem: Sale and Regular Prices Overlapping on Mobile

When viewing a product on a mobile device, you might notice that the sale price and the regular price sometimes do not fit neatly on one line. This can happen for a number of reasons:

1. Font Size: Larger fonts, which look great on desktop screens, can cause line breaks on smaller mobile screens, making prices appear cluttered or cut off.

2. Margins and Padding: Default theme settings may include margins and padding that don't adapt well to smaller screens, leading to misalignment or overlapping.

3. Responsive Design Constraints: Some Shopify themes may not be fully optimized for mobile responsiveness, which could prevent elements from resizing correctly.

Understanding these potential issues is the first step to effectively correcting how your Prices appear.

CSS to Make Price Fit in One Line

To resolve the issue of sale and regular prices not fitting on one line on mobile screens, custom CSS can be used. This CSS will ensure that the prices resize and reposition themselves appropriately for smaller screens.

Step-by-Step Solution

1. Access Your Shopify Store:

   • Log into your Shopify admin panel and navigate to the "Online Store" section.

2. Edit Your Theme's Code:

   • Go to "Themes" and click "Edit Code" to access your site's HTML/CSS files.

3. Locate the theme.liquid File:

   • In the Templates section, find and open the theme.liquid file.

4. Add Custom CSS for Mobile Screens:

   • Just above the closing </body> tag, insert the following CSS code:

   <style>
     @media (max-width: 450px) {
       .price--on-sale .price-item--regular {
           font-size: calc(var(--font-heading-scale) * 1.2rem) !important;
           margin-left: 6px !important;
       }
       .card__information {
           padding-left: 0 !important;
           padding-right: 0 !important;
       }
       .price {
           font-size: calc(var(--font-heading-scale) * 1.2rem) !important;
       }
     }
   </style>
   

5. Save Changes and Test:

   • Save the changes and preview your site on a mobile device to ensure the prices are appearing as desired.

Additional Tips for Responsive Pricing Display

• Test Across Devices: After applying your CSS changes, test how your prices appear on multiple devices (not just one mobile screen size) to ensure consistency.

• Use Browser Developer Tools: Make use of browser developer tools to simulate how your website appears on different screen sizes and make further adjustments if necessary.

• Keep it Simple: Avoid overly complex CSS that might introduce new issues; stick to necessary adjustments to achieve a clean, responsive design.

Common Questions and Answers

What if my theme doesn't have a theme.liquid file?

Sometimes the main layout might be controlled by a different file. Look for other layout-related files or refer to your theme's documentation to find the correct location for adding custom CSS.

Why isn't my CSS affecting the mobile view?

If changes are not reflecting, try clearing your browser's cache or check if there's a conflicting CSS that overrides your custom rules. Additionally, make sure the CSS specificity is correct.

Can plugins or apps solve this issue without altering the code?

While some apps offer enhancements for mobile responsiveness, simple CSS tweaks, as demonstrated, are often the fastest and most effective solution. Apps might also introduce additional loading time to your store.

Conclusion

Ensuring that your Shopify store's pricing looks great across all devices is paramount for maintaining professionalism and enhancing user experience. By understanding the issue and applying targeted CSS changes, you can overcome common mobile display challenges effectively. Remember to always backup your code before making changes and test thoroughly across different devices!