How To Add Unit Prices on Collection Pages

This is a basic walkthrough on how to modify your theme to show the unit prices for products on the Collection Pages.


Important Note: If you have a theme developer, we recommend having them do this. If you don't, contact us and we'd be happy to do it for you.

  • Open your theme code
  • Under the "Actions" menu, click "Edit code"
  • Open the product grid item file. It's usually called "product-card-grid.liquid" or "product-grid-item.liquid" (if you can't find the file, email us and we can help)
  • Find the line of code displaying the price. It's usually similar to the code below (the actual code varies from theme to theme)
{% include 'product-price', variant: product %} or {{ product.price | money }}
  • After that line of code, paste the code below. (it's important to paste the code in the right location, as that is where the price-per-unit will be displayed)
<div class="price-per-unit-insert" data-product="{{ product.first_available_variant.id }}"></div>