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

{% embed url="<https://dollarlabs.neetorecord.com/watch/d54f9e8ce8f0a945a510>" %}

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

<https://pastefy.app/w0uaS2HA>

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:

```liquid
{% 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.