Show unit price on collection page - Symmetry theme

Store Design
,
1

Hi

We are a wholesaler, and the prices displayed are the pack prices.

I would like to show the unit prices below the original price, but only on the collection page.

I was able to add a custom liquid to the product page, and it worked, but the collection page doesn’t allow me to add custom liquid directly.

The following code is the one that I put to the product page custom liquid.

{% comment %}
Custom code for displaying price based on size and calculating unit price.
{% endcomment %}

{%- assign variant = current_variant | default: product.variants.first %}
{%- assign price = variant.price | default: 1999 %}
{%- assign size_value = variant.options[1] %}

{%- assign total_units = 0 %}

{%- if size_value == “S-M-L-XL(2-2-2-2)” -%}
{%- assign total_units = 8 -%}
{%- elsif size_value == “S-M-L(2-2-2)” -%}
{%- assign total_units = 6 -%}
{%- elsif size_value == “1X-2X-3X(3-2-1)” -%}
{%- assign total_units = 6 -%}
{%- elsif size_value == “XS-S-M-L(1-2-2-2)” -%}
{%- assign total_units = 7 -%}
{%- elsif size_value == “XS-S-M-L-XL(1-2-2-2-1)” -%}
{%- assign total_units = 8 -%}
{%- elsif size_value == “S-M-L-XL(1-2-2-1)” -%}
{%- assign total_units = 6 -%}
{%- elsif size_value == “ONE SIZE(6)” -%}
{%- assign total_units = 6 -%}
{%- elsif size_value == “S/M-M/L(3-3)” -%}
{%- assign total_units = 6 -%}
{%- elsif size_value == “XS-S-M-L(1-2-2-1)” -%}
{%- assign total_units = 6 -%}
{%- elsif size_value == “S/M-M/L-L/XL(2-2-2)” -%}
{%- assign total_units = 6 -%}
{%- endif %}

Unit Price: {%- if total_units > 0 -%} {%- assign unit_price = price | divided_by: total_units -%} {%- if show_currency_code -%} {{ unit_price | money_with_currency }} {%- else -%} {{ unit_price | money }} {%- endif -%} {%- else -%} {%- if show_currency_code -%} {{ price | money_with_currency }} {%- else -%} {{ price | money }} {%- endif -%} {%- endif -%}

Product Page:

Screenshot 2025-01-29 at 1.22.10 PM.png
Screenshot 2025-01-29 at 1.22.10 PM.png2578×1374 372 KB

2

Hi @JunNa ,

This code needs to be alter according to the collection card so that it display units price over there. Do let me know if you need further help.

Thanks

3

Hi, thank you!

How can I display the unit prices on the collection page the same way as on the product page?

1 Like
4

@JunNa

Yes almost you have to find the correct file. Do you uave knowledge of code?

5

I am not an expert but I know how to edit code.

6

Ok then in the loop products card paste above code and test it. The file might be in the snippet folder with name product card liquid

7

Hi Thank you

But there is Product card liquid in the snippet folder with my Symmetry theme.

Is there any other way?

Thank you

8

@JunNa

I have to look into it. Is it possible?

Thanks

9

Sure.

What kind of information do you need?

Thank you

10

@JunNa just sent you details

11

Hi @JunNa !

Instead of hunting through theme files and modifying Liquid code, you might want to consider using an app as a simpler alternative.

Our app Weario handles exactly this scenario without needing to modify theme files. While it’s primarily designed for fashion brands showing “per wear” pricing, the labels are fully customizable so you can display a “per unit” price for your wholesale packs.

For your complex pack configurations:

  • Set up Product Sets for each pack type (S-M-L-XL(2-2-2-2) = 8 units, etc.)
  • Configure the label to show “per unit”
  • App embed blocks work on collection pages
  • Displays the calculated unit price below your pack price automatically

The advantage is you avoid the complexity of:

  • Finding the right theme files in Symmetry
  • Duplicating your complex Liquid logic across multiple files
  • Maintaining custom code when themes update
  • Debugging collection page vs product page differences

Since you already have the unit calculations working on product pages, this would give you the same functionality on collection pages with much less technical complexity.

https://apps.shopify.com/weario

Perfect for wholesale scenarios where customers need to understand per-unit value while browsing collections!