Display Price Per Unit on the Collection Page

Welcome to our comprehensive guide on displaying unit prices on your collection pages! Each Shopify theme has its unique design, which means that the positioning of the price code may differ from theme to theme. This guide will specifically focus on the Dawn theme, providing you with step-by-step instructions.

• In your Shopify admin, navigate to the Sales Channels section and select Online Store. Next to the Customize button, click on the three small dots and select Edit Code. This will open your theme’s code editor.

• In the Edit Code section, scroll to find the Snippets folder on the left-hand panel. Locate the file named card-product.liquid, as we are using the Dawn theme, and open it. However, depending on your theme, this file might have a different name. Some themes use product-item.liquid, collection-item.liquid, or grid-item.liquid instead. Check for one of these files, as they serve a similar purpose in handling product displays on collection pages.

• Now that you’ve located and opened the card-product.liquid file (or an equivalent file like product-item.liquid, collection-item.liquid, or grid-item.liquid), the next step is to search for the specific piece of code responsible for displaying product prices. To do this, scroll through the file carefully or use the search function (Ctrl + F or Command + F on Mac) to locate the following code snippet:

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

This line of code is responsible for rendering the product’s price. If you want to modify how the price appears on your product cards, this is where you can make those adjustments.

• Right after the price code, paste the following snippet to display unit prices for all products on the collection page:

  
  

<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>

Click Save in the code editor. Go to your store’s collection pages and check if the unit prices are displaying correctly.

If you need to make any changes based on the points mentioned below, simply update the relevant code inside this section:

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

To hide prices for out-of-stock items:

<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>

To show the unit price of the last variant instead of the first:

<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>

If you encounter issues while implementing these changes, don’t worry—we’re here to help! Different themes may have varying structures or custom codes that can affect unit price displays. If prices don’t appear correctly after saving, try refreshing your page or clearing your browser cache. If the issue persists, ensure the snippet is in the correct product loop and doesn't conflict with existing theme formatting. Some themes might require minor code adjustments for seamless integration. We’re committed to helping you set everything up so customers can see accurate unit prices on collection pages. Our priority is your success, and we aim to smooth the process!