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.variants[0].id }}" data-id="{{ product.variants[0].id }}" data-price="{{ product.variants[0].price | divided_by:100.00  }}" data-app_product_id={{product.id}} data-variants='{{product.variants | json | escape}}'></div>

• If you don't want to show out-of-stock prices:

<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 | escape}}'></div>

• If you prefer showing the unit price of the last variant, rather than the first one, please use the alternative code:

<div class="appattic_price_app_coll appattic_price_app_coll-{{ product.variants.last.id }}" data-id="{{ product.variants.last.id }}" data-price="{{ product.variants.last.price | divided_by:100.00 }}" data-app_product_id={{product.id}} data-variants='{{product.variants | json | escape}}'></div>