Remove 'Per Item' Pricing Text on Shopify: Boost Conversions & Clean Your Store

Ever notice a small, seemingly insignificant piece of text on your Shopify store that just... doesn't quite fit? Maybe it's confusing, redundant, or simply clutters your carefully designed layout. While often overlooked, these minor visual inconsistencies can subtly erode customer trust and, more critically, contribute to abandoned carts. This exact scenario recently played out in the Shopify Community, providing a fantastic example of how targeted tweaks, often found with a bit of community help, can make a real difference to your bottom line.

The Mystery of the '€ X /per item' Text: A Conversion Blocker

Nikoscapone, a store owner utilizing the Charm theme, recently reached out to the Shopify Community seeking assistance with a persistent piece of text: "€ X /per item." This text was appearing on his product pages and, perhaps more critically, within his cart drawer. His specific concern – "many add to cart and low checkouts" – immediately flagged this as more than just an aesthetic annoyance; it was a potential conversion blocker. In the crucial moments leading up to checkout, clarity is paramount. Any confusion, no matter how small, can introduce friction and lead to a customer abandoning their cart.

This situation is incredibly common in the world of e-commerce. As store owners, we integrate various apps, customize themes, and sometimes, the styling or text elements from different sources don't quite blend seamlessly. It's akin to having a beautifully designed room, where one small, misplaced item disrupts the entire ambiance and functionality.

Why Small Textual Anomalies Matter for Your Shopify Store

While "€ X /per item" might seem minor, its presence can have several negative impacts:

• Confusion: If the pricing is already clear (e.g., "€100"), adding "/per item" can make customers wonder if there's a different pricing structure they're missing.
• Redundancy: Unnecessary text clutters the interface, making it harder for customers to quickly grasp essential information.
• Lack of Professionalism: Inconsistent or poorly integrated text can make your store appear less polished and trustworthy.
• Conversion Killer: Any friction in the buying journey, especially in the cart or checkout, significantly increases the likelihood of abandonment. Customers want a smooth, unambiguous path to purchase.

Community to the Rescue: Identifying the Culprit

Fortunately, helpful community members like Moeed quickly jumped in to assist. His initial step, a crucial reminder for anyone seeking help with store issues, was to request more details: the store URL, password (if applicable), or a clear screenshot. This detective work is vital because, without seeing the issue firsthand, accurately pinpointing a solution is challenging.

Once Moeed gained a clearer picture, he swiftly identified the probable source of the "€ X /per item" text: a third-party bundling app. While not explicitly named in Nikoscapone's initial query, the CSS class names later revealed (kaching-bundles) strongly indicated an app like 'Kaching Bundles' or a similar product bundling solution. This highlights a frequent challenge for Shopify merchants: the power of apps comes with the responsibility of ensuring they integrate seamlessly with your theme.

The Solution: Targeted CSS Customization

Moeed's solution involved a common and effective technique for minor visual adjustments on Shopify: injecting custom CSS. Initially, a simpler CSS snippet was provided, which worked for product pages but not the cart drawer. This is a classic example of how different elements (product page vs. cart drawer) might use different CSS classes or be rendered by different components, requiring a more comprehensive approach.

The updated, more robust solution provided by Moeed targeted both the bundling app's specific class and a more general small text class that might be used in the cart drawer:

Let's break down what this code does:

• .kaching-bundles .kaching-bundles__bar-unit-price: This targets the specific element responsible for displaying the "per item" text within the "Kaching Bundles" app.
• small.fs-xsmall.color-text-70: This is a more general selector that targets small text elements, likely used by the theme or another app in the cart drawer.
• display: none !important;: This CSS property hides the targeted elements completely. The !important flag ensures that this style overrides any conflicting styles defined elsewhere, which is often necessary when dealing with third-party app styling.

How to Implement Custom CSS on Your Shopify Store

If you encounter a similar issue, here are the steps to apply custom CSS:

1. Access Your Theme Code: From your Shopify admin, go to Online Store > Themes.
2. Edit Code: Find your current theme, click the "Actions" button, and then select "Edit code."
3. Locate theme.liquid: In the "Layout" directory, find the theme.liquid file. This file is the main template that loads on almost every page of your store.
4. Add the CSS: Scroll to the very bottom of the theme.liquid file, just above the closing tag. Paste the provided CSS snippet (including the