How to Show Coupons on Collection Pages

Method 1: Automatic Setup (Recommended)

This is the easiest way to enable collection page coupons and works out of the box on most modern themes.

1. Enable Collection Page Coupons

Go to your Klip Dashboard:

• Open a coupon or create a new one
• Click Coupon design, the third step in the step bar at the top, then select Collection page badge under Customize style
• Enable Show coupon badge on collection page

2. Enable Dynamic Compatibility (Recommended)

To ensure best compatibility across themes:

• Go to Klip Settings
• Navigate to Advanced Settings
• Scroll to Buy Now Compatibility
• Click Regenerate token

3. Verify on Collection Page

Visit your store’s collection page and check if coupons appear next to eligible products.

Method 2: Manual Setup (Theme Code Installation)

1. Create or Edit a Coupon

• Go to your Klip Dashboard
• Either create a new coupon or click on a coupon name to edit an existing one.

2. Navigate to the Coupon Design Section

• Click Coupon design, the third step in the step bar at the top of the coupon settings, then select Collection page badge under Customize style.

3. Enable the Collection Page Setting

• Enable the Show coupon badge on collection page option. This setting will allow your coupons to appear on the collection page.

4. Backup Your Theme

• Before making any changes to your theme, it's highly recommended to create a backup. Go to your Shopify Admin, click Online Store in the left menu, click the … button next to Edit theme on your live theme (the store preview at the top), and select Duplicate (not Duplicate in Canvas). This will create a backup copy of your theme that you can revert to if needed.

5. Edit Your Theme Code

• In Online Store, click the … button next to Edit theme on the theme you want to edit.
• Select Edit code to open the theme code editor.

6. Create a New Snippet

• In the left sidebar, find the Snippets folder and click on Add a new snippet.

• Name the snippet elsklip_collection_block and paste the following code into the snippet file:

{% if product %}
  {%- capture klip_product_json -%}
  {
    "{{ product.id }}": {
      "id": {{product.id}},
      "collectionIds": [
        {% for c in product.collections %}
          {{c.id}}{% unless forloop.last %},{% endunless %}
        {% endfor %}
      ],
      "tags": {{ product.tags | json }},
      "variants": {{ product.variants | json }}
    }
  }
  {%- endcapture -%}

  <div class="elsklip-coupon-box"
       data-product-id="{{ product.id }}"
       {% if short %}data-short{% endif %}
       data-klip-product="{{ klip_product_json | escape }}">
  </div>
{% endif %}

• Save the snippet file.

7. Add the Snippet to Your Product Cards

Locate the file responsible for rendering product items on collection pages. Common file names include:

• snippets/product-card.liquid
• snippets/product-grid-item.liquid
• snippets/product-loop.liquid
• snippets/card.liquid

Open the file and add the snippet that you've created on the previous step above the code that is responsible for the product price output.

{% render 'elsklip_collection_block', product: card_product, short: true %}

For example, for the Dawn theme you would need to open the file snippets/card-product.liquid and the code snippet would be added in the following way:

Add the above code before this line:

{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}

or

{% render 'price', product: card_product, price_class: '' %}

8. Theme-Specific Adjustments

• The exact file names and structure may vary depending on your theme. If the instructions above don’t work with your theme, please feel free to reach out to our support team for assistance.

9. Change Coupon Alignment (Optional)

• Go to Klip Settings
• Navigate to Collection Page
• Select the badge alignment position

10. Verify the Coupon on the Collection Page

• Navigate to your store’s Collection Page.
• Check that the coupon badge appears next to each product where it applies.

Additional Tips

See also

• How to Show Multiple Coupons on Collection Pages
• How to Apply Coupons Automatically from Collection Pages
• How to Display Cross-Out Pricing on Collection Pages
• How to Enable Coupons in Quick View Modals
• How to Customize the Collection Page Badge Design

Updated on: 10/11/2026