How to Make Badges Smaller on Mobile in Shopify with BemeApps

By Tony Ng.
February 13th, 2025

How to Make Badges Smaller on Mobile in Shopify with BemeApps

As a Shopify store owner, ensuring that your website is mobile-friendly is crucial for providing a seamless shopping experience. One common issue many store owners face is the size of badges on mobile devices. Badges, such as sale tags or new product indicators, can sometimes appear too large, disrupting the overall layout and aesthetics of your mobile site. In this guide, we'll explore how to make badges smaller on mobile devices in Shopify, helping you maintain a clean and professional look.

Understanding the Problem: Oversized Badges on Mobile

Badges are a great way to highlight important information about your products, such as discounts or limited-time offers. However, when these badges are too large on mobile devices, they can overshadow other elements, making your site look cluttered and unprofessional. This can lead to a poor user experience, potentially driving customers away.

Causes of Oversized Badges

Responsive Design Limitations: Many themes are designed to be responsive, but sometimes elements like badges don't scale properly.
CSS Overrides: Custom CSS or theme updates can inadvertently increase badge sizes on mobile.
Lack of Media Queries: Without specific media queries, badges may not adjust their size based on the device's screen width.

Steps to Make Badges Smaller on Mobile

To address this issue, you can modify the CSS of your Shopify theme. Follow these steps to adjust the badge size specifically for mobile devices:

Step 1: Access Your Theme's Code

Log in to Shopify Admin: Navigate to your Shopify admin panel.
Go to Themes: Select 'Online Store' and then 'Themes'.
Edit Code: Click on 'Actions' next to your current theme and select 'Edit Code'.

Step 2: Modify the CSS

Locate the CSS File: Find the base.css or a similar stylesheet file under the 'Assets' directory.

Add Media Query: At the bottom of the file, add the following code:

@media only screen and (max-width: 767px) {
  .price.price--large.price--on-sale.price--show-badge > .badge {
    font-size: 0.8rem !important;
  }
}

This code uses a media query to target devices with a screen width of 767px or less, effectively reducing the badge size on mobile devices.

Step 3: Save and Preview

Save Changes: Click 'Save' to apply the changes.
Preview on Mobile: Use a mobile device or a browser's developer tools to preview your store and ensure the badges appear smaller.

Additional Tips for Optimizing Mobile Experience

Test Across Devices: Ensure your changes look good on various mobile devices, not just one.
Keep It Consistent: Maintain a consistent style across your site for a professional look.
Regularly Update: Keep your theme and customizations updated to prevent conflicts.

Common Questions

Q: Will this change affect the desktop version of my site?

A: No, the media query targets only mobile devices, leaving the desktop version unchanged.

Q: What if the badge still looks too large or too small?

A: Adjust the font-size value in the CSS code until you achieve the desired appearance.

By following these steps, you can ensure that your Shopify store looks great on mobile devices, providing an optimal shopping experience for your customers. For more tips and solutions, explore the related posts above.

Author: BemeApps AI