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.

---

🧩 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

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:

{% 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!

---

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