Fixing Raw HTML Price Errors in Shopify Ride & Dawn Themes

Hey there, fellow store owners! Let’s talk about something that can really throw a wrench in your day: those pesky price display errors, especially when you’re juggling different currencies or using third-party apps. We recently had a great discussion in the community about just this, and I wanted to share the insights and solutions we uncovered. It’s a common hiccup, but thankfully, there are clear ways to fix it.

The conversation started when @Lemon1, using the Shopify Ride theme and the Libautech Currency Converter app, ran into a head-scratcher. While their product prices looked perfect on the main product page, things got weird when customers clicked "Choose Options" for variants. Instead of a nicely formatted price in USD, they were seeing raw HTML tags like 65.00/ea or sometimes just the unit label /ea.

Here’s what Lemon1 was seeing:

And when the currency converter was temporarily disabled, the /ea (which stands for "each" – a unit price label) still popped up, indicating a theme-level behavior:

Understanding the Root Cause: HTML Escaping

This isn't just a random glitch; it's a specific interaction between how Shopify themes (especially newer ones like Ride, which is based on Dawn) handle translations and how third-party currency converters inject their own HTML. As @brisk_code and @tim_tairli pointed out, the core issue lies with HTML escaping.

Shopify themes use translation keys to output text labels, like "each" for unit pricing. When a Liquid template uses the | t filter (for "translate") on a key that doesn't have an _html suffix, Shopify automatically escapes any HTML within that translation to prevent security vulnerabilities. This means tags like get converted into their HTML entities (<lomoney>), making them appear as plain text instead of rendered HTML.

Here's a snippet from the theme's code (in snippets/quick-order-list-row.liquid) that illustrates this:


                    {{- 'sections.quick_order_list.each' | t: money: price_break_price -}}
                  
                  {%- break -%}
                {%- endif -%}
              {%- endfor -%}
            {%- endif -%}


        
      {%- else -%}
        
          {{- 'sections.quick_order_list.each' | t: money: item_price -}}
        
      {%- endif -%}
    
  
{%- else -%}
  {%- if variant.quantity_price_breaks.size > 0 -%}
    {%- liquid
      assign volume_pricing_array = variant.quantity_price_breaks | sort: 'quantity' | reverse
    -%}
    
See that 'sections.quick_order_list.each' | t? That's the culprit. Since each isn't each_html, any HTML inserted by the currency converter app gets escaped.

This is often referred to as a "theme bug" by community members, especially since it was reported for Dawn (the base for Ride) on GitHub (Issue #3552) but hasn't been officially addressed. It typically doesn't happen with Shopify's native currency conversion features, which handle things differently, but it certainly impacts stores relying on third-party apps for dynamic currency display or custom HTML in their price outputs.

Your Fix-It Guide: Two Approaches
Before you dive into any code, always, always, duplicate your theme! This is your safety net. Go to your Shopify Admin > Online Store > Themes, find your current theme, click "Actions" > "Duplicate."

Option 1: The Robust Fix – Renaming the Translation Key (Recommended)
This approach directly tackles the HTML escaping by telling Shopify to expect and render HTML for that specific translation key. It's a bit more involved but generally considered the cleaner, more robust solution.

    Access Theme Code: In your Shopify Admin, go to Online Store > Themes. On your duplicated theme, click "Actions" > "Edit code."
    Locate the Locale File: In the file editor, navigate to the locales folder and open en.default.json (or your primary language file, e.g., es.default.json).
    Rename the Key: Search for "sections.quick_order_list.each". You'll likely find something like:
        "each": "{{ money }}/ea"
        Rename this key to "each_html":
        "each_html": "{{ money }}/ea"
    
    Update Liquid File: Now, you need to tell your theme to use this new _html version. Navigate to snippets/quick-order-list-row.liquid.
    Modify the Price Output: Find the line (or lines) that use the old key. It will look similar to:
        {{- 'sections.quick_order_list.each' | t: money: item_price -}}
        Change it to:
        {{- 'sections.quick_order_list.each_html' | t: money: item_price -}}
        Make sure to update all instances where sections.quick_order_list.each is used with the | t filter.
    Save and Test: Save your changes and preview your duplicated theme to ensure the prices are now displaying correctly with the currency converter.


Option 2: The Quick Fix – Direct Price Output
This method bypasses the translation key entirely for that specific output. It's quicker, but it means the /ea part won't be translated if you ever offer your store in multiple languages.

    Access Theme Code: Again, in your Shopify Admin, go to Online Store > Themes. On your duplicated theme, click "Actions" > "Edit code."
    Locate the Snippet: Navigate to snippets/quick-order-list-row.liquid.
    Modify the Price Output: Find the line that outputs the price with the translation filter, which looks like:
        {{- 'sections.quick_order_list.each' | t: money: item_price -}}
        Replace it with:
        {{ item.price | money }}/ea
        (Note: @brisk_code also suggested checking snippets/price.liquid for a similar change, so if the above doesn't fully resolve it, that's another place to investigate.)
    Save and Test: Save your changes and preview your duplicated theme to confirm the fix.


Both options should resolve the issue of raw HTML tags appearing in your variant pricing. Option 1 is generally preferred for themes that support multiple languages, as it retains the translatability of the "/ea" label (if you define it in other locale files). If you're running into similar issues with other parts of your store, remember the core principle: if you need HTML to render, ensure the translation key is suffixed with _html or that you're directly outputting the Liquid variable without the | t filter.

It’s a great example of how diving into the theme code, even just a little, can empower you to fix seemingly complex issues. Keep experimenting on your duplicated theme, and don't hesitate to lean on the fantastic Shopify community for support. Happy selling!

Fixing "Raw HTML" Price Errors in Shopify's Ride Theme (and Others!)

Understanding the Root Cause: HTML Escaping

Your Fix-It Guide: Two Approaches

Option 1: The Robust Fix – Renaming the Translation Key (Recommended)

Option 2: The Quick Fix – Direct Price Output

`Explore migration tools`