Clean Up Your Shopify Cart: Removing '€ X /per item' and Boosting Conversions

Ever notice a little piece of text on your Shopify store that just... doesn't quite fit? Maybe it's confusing, maybe it's redundant, but you know deep down it's not helping your sales. That's exactly what Nikoscapone ran into in the Shopify Community recently, and it's a fantastic example of how small tweaks, often found with a bit of community help, can make a real difference.

The Mystery of the '€ X /per item' Text

Nikoscapone, a store owner using the Charm theme, posted in the community looking for help to remove a persistent bit of text: "€ X /per item." It was showing up on his product pages and, perhaps more critically, in his cart drawer. He specifically mentioned having "many add to cart and low checkouts," which immediately tells us this wasn't just an aesthetic annoyance; it was a potential conversion blocker. When customers are nearing checkout, clarity is king, and any confusion can lead to abandoned carts.

This is a super common scenario, by the way. As store owners, we add apps, customize themes, and sometimes little bits of text or styling from different sources don't quite blend seamlessly. It's like having a perfectly designed room, and then one small, misplaced item just throws off the whole vibe.

Community to the Rescue: Identifying the Culprit

Thankfully, helpful community members like Moeed jumped in. His first step, which is always a good reminder for anyone seeking help, was to ask for more details: the store URL, password, or a screenshot. This kind of detective work is crucial because, without seeing the issue firsthand, it's hard to pinpoint a solution.

Once Moeed got a clearer picture, he quickly identified the likely source of the "€ X /per item" text: a third-party bundling app. While not explicitly named in the initial query, the CSS class names later revealed (kaching-bundles) pointed directly to something like 'Kaching Bundles' or a similar app. This is a vital insight because it tells you that the text isn't part of Shopify's core functionality or your theme's default settings, but rather an injection from an installed app.

The Initial Fix: Tackling the Product Page

Moeed's first solution targeted the display on the product pages. He provided a concise CSS snippet, designed to hide the specific element responsible for displaying that text:

Nikoscapone tried it out and confirmed that it worked for the product pages! Success, at least partially. But, as often happens with these kinds of issues, the problem wasn't entirely solved. The pesky "€ X /per item" was still lurking in the cart drawer.

The Comprehensive Fix: Product Page AND Cart Drawer

Moeed, being thorough, updated his code to address the cart drawer as well. He added another class selector, small.fs-xsmall.color-text-70, to specifically target the element in the cart drawer that was displaying the unwanted text. This is where the real magic happens, showing how a little bit of CSS knowledge can empower you to fine-tune your store's appearance.

This updated code essentially says: "Hide both the bundling app's unit price display on product pages AND that specific small text element in the cart drawer."

How to Implement This CSS Fix on Your Shopify Store

If you're facing a similar issue, here's how you can implement this fix:

1. Log in to your Shopify admin.
2. Navigate to "Online Store" > "Themes."
3. Find your current theme (it's usually the one labeled "Current theme") and click the "Actions" button, then select "Edit code."
4. In the file explorer on the left, locate the theme.liquid file under the "Layout" directory. This file is like the master template for your store, affecting every page.
5. Scroll to the very bottom of the theme.liquid file.
6. Just before the closing tag (you'll see , make sure your code goes above it), paste the updated CSS code provided above.
7. Click "Save."
8. Clear your browser cache (and any caching apps you might be using) and then check your product pages and cart drawer to confirm the text is gone!

Here's a visual example of what the result might look like after the fix:

A Word of Caution: When to Contact App Support

Moeed correctly pointed out that this text comes from a third-party app. While CSS display: none !important; is a powerful way to hide elements, it's essentially a workaround. It's like putting a sticky note over something you don't want to see. It works, but the underlying element is still there.

If hiding this text breaks other functionality of your bundling app, or if you prefer a cleaner, app-level solution, then contacting the app's support team is always a good idea. They might have a specific setting to disable it, or they can provide a more robust fix that doesn't rely on overriding styles. Always test thoroughly after making any code changes to ensure everything else on your store is still working as expected!

Ultimately, small details like a confusing "per item" note can subtly erode trust or create friction in the buying process. Paying attention to these nuances, and knowing when to dive into your theme code (or lean on the community for a helping hand!), can make a real difference to your conversion rates. It's a great example of how the Shopify community helps store owners refine their shops, one small but significant tweak at a time. Keep an eye on your store's user experience – your customers (and your checkout numbers) will thank you!