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:
Go to your Klip Dashboard
Either create a new coupon or click on a coupon name to edit an existing one.
Scroll down to the Coupon Design section in the coupon settings.
Enable the Show coupon label on collection page option. This setting will allow your coupons to appear on the collection page.
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.
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.
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:
Save the snippet file.
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.
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:
or
Note: This step may vary depending on your theme. Different themes render products on collection pages differently. Please contact us if your theme has different file names or you can not find a place where to render the coupons.
Note: Sometimes the product variable that needs to be passed to the snippet is not "card_product" and must be adopted according to the context in your theme.
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.
Navigate to your store’s Collection Page.
Check that the coupon badge appears next to each product where it applies.
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.
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
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 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 %}
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: '' %}
Note: This step may vary depending on your theme. Different themes render products on collection pages differently. Please contact us if your theme has different file names or you can not find a place where to render the coupons.
Note: Sometimes the product variable that needs to be passed to the snippet is not "card_product" and must be adopted according to the context in your theme.
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
Navigate to your store’s Collection Page.
Check that the coupon badge appears next to each product where it applies.
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: 22/11/2024
Thank you!