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. The name of the file will usually be one of the below:
    • layout/product-grid-item.liquid
    • snippets/product-card-grid.liquid
    • snippets/product-card-list.liquid
    • snippets/product-price-listing.liquid
    • snippets/product-gridcard.liquid
    • snippets/product-list.liquid
    • snippets/product-grid.liquid
  • If you can't find the file, email us and we're happy to 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="appattic_price_app_coll appattic_price_app_coll-{{ product.first_available_variant.id }}" data-id="{{ product.first_available_variant.id }}" data-price="{{ product.variants[0].price | divided_by:100.00  }}" data-app_product_id={{product.id}} data-variants='{{product.variants | json}}'></div>