Collection page

This guide explains how to show the final discounted price on collection pages, featured products, or anywhere products are rendered as cards—instead of Shopify’s default price.

What this setup does

By default, many themes show the original product price, even when discounts apply. This setup replaces that with the actual final price the customer will pay, including discounts created via Dollarlabs.

The pricing is handled by JavaScript, so your theme does not need updating every time the app changes.

---

Step 1: Add the Price Snippet

Create a new file in the snippets folder of your Shopify theme.

snippets/dollarlabs-collection-price.liquid

Paste the provided snippet code into this file.

This snippet:

• Outputs a lightweight HTML container

• Passes product & pricing data as data-* attributes

• Leaves the actual price rendering to the Dollarlabs app embed (JavaScript)

---

Step 2: Replace Your Theme’s Price Render

Find where your theme renders prices (usually price.liquid or similar).

Instead of rendering the theme’s default price markup, replace it with:

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

That’s it.

When this snippet is active:

• The default Shopify price is skipped

• Dollarlabs fills in the final discounted price dynamically

---

Important Prerequisite

Make sure the Dollarlabs Collection Pricing app embed is enabled in the theme editor.

This embed:

• Calculates discounts

• Updates prices dynamically

• Ensures prices stay correct without theme updates

---

Configuration Options Explained

These options control how prices are displayed. They are passed as data-* attributes in the snippet.

show_original_price

What it does: If enabled, and the product is discounted, the original price is shown as a strike-through.

Use this if: You want customers to clearly see the discount applied.

---

show_compare_at_price_for_non_discounted

What it does: If enabled, shows the compare-at price as a strike-through even when the product is not discounted.

Use this if: You want to show perceived savings or MSRP-style pricing.

---

data-show-currency-code

What it does: Displays the currency code (e.g. USD, INR, EUR) next to the price.

Use this if: You sell internationally or want to avoid currency confusion.

---

data-currency-code-position

What it does: Controls where the currency code appears.

Values:

• left → USD 700

• right → 700 USD

---

Why This Approach?

• No theme re-deploys when pricing logic changes

• Faster price updates using JavaScript

• Centralized logic handled by the app embed

• Safer for theme upgrades

---

Need Help?

This setup requires a basic understanding of Shopify themes. If you’re unsure where to place the snippet or how to replace your theme’s price rendering, reach out via chat or email — we’re happy to help.