Collection page

Correct prices on collection pages, search results and anywhere products render as cards — automatically on most themes, with a snippet for the rest.

Product cards are drawn by your theme, so they show Shopify's catalog price by default. The Collection Pricing app embed updates supported cards on collection pages, search results and featured-product sections.

Step 1: enable the app embed

1. Online Store → Themes → Customize.

2. Open App embeds in the sidebar.

3. Enable Collection Pricing.

4. Save.

Nothing on this page works until the embed is on. If you follow the snippet route below without enabling it, you will remove your theme's price and get nothing in its place.

The embed and automatic rewriting have separate switches. Keep the embed enabled when using custom SDK prices.

Step 2: pick an approach

There are two, and most stores need only the first.

Automatic — most themes

The embed's Rewrite theme product cards automatically setting is on by default. It finds product cards in your theme, locates the price element, and replaces it with the buyer's price.

For most themes that is all you need. Enable the embed, load a collection page as a tagged customer, and check the prices.

Setting	What it does	Default
Rewrite theme product cards automatically	Show B2B prices on collection and search cards for themes without an explicit price hook.	on

Because it works by inspecting your theme's markup, it is best-effort. Heavily customised themes, unusual card layouts or price markup that does not look like a price can defeat it. If some cards update and others do not, use the snippet.

Signed-out collection card: (1) the $18 Shopify catalog price; (2) the $16 Default price configured in the app. A signed-in buyer with a matching customer column may see a different price.

Explicit — the snippet hook

The reliable route: tell us exactly where the price goes, instead of letting us find it.

1. Create the snippet

Create snippets/dollarlabs-collection-price.liquid in your theme and paste this in:

snippets/dollarlabs-collection-price.liquid

{%- comment -%}
  Dollarlabs Price Display
  Renders an empty container; the app embed fills in the price.
{%- endcomment -%}

{%- liquid
  assign current_variant = product.selected_or_first_available_variant
  assign original_price = current_variant.price
  assign variant_id = current_variant.id
  assign show_original_price = show_original_price | default: false
  assign show_compare_at_price_for_non_discounted = show_compare_at_price_for_non_discounted | default: false
-%}

<div
  class="dollarlabs_pricelist--product_price"
  id="dollarlabs_pricelist--product_price-{{ section.id }}-{{ variant_id }}"
  data-variant-id="{{ variant_id }}"
  data-original-price="{{ original_price }}"
  data-show-original-price="{{ show_original_price }}"
  data-show-compare-at-price="{{ show_compare_at_price_for_non_discounted }}"
  data-compare-at-price="{{ current_variant.compare_at_price | default: 0 }}"
  data-show-currency-code="false"
  data-currency-code-position="left"
  data-custom-price-js
>
  {%- comment -%}Content will be populated by JavaScript{%- endcomment -%}
  <span class="dollarlabs_pricelist--loading"></span>
</div>

2. Render it instead of your theme's price

Find where your theme draws a card price — usually price.liquid, product-card.liquid, card-product.liquid or similar — and replace that price markup with:

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

Replace, don't add. Leaving the theme's own price in place is what produces two prices or a flicker.

What the attributes do

The container is empty on purpose — the app embed finds it and fills it in. data-custom-price-js is what marks it as ours; the rest configure the display:

Attribute	Purpose
data-custom-price-js	Marks the container as ours to fill. Required.
data-variant-id	The variant to price.
data-original-price	The catalog price, in cents.
data-compare-at-price	The compare-at price, in cents.
data-show-original-price	true / false — strike through the original when discounted.
data-show-compare-at-price	true / false — strike through compare-at when there is no discount.
data-show-currency-code	true / false.
data-currency-code-position	left or right.

The snippet above ships with currency code off and position left. Change those two lines directly if you sell internationally.

You can also pass the display options in per render, which is useful when collection cards and search results should behave differently:

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

The embed only fills containers it has not already handled, so an explicit hook takes precedence over the automatic rewrite. You can use the snippet on templates that need it and leave the rest to the automatic path.

Leave selected cards alone

If your code renders a price, put data-custom-price on that card or its price wrapper. The automatic rewriter leaves that element and its descendants alone:

<article data-custom-price>
  <!-- Your card and your own price renderer -->
</article>

This attribute does not calculate a price. Use the storefront SDK for your renderer. Do not confuse it with data-custom-price-js, which asks the app to fill the explicit price hook above.

If all your cards use your own renderer, turn Rewrite theme product cards automatically off. Keep Collection Pricing enabled so its SDK and explicit price hooks still load.

The automatic path also watches newly added card markup and theme section loads. Test quick views, filters and pagination separately because they may use different templates.

Step 3: test

As a tagged customer, check:

• a collection page

• search results

• featured products or product carousels on the homepage

• related products on a product page

These often use different partials, so one can be right while another is wrong.

Then check as an untagged or signed-out customer: the Default price when configured, otherwise the catalog price. Check for flicker and duplicated prices.

Common problems

Prices don't change anywhere. The app embed is off, or the price list is disabled.

Some cards update, others don't. The automatic rewrite could not find the price in those layouts. Add the snippet to the partial that draws them.

Two prices show, or the price flickers. Your theme's price is still rendering alongside ours. If you added the snippet, make sure you replaced the theme's price output rather than adding to it. Coming from another pricing app, check for leftover theme code.

Prices are right on collections but wrong on the product page. That is a different block — see Product page.

After theme changes

Repeat these checks after a theme upgrade. Automatic rewriting depends on the theme’s markup, and a custom price hook must remain in the card snippet. For case orders, compare the cart against the full case-and-loose calculation rather than multiplying the displayed case-tier unit price by every unit.