Show Discounted Prices on Collection page

By default, Shopify only shows the standard product prices on collection pages and search result pages. If you’re using Price List v2, you may want your customers to see the final discounted prices directly on these pages — not just on the product page.

This same tutorial will also work for displaying the correct prices on the suggested products page, search results page etc!

This guide walks you through setting it up step by step.

Step 1: Locate the render 'price' in Your Theme

  1. Open your Shopify theme code editor.

  2. Search for render 'price' or something similar that renders the price on collection pages

  3. You should find it inside a file such as price.liquid or similar, depending on your theme.

⚠️ Each theme is slightly different. In most cases, collection pages are rendered directly by Liquid, so unlike product pages, you can’t simply add an app block here.

Step 2: Create a New Snippet

  1. In the Snippets folder of your theme, create a new file called:

    dollarlabs-script.liquid

  2. Copy and paste the snippet code provided here

  3. Go to your store's theme.liquid file and paste the below line anywhere before </head> 

    {% include 'dollarlabs-script' %}

  4. Create a new file under snippets and name it dollarlabs-collection-price.liquid

  5. Paste the following code inside this file and save it.

  6. Create another file under the assets section and name it dollarlabs-pricing.js

  7. Copy and paste the following code inside this file and save it

  8. Go to your store's theme.liquid file and paste the below line anywhere before </head> 

    <!-- Publish Shopify money format to JS -->
<script>window.DollarlabsCurrencyFormat = {{ shop.money_format | json }};</script>

<!-- Load the global pricing runner -->
<script src="{{ 'dollarlabs-pricing.js' | asset_url }}" defer></script>

  9. No further changes are required.

Note that you can set the below variables in dollarlabs-collection-price.liquid to "true" and the currency-code-position to either "left" / "right" based on whether you want to show the currency code on the collection page to the buyer. data-show-currency-code="false" data-currency-code-position="left"

Step 3: Update price.liquid

  1. Go back to the file where you found render 'price' (usually price.liquid).

  2. Comment out or remove the existing render 'price' block.

  3. Replace it with the following snippet call 

    {% render 'dollarlabs-collection-price', product: product_resource  %}

    ✅ Important: Make sure you pass the correct product variable - in my case product_resource instead of just product.

Step 4: Save and Verify

  1. Save your changes.

  2. Go to your storefront and check a collection page or search results page.

  3. You should now see the correct discounted prices for each product.

To double-check:

  • Add a product to cart and confirm the cart price matches the discounted price displayed on the collection page.

Common Issues

  • All products showing the same price: This usually happens if product is passed instead of product_resource. Update it to the right variable used in your form, in my case it is product_resource.

  • Theme variations: Some themes may name or structure files differently. Look for similar naming like price, card-price, or product-price.

Need Help?

If you run into issues while editing your theme, reach out to our support team. We’ll be happy to implement this for you.

PreviousShow discounted price on Product pageNextQuick order form

Last updated