Tired of '€ X /per item'? How to Clean Up Your Shopify Product & Cart Pages

Hey there, fellow store owners! Let's talk about those little frustrations that can pop up on our Shopify stores, the ones that make you scratch your head and wonder, "How do I get rid of THAT?" I recently stumbled upon a great conversation in the Shopify Community that perfectly illustrates this, and it's a common issue we see: unwanted text or price indicators cluttering up product pages or cart drawers.

Our friend Nikoscapone kicked off a thread titled "Remove € X /per item," asking for help with an annoying "€ X /per item" display appearing on their product pages and, crucially, in the cart drawer. They were using the "Charm theme" and even mentioned seeing many 'add to cart' actions but low checkouts, hinting that this visual clutter might be impacting conversions. And honestly, they're probably onto something. A clean, straightforward user experience is absolutely vital for guiding customers to checkout.

Understanding the '€ X /per item' Mystery

So, where does this "€ X /per item" text typically come from? As Moeed, one of our helpful community experts, quickly pointed out, these kinds of specific price displays often originate from third-party apps. In this particular case, the CSS class names like .kaching-bundles strongly suggest an app related to bundles, volume discounts, or unit pricing (like the Kaching Bundles app, for instance). While these apps are fantastic for boosting average order value, sometimes their default styling might not perfectly align with your theme or your desired clean aesthetic.

Nikoscapone's experience is a classic example: an app adds functionality, but it also adds a visual element that the store owner doesn't want or finds confusing. This is where a little custom CSS magic comes in handy!

The Community Steps In: Initial Attempts & Refinements

The beauty of the Shopify Community is seeing people collaborate. Moeed, after asking for Nikoscapone's store details (a standard first step for debugging visual issues), provided an initial CSS snippet:

This code targeted the specific class associated with the unwanted text. Nikoscapone tested it out and confirmed that it worked perfectly on the product pages! But, as often happens, the cart drawer was a different beast. "it worked on product pages , but i still have it in cart drawer," they reported back.

This is a crucial insight: elements in the cart drawer (or mini-cart/slide-out cart) often use different class names or are rendered by different parts of an app's script compared to the main product page. Moeed, being the responsive expert, quickly updated the code to include another class name, small.fs-xsmall.color-text-70, which likely targets the specific element in the cart drawer.

The Solution: Diving into theme.liquid with CSS

The final, refined solution that worked for Nikoscapone involved adding a small piece of CSS to their theme. Here's how you can implement it if you're facing a similar issue:

Step-by-Step Instructions:

1. Go to your Shopify Admin: From your dashboard, navigate to Online Store > Themes.
2. Edit Your Theme Code: Find the theme you want to edit (it's always a good idea to duplicate your theme first as a backup before making any code changes!) and click Actions > Edit code.
3. Locate theme.liquid: In the 'Layout' directory, find and click on the theme.liquid file. This is your theme's main layout file, and it's a great place to inject custom CSS that you want to apply across your entire store.
4. Add the CSS Snippet: Scroll to the very bottom of the theme.liquid file. Just before the closing tag, paste the following code:
   

5. Save Your Changes: Click the "Save" button in the top right corner.

Moeed even provided a helpful screenshot of the result, showing the cleaner product page:

The !important flag in the CSS is key here. It tells the browser to override any other conflicting styles that might be applied by the app or theme, ensuring that your display: none; rule takes precedence.

What if this specific code doesn't work for you?

While this exact code targets the .kaching-bundles and small.fs-xsmall.color-text-70 classes, your unwanted text might have different class names if it's coming from a different app or even a different theme structure. Don't fret! You can use your browser's developer tools (right-click on the unwanted text and select "Inspect") to identify the specific CSS classes or IDs associated with the element you want to hide. Once you find them, you can adapt the CSS snippet accordingly.

Beyond the Fix: User Experience and Conversions

Nikoscapone's initial concern about "low checkouts" despite many "add to cart" actions really highlights why these small UI cleanups matter. Every piece of text, every visual element on your store, contributes to the overall user experience. If something is confusing, redundant, or just plain unsightly, it can introduce friction and cause potential customers to second-guess their purchase or even abandon their cart.

By taking the time to remove elements like the "€ X /per item" if it's not essential for your customers, you're not just making your store look cleaner; you're actively improving the clarity and professionalism of your brand. This kind of attention to detail builds trust and makes the path to purchase smoother, which can absolutely translate into better conversion rates.

So, a big shout-out to community members like Moeed who are always ready to jump in and help. Their expertise, combined with a bit of DIY willingness from store owners like Nikoscapone, shows how powerful our collective knowledge can be. Always remember to back up your theme before making code changes, and don't hesitate to use the community or your browser's inspect tool to troubleshoot those pesky visual elements. A clean store is a happy store, and more importantly, a converting store!