showing per unit prices on your Shopify Collections pages is now possible.


below is a quick how-to guide to setting up the BETA version of this feature.


1. uninstall / reinstall the app


if you installed Unit Pricing after March 6, 2017, skip this step!


if you installed Unit Pricing before March 6, 2017, you'll need to delete the app from your store, wait around 30 seconds, then install again here: 

Unit Pricing for Shopify


all of your existing data will be preserved, and this fresh install will include "theme/asset" access, which was not previously part of the permissions package.


2. open your theme


from your admin dashboard, click Online Store then 'Edit HTML/CSS' of your published theme:


Shopify Unit Pricing Snippet


open the folder called "Snippets" on the left side.


you should see a file called "product-loop.liquid" -- click on this.


Shopify Unit Pricing Theme File


note: if you don't see the "product-loop.liquid" file, or the {{ product.price | money }} code, don't worry! just email us (ryan@usefomo.com) and we'll take care of it for you.


3. plant a snippet of code


on the right side of the screen, find this line of code:


{{ product.price | money }}


then, directly after that line of code, paste this:


{% capture the_snippet_content %}{% include 'unit_pricing' %}{% endcapture %}

{% unless the_snippet_content contains "Liquid error" or template == "product" %}
  {% include 'unit_pricing' %}
{% endunless %}


your new code will look like this:


... (stuff here)

{{ product.price | money }} 
{% capture the_snippet_content %}{% include 'unit_pricing' %}{% endcapture %}
{% unless the_snippet_content contains "Liquid error" or template == "product" %}
  {% include 'unit_pricing' %}
{% endunless %}

... (more stuff here)


4. you're done!


unit prices should now appear on your Shopify Collections pages.



note: this will inherit default styles from your shop.


If you need to tweak how this looks, whether it's the colors or size or placement of your unit prices, let us know and we'll send copy/paste CSS styles to get it just right.


example implementation


below is our fake shop with NO styling applied. about 5 products in this Collection have per-unit prices:

https://notifications.myshopify.com/collections/all


(these per-unit prices are on separate lines. a real shop might prefer them on the same line, or in a different font, etc)