How to Show Coupons on Collection Pages

You can display your coupons directly on collection pages to showcase discounts to customers as they browse through your product collections. Follow the steps below to set this up:

1. Create or Edit a Coupon

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

2. Navigate to the Coupon Design Section

Scroll down to the Coupon Design section in the coupon settings.

3. Enable the Collection Page Setting

Enable the Show coupon label 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, navigate to Online Store > Themes, click on the “Actions” dropdown for your current theme, and select Duplicate. This will create a backup copy of your theme that you can revert to if needed.

5. Edit Your Theme Code

Navigate to Online Store > Themes, and click on the “Actions” dropdown for 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.liquid and paste the following code into the snippet file:

{% if product %}
  <div class="elsklip-coupon-box" data-product-id="{{ product.id }}" {% if short %} data-short {% endif %}></div>
  <script>
    if(window.KLIP_APP_DATA && window.KLIP_APP_DATA.products){
      window.KLIP_APP_DATA.products = {
        ...window.KLIP_APP_DATA.products,
        "{{ 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 }}
        }
      }
    }
  </script>
{% endif %}

7. Add the Snippet to Your Product Cards

Open the snippets/card-product.liquid file (or the equivalent file in your theme that controls the product display in collections).
Add the following line of code before the price rendering line:

{% render 'elsklip_collection_block', product: card_product, short: true %}
Place this code before the following line:
liquid
Copy code
{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}

This will ensure that the coupon box appears along with each product on the collection page.

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. Verify the Coupon on the Collection Page

Go to your store’s collection page and verify that the coupon is visible. It should appear next to each product that the coupon applies to.




Additional Tips

Test Before Going Live: Use the theme preview to check that everything is working correctly before making your theme live.
Clear Cache: If you don’t see the coupon after making these changes, try clearing your browser cache or testing in an incognito window.
Contact Support: If you encounter any issues or need help customizing the coupon appearance, feel free to reach out to our support team.

Updated on: 21/09/2024