> For the complete documentation index, see [llms.txt](https://help.dollarlabs.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.dollarlabs.io/dollarback-store-credit/show-rewards/collection-page.md).

# Collection page

You can now display your cashback offers directly on your **collection pages** — right next to your products — so customers can instantly see the cashback value they’ll earn.

Since Shopify doesn’t allow app blocks on collection pages, this setup involves **adding a small code snippet** to your theme files. Don’t worry — we’ll guide you through it step-by-step.

{% hint style="warning" %}
This touchpoint doesn't support tiers = enabled just yet and can only be used for when you are using the app in tier = off mode
{% endhint %}

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

***

### 🧩 Before You Begin

* Make sure your cashback configurations are already set up in the **Dollarback app**.
* This method requires **editing your theme code**, so we recommend **duplicating your live theme** first to test the changes safely.

***

### ⚙️ Step 1: Create the Snippet

1. From your Shopify admin, go to **Online Store → Themes**.
2. Click **Edit code** on the theme you want to modify.
3. In the **Snippets** folder, click **Add a new snippet**.
4. Name it:

   ```
   dollarback-collection.liquid
   ```
5. Paste the code provided in [this link](https://pastefy.app/Cr2OJcST)
6. Click **Save**.

This snippet is responsible for showing the cashback block — e.g.,

> “Earn $X in store credit (10%)”

***

### 🧭 Step 2: Find Your Product Card Template

Next, you’ll need to locate where your **product cards** are being rendered from on the collection page. This step can vary slightly depending on your theme.

1. Open your collection page in your browser.
2. Right-click on a product and select **Inspect**.
3. Look for elements like `.product-card`, `.product-grid-item`, or `.card__price`.
4. In your theme code, search for these files under templates such as:
   * `collection.liquid`
   * `product-card.liquid`
   * `main-collection-product-grid.liquid`

You’ll usually find the card structure inside a file like:

```
sections/main-collection-product-grid.liquid
```

or

```
snippets/product-card.liquid
```

Once you locate it, scroll to the bottom of the product card markup.

***

### 🧾 Step 3: Add the Cashback Snippet

Before the `</div>` (or `{% endrender %}`) that closes the product card, add this line:

```liquid
{% render 'dollarback-collection', product: product %}
```

This ensures the cashback offer only appears on collection pages.

***

### 🔍 Step 4: Test and Verify

1. Click **Save**.
2. Open your **collection page** and **hard refresh** (Ctrl + Shift + R / Cmd + Shift + R).
3. You should now see the cashback text block appear below each product.

If you don’t see it, double-check that:

* The snippet name matches exactly (`dollarback-collection.liquid`).
* The snippet was added inside the correct product card layout.

Here's how it looks like on my theme after everything is setup!

<figure><img src="/files/1Qa2Lb9uRo0nYteJTvIV" alt=""><figcaption></figcaption></figure>

***

### 🧠 Tips

* You can reposition the cashback text by moving the `{% render %}` line near the price or title — but avoid placing it inside `price.liquid`, as that component is reused across multiple pages.
* Keep changes in your **duplicate theme** until you’re satisfied, then publish it.

***

### 💬 Need Help?

If this feels a bit too technical — no worries!\
Reach out to our support team, and we can help you integrate the snippet safely into your theme.