How to add a Coupon to a Collection Page

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



Go to the Coupon Design section



Enable the Show coupon label on collection page setting



Make a backup for your current theme



Navigate to Online store -> Themes -> Edit code of the theme you want to edit



Create a new snippet elsklip_collection_block.liquid





Insert the code snippet below into the newly created snippet:

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

Open the snippets/card-product.liquid file and add the line

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

before

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

This step may vary depending on the theme. If you run into any issues with this part on your theme, feel free to reach out for assistance.

Now your coupon preview should be showing on the collection page.

Updated on: 02/09/2024