Mastering Price Badges: How to Display Savings Next to Price in 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.

Customizing Your Product Page: A CSS-Only Solution

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. 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. Locate Your Product Badges/Labels Block: First, ensure that your product badges or labels block is positioned right below the product price in your theme customizer. For many themes, including Enterprise, this is often the default layout.
2. Add Custom CSS: Navigate to your Shopify admin. Go to Online Store > Themes. Find your Enterprise theme and click Customize. In the theme editor, look for an option to add "Custom CSS" for the relevant section (often found under Theme settings or a specific section's settings).
3. Paste the CSS Code: Copy and paste the following CSS snippet into your 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;
   }
   

4. Save and Preview: Save your changes and preview your product pages. You should see the price and the percentage badge appear inline, like this transformation tim_tairli shared:
   
   →
   

This CSS targets the product price and the element immediately following it (which is typically the badge/label block) and sets them to display inline, effectively placing them side-by-side. The margins ensure a nice spacing.

The Collection Page Conundrum & The Bigger Picture

Now, while the product page might be solvable with just CSS, the community discussion quickly highlighted that collection pages are a different beast. Suyash1 and tim_tairli both pointed out that for collection pages, you're likely looking at needing to edit your theme's Liquid code.

This brings up a crucial point that tim_tairli wisely stressed: direct theme code editing can make future theme updates significantly more complex. He even referenced another forum thread about "Rebase failed with conflicts" errors, which is exactly what happens when your custom code clashes with new theme updates. It's a real headache for store owners!

Maximus3 jumped in with some excellent, practical advice on dealing with premium themes like Enterprise, which can be "rigid" when it comes to custom help. He laid out two main options for collection pages (and really, any complex customization):

1. Find and Move the Existing Sale Badge Code: This involves diving into your Liquid files, locating where the theme generates the sale badge or label, and moving that snippet of code to your desired position.
2. Create Your Own Sale Badge and Hide the Theme’s: This is Maximus3's preferred method, and it’s a smart one. You essentially copy the logic the theme uses to determine if a product is on sale and how to display the percentage, then create your own badge element with that logic, placing it exactly where you want. You then hide the original theme badge using CSS.

Why is option 2 often better? As Maximus3 explains, "because I could copy any logic the theme already does, place it where I want, and it shouldn’t interrupt any updates." This approach insulates your custom changes from theme updates much better than directly modifying core theme files. While it might sound like more work upfront, it can save you a lot of grief down the road.

Thinking About Your Next Steps

So, if you're looking to make this kind of visual tweak, especially on collection pages, you've got a couple of paths. For product pages, the CSS snippet is a solid, relatively low-risk solution. Just make sure to test it thoroughly on different devices and screen sizes!

For collection pages, or if the CSS doesn't quite get you the exact look you want on the product page, be prepared for some deeper code work. Remember to always, always duplicate your theme before making any code changes! And consider Maximus3's advice: creating your own custom badge might be the more robust, future-proof option, even if it requires a bit more development expertise. It's all about weighing the visual impact against the maintenance effort. Good luck, and happy customizing!