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 more than happy to do it for you.

Each theme is different and the exact location where the price code should be placed is going to be different.

Below are the instructions for the Dawn theme:

• Navigate to your store's active theme
• Under the "Actions" menu, click "Edit code"
• Locate the file snippets/card-product.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)

{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}

• After that line of code, paste the code below:

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