Boost Sales: How to Display Discounts Next to Price on Shopify's Enterprise Theme

Hey everyone! As a Shopify expert who spends a lot of time digging through community forums, I often come across discussions that really highlight common pain points and clever solutions. Recently, a thread titled 'Enterprise theme: How to move % of next to price' caught my eye, started by a store owner named reddyinc. It's a classic example of wanting to tweak a premium theme to perfectly match a vision, and the community really chimed in with some excellent advice.

Reddyinc was looking to move the 'percent off' or savings badge right next to the product price, both on product pages and collection pages. By default, the Enterprise theme places these badges in different spots – sometimes on the image on collection pages, or as a title on product pages. Reddyinc even shared some great screenshots showing exactly what they wanted:

It's a common request, right? You want to make those savings pop and be immediately visible.

Why Discount Visibility is Crucial for Your Shopify Store

In the competitive world of e-commerce, every detail on your product page can impact conversion rates. Clearly displaying discounts and savings is not just about aesthetics; it's a strategic move:

• Instant Value Perception: Customers immediately see the benefit, encouraging them to consider the purchase.
• Urgency and Scarcity: Discounts often imply a limited-time offer, prompting quicker decisions.
• Enhanced User Experience: Shoppers don't have to search for savings; they're presented upfront, leading to a smoother buying journey.
• Competitive Edge: Standing out from competitors by prominently showcasing your deals can be a significant differentiator.

For merchants migrating to Shopify or optimizing their existing stores, integrating these small but impactful design tweaks can significantly boost sales performance. At Shopping Cart Mover, we understand that a successful migration isn't just about moving data; it's about setting up your new store for optimal growth and customer engagement.

Customizing Your Product Page: A CSS-Only Solution for Enterprise Theme

The good news is that for product pages, community member tim_tairli offered a fantastic CSS-only solution. This is always preferable because it avoids directly modifying your theme's core Liquid files, making future theme updates much smoother and reducing the risk of conflicts. Tim_tairli even provided a demo store link to show it in action, which is super helpful!

Here’s how you can achieve this look on your product pages, displaying the percentage off right next to the price:

Step-by-Step Instructions:

1. Access Your Shopify Admin: From your Shopify admin, go to Online Store > Themes.
2. Edit Your Theme: Find your "Enterprise" theme (or the theme you're using), click Actions > Edit code.
3. Locate Your Product Badges/Labels Block: Before adding CSS, ensure that your product badges or labels block is positioned directly below the product price in your theme's section settings. This is often a default setting in many themes, but it's worth checking in the theme customizer (Online Store > Themes > Customize, then navigate to a product page and check the product information section settings).
4. Add Custom CSS: In the theme code editor, look for a file like theme.scss.liquid, base.css, or a dedicated "Custom CSS" section within your theme's settings (often found under Theme settings > Custom CSS). This is the safest place to add your custom styles.
5. Insert the CSS Code: Copy and paste the following CSS snippet into your chosen custom CSS area:

.product-price, .product-price+* {
      display: inline-block;
      width: fit-content;
      vertical-align: top;
    }

    .product-price {
      margin: 0 0.5rem 0 0;
    }

    .product-price+*{
      margin-top: .5em; /* Adjust if the badge appears too low */
    }
    

This CSS code works by making both the price and the element immediately following it (which should be your badge/label) display side-by-side as inline blocks. The `margin` properties then fine-tune the spacing between them, ensuring a clean, professional look. The `vertical-align: top;` helps align them properly if their heights differ slightly.

The result transforms the layout from a stacked appearance to a sleek, horizontal display, making your discounts impossible to miss:

Before / After (Illustrative, based on forum images):

→

Tackling Collection Pages and Deeper Customizations: When CSS Isn't Enough

While the CSS-only approach is powerful for product pages, the forum discussion highlighted that collection pages, or more complex 'savings below price' layouts, often require direct theme code edits. This is where things get a bit more intricate, especially with premium themes like Enterprise known for their rigidity.

Maximus3 wisely pointed out two main options for these scenarios:

1. Find and Move Existing Code: Locate the Liquid code responsible for rendering the sale badge/label and reposition it within the product card structure on collection pages.
2. Create Your Own Sale Badge: Copy the logic for the sale badge, create a new custom snippet or section, place it where desired, and then hide the theme's default badge. This approach is often recommended for its resilience against theme updates.

However, a strong word of caution from tim_tairli and our own experience at Shopping Cart Mover: direct theme code edits can make future theme updates significantly more complex. Shopify theme updates often involve merging new code with your existing customizations, which can lead to "rebase failed with conflicts" errors. This means you might need to manually resolve code differences, a task best left to experienced developers.

Best Practices for Safe Shopify Theme Customization

Whether you're making minor CSS tweaks or diving into Liquid code, always follow these best practices:

• Duplicate Your Theme: Before making ANY changes, always create a duplicate of your live theme. Work on the duplicate first.
• Test Thoroughly: After applying changes, test them across different products, pages, and devices to ensure everything looks and functions as expected.
• Document Your Changes: Keep a record of all modifications you make, including the file names, code snippets, and dates. This will be invaluable for troubleshooting or future updates.
• Understand the Impact on Updates: Be aware that extensive code modifications can complicate future theme updates. Weigh the benefits of the customization against the potential maintenance overhead.
• Seek Expert Help: For complex customizations, especially those involving Liquid code or if you're unsure, consulting a Shopify expert or developer is always a wise investment. This is particularly true during a Shopify migration, where you might be looking to implement a completely new design or intricate functionalities.

Conclusion: Balancing Customization with Maintainability

Customizing your Shopify store to perfectly align with your brand vision and conversion goals is essential. Displaying discounts prominently, as reddyinc aimed to do, is a fantastic way to enhance your product presentation and encourage sales. While CSS offers a safe path for many product page tweaks, more intricate changes, especially on collection pages, require careful consideration of theme code modifications.

At Shopping Cart Mover, we specialize in helping businesses like yours navigate the complexities of e-commerce, from seamless platform migrations to optimizing your Shopify store for peak performance. We understand the delicate balance between achieving a unique, high-converting design and ensuring your store remains robust and easy to maintain.

Need assistance with a Shopify migration, custom theme development, or optimizing your current store? Contact Shopping Cart Mover today – we're here to help you build an e-commerce presence that truly stands out!