Why is my price per unit code showing pack price in Shopify Liquid?

[smcniel24]

I'm having a weird error.  My products are come in a pack and the displayed prices are what the pack price is.  You get a number of items per pack and I customized the collections page to show the price per unit in addition to the main pack price.

I'm simply taking the price of the first variant and dividing by the number of items in the pack.  Let's say the price per pack is $20.00 and you get 5 items in the pack.  The price per unit is $4.00

here is my simple code and this works fine displaying $4.00 PER UNIT:

{% capture unitPrice %}{{ product.variants[0].price | divided_by: numItems | money }}{% endcapture %}
{{ unitPrice  }} PER UNIT

when I wrap this inside a span tag and make it bold it gives me the price $20.00 PER UNIT and seems to disregard the  {% capture %} of the unitPrice.

<span class="price-bold">{{ unitPrice  }} PER UNIT</span>

It only happens to products that have color and size variant options and works fine when a product only has a size variant option.

Any thoughts oh wise ones?

[Jacob_Killian]

What context is this liquid?  Section/Snippet/Layout?  I don't think I have an answer, but I'm curious if there's something in the context which makes the html ignore the liquid.  I'm also curious if product.variants[0].price exists on the variants with two options.  Does one of your options not have a price associated with it?  Could you need product.variants[1].price?

[smcniel24]

Thanks for the reply @Jacob_Killian 

I'm editing the product_grid_item Snippet

there is a price on every variant option, I did try and change it to variants[1].price as well, but get the same results.

The weird thing the calculation shows up perfect when the <span> tag is removed. 

[Jacob_Killian]

That is weird.  I didn't see any problems in the code.  Maybe javascript is getting hold of that span class?  change the class?  change it to a different html element?  Just thinking of troubleshooting it.

[smcniel24]

i did try and just put <strong></strong> around the price per unit and it still displays the un-calculated price $20.00.

also, at first i had <span style="font-weight:bold;"></span>, but was giving me an error so I added a css class to see if that would render something different, but no luck.

[Jacob_Killian]

Try this:

{% assign unitPrice = product.variants[0].price | divided_by: numItems | money %}

[Jacob_Killian]

I've really only used capture when I'm including a snippet which outputs text.

[smcniel24]

I was using assign originally but changed it to capture to see if that would help, but either way I get the same result.

[Jacob_Killian]

I'm at a loss.  What theme are you editing?

[smcniel24]

me too.  

the nice thing is my client actually likes the un-bolded look better, so as of right now i don't have to worry about it. 🙂

i'm using the Impulse theme

[Jacob_Killian]

Try it with the debut theme maybe, see if it reproduces?

[Jacob_Killian]

Still, a puzzle to be solved, because the next client may prefer it bold.

[MangoRocket]

@smcniel24 This is exactly the kind of technical headache that drove us to build Weario!

Custom Liquid code for per-unit pricing gets tricky fast, especially when you add styling or deal with complex variant structures.

Instead of debugging theme-specific code issues, you could use app blocks that handle all the calculation and styling automatically.

Here's how it works:

• Automatic per-unit calculations that work with any variant setup (color + size, etc.)
• Full styling control without breaking the math - bold, colors, positioning, etc.
• Works consistently across different themes
• Handles edge cases like variant availability, pricing & currency changes
• No code maintenance when you update themes

For your pack scenario, you'd just set up a Product Set with your pack quantity (5 items) and custom label ("PER UNIT"), and it displays the calculated $4.00 price with whatever styling you want.

The beauty is you get the exact functionality you're coding for, but without the debugging headaches when you want to make it look nice or when themes behave unexpectedly: https://apps.shopify.com/weario