Fixing the Shopify Price Currency Display Glitch in Dawn & Ride Themes: A Community Deep Dive

Hey there, fellow store owners! Ever run into one of those head-scratching moments where your Shopify store just isn't showing prices the way you expect, especially after adding a currency converter app? You're definitely not alone. I recently stumbled upon a fantastic discussion in the Shopify community that perfectly illustrates this, and I wanted to break it down for you.

Our story starts with a store owner, Lemon1, who was using the Ride theme (a Shopify-made theme, much like Dawn) and the Libautech: Currency Converter app. Their default currency was Malaysian Ringgit (MYR), but the app was converting prices to USD. Everything seemed fine on the main product page, but when customers clicked "Choose Options" for products with variants, things went sideways.

Instead of seeing a clean converted price like $2.84, Lemon1's customers were seeing raw HTML tags like 65.00/ea right on the storefront! Talk about a user experience killer. Even more confusing, if they added a quantity, the total in the variant tab would show correctly. The issue was purely a display problem with the variant price itself.

Lemon1 shared some helpful screenshots, showing the raw HTML and then, after disabling the converter, the price in MYR with an extra "/ea" tag. These visuals really helped the community understand the problem:

And here's the `/ea` showing up when the converter was off:

Understanding the Root Cause: HTML Escaping

This is where the community really shined! As brisk_code and tim_tairli quickly identified, the core issue lies in how themes like Dawn and Ride handle translations, specifically with price labels. These themes often use translation keys (like sections.quick_order_list.each) to output text, and by default, these keys escape any HTML within their output. This is a security feature, preventing malicious code injection, but it can cause problems when an app tries to inject legitimate HTML for formatting, like the tag from the currency converter.

Think of it this way: the theme sees and instead of rendering it as an HTML tag, it converts the angle brackets into HTML entities (<lomoney>). The browser then just displays these entities as plain text, leading to the ugly code showing up on your product page.

Tim_tairli even pointed out that this specific behavior was reported as a bug on the Dawn theme's GitHub repository (Quick Order List enhancement| Renaming “each” translation key to “each_html”, and all its usages in the liquid code. · Issue #3552 · Shopify/dawn · GitHub) but wasn't prioritized, likely because Shopify's native currency conversion doesn't typically inject custom HTML tags like third-party apps might.

The "/ea" that Lemon1 saw? That's just the theme's unit-price label, unrelated to the currency conversion error itself, but it's part of the same translation output that was causing the problem.

The Fix: Two Paths to Clean Price Display

Alright, let's get to the good stuff – how to actually solve this. Before you touch any code, and this is super important, always duplicate your theme! Go to your Shopify Admin > Online Store > Themes, find your current theme, click "Actions," and then "Duplicate." This gives you a safe backup in case something goes wrong.

Option 1: Rename the Translation Key (Recommended)

This is generally the cleaner approach because it tells Shopify that this specific translation should allow HTML. Shopify has a convention for this: adding _html to a translation key's name prevents its output from being escaped.

1. Access Theme Code: In your Shopify Admin, go to Online Store > Themes. Find your duplicated theme, click "Actions," and then "Edit code."
2. Locate the Translation File: Navigate to the locales folder and open en.default.json (or the relevant locale file for your store's primary language).
3. Find and Rename the Key: Search for "each" within the sections.quick_order_list object. You'll likely see something like "each": "{{ money }}/ea".
4. Rename it to _html: Change the key from "each" to "each_html". So it becomes "each_html": "{{ money }}/ea".
5. Update Liquid File: Now, you need to tell your theme to use this new _html version. Navigate to snippets/quick-order-list-row.liquid.
6. Find the Usage: Look for lines similar to this (as highlighted by tim_tairli):
   

   
                       {{- 'sections.quick_order_list.each' | t: money: price_break_price -}}
   

   
   And this one:
   

   
             {{- 'sections.quick_order_list.each' | t: money: item_price -}}
   

7. Change to _html: Modify these lines to use the new key:
   

   
                       {{- 'sections.quick_order_list.each_html' | t: money: price_break_price -}}
   

   
   And:
   

   
             {{- 'sections.quick_order_list.each_html' | t: money: item_price -}}
   

8. Save Changes: Save both files.

Option 2: Direct Price Output (Quicker, but less flexible for translations)

This approach bypasses the translation key altogether for the problematic price output. It's a bit more direct but means the "/ea" part won't be translatable through your locale files.

1. Access Theme Code: Again, in your Shopify Admin, go to Online Store > Themes. Find your duplicated theme, click "Actions," and then "Edit code."
2. Locate the Snippet: Navigate to snippets/quick-order-list-row.liquid.
3. Find the Line: Look for the specific line that outputs the price, as identified by tim_tairli (around line 106 in Dawn v15.4.1):
   

   
             {{- 'sections.quick_order_list.each' | t: money: item_price -}}
   

4. Replace with Direct Output: Change this line to:
   

   {{ item.price | money }}/ea
   

   
   You might also find a similar line in snippets/price.liquid or other price-related snippets, where you could apply {{ item.price | money }} directly.
5. Save Changes: Save the file.

After making these changes in your duplicated theme, you can preview it to ensure the prices are displaying correctly without the HTML tags. Once you're happy, you can publish the duplicated theme.

General Troubleshooting Takeaways

This discussion also highlights a great general troubleshooting tip from WebsiteDeveloper and Rhea6: when you're facing an issue that seems to involve an app and your theme, try to isolate the problem. Temporarily disabling the app (like Lemon1 did with the currency converter) can quickly tell you if the issue originates from the app's interaction with your theme or if it's a standalone theme problem.

Ultimately, understanding how your Shopify theme handles data, especially translations and HTML output, is key to a smooth operation, particularly when integrating third-party apps. It's a common hurdle, but with a little digging into the code and leveraging community insights, these "bugs" are totally fixable!