Articles on: Design & Display

Installing Klip Coupons on Vintage (Online Store 1.0) Themes

Shopify 1.0 themes require some additional steps for integrating Klip Coupons, particularly for adjusting coupon placement. Follow the steps below to ensure your coupons appear correctly on your product pages.

1. Back Up Your Theme

Before making any changes, duplicate your theme to create a backup. In Shopify admin, click Online Store, click the … button next to Edit theme on your live theme, and select Duplicate (not Duplicate in Canvas). This ensures you can easily revert any changes if needed.

Duplicate in the theme's menu in Online Store

2. Edit the Code of the Backup

Under Draft themes, find your copy, click its … button, and select Edit code to open the theme files.

Edit code in a draft theme's menu

3. Locate the Product Page File

Depending on your theme, the product page file may be named product.liquid, product-template.liquid, or similar. Use the search bar to find the correct file.

4. Insert the Coupon Short Code

Place the following short code in the desired location within the product page file. This is where the coupon will appear.

<div class="elsklip-coupon-box"></div>

5. Position the Coupon Below the Price

In this example, the code is placed below the product price. You can use Ctrl + F to search for keywords like “price” in the file to find the right placement.

6. Save Your Changes

Once you've placed the code in the desired location, save your changes and preview your product page to ensure the coupon appears as expected.

Additional Tips

Test the Placement: After saving your changes, preview your product pages to ensure the coupon is displayed in the correct position.

Check Compatibility: Some older themes may have different file structures, so the placement might vary. If you encounter issues, try different positions in the code or reach out for help via Live Chat.