Display price per unit after sale price in Theme Narrative

Store Design
,

Topic summary

A store owner using the Narrative theme wants to display price per unit (e.g., ₹3/ml) after the selling price for products with multiple size variants (100ml, 200ml, 300ml). The native unit pricing feature is unavailable in their region.

Two solutions proposed:

Custom Liquid Code Approach:

  • Edit product-template.liquid in theme files
  • Add calculation code to divide product price by variant size
  • Requires manual code implementation and testing across variants

App-Based Solution (Weario):

  • Uses app embed blocks instead of theme modifications
  • Automatically handles variant switching and calculations
  • Offers customizable labels (“per ml” instead of default “per wear”)
  • Safer for theme updates since no code editing required
  • Provides positioning control and professional styling

Status: Discussion remains open with no confirmed solution chosen by the original poster.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Hi All,

Can anyone help me to display the price per unit in my store, I want the price per unit e.g.₹ 3 / ml to show after my selling price. I am using the theme Narrative and have variants for most of my products i.e. 100ml 200ml 300ml etc.

NB* I don’t have the option to enable the feature from my products section as the feature is not available in my region so will have to tweak the code I guess.

Any help will be highly appreciated

Regards,

Atul

2

Hi @wadhwatul

To display the price per unit (e.g., ₹3/ml) after the selling price in your Shopify store using the Narrative theme, follow these steps:

1 - Edit the Product Price Display:

  • Go to Online Store > Themes > Actions > Edit Code.
  • Find the product-template.liquid file under Sections or Templates.

2- Add a Custom Calculation:

  • Add the following code after the price:

{% assign price_per_unit = product.price | divided_by: variant.selected_options[0].value %}

Price per unit: ₹{{ price_per_unit | money }} / ml

3- Test:

  • Ensure it shows correctly for different variants (like 100ml, 200ml, etc.).

If you have other questions, I am willing to answer them more.

Best regards,

Daisy

3

Hi Atul! While the Liquid code solution above could work, you might want to consider using app embed blocks instead of custom code modifications.

Our app Weario handles exactly this scenario without needing to tweak theme files. While it’s primarily designed for fashion brands showing “per wear” pricing, the labels are fully customizable so you can display “per ml” pricing like you need.

For your variant setup (100ml, 200ml, 300ml):

  • Create Product Sets for each size category
  • Set the calculations to show ₹X/ml automatically
  • Position it right after your sale price using app embed blocks
  • Works seamlessly with the Narrative theme without code modifications

The advantages over custom Liquid code:

  • No theme file editing required (safer when updating themes)
  • Handles variant switching automatically
  • Precise positioning control
  • Professional styling options
  • No debugging when Shopify updates break custom code

Since you mentioned the native unit pricing isn’t available in your region, this gives you the same functionality with much better control over appearance and positioning: https://apps.shopify.com/weario

Especially useful for stores with multiple variant sizes like yours where the per-unit calculation changes with each variant selection!