Articles on: Getting Started

Installing Klip Coupons on Custom Page Builders

In this guide, we’ll show you how to install Klip Coupons using a page builder. While page builders can differ, the process of adding custom HTML or Liquid code is similar across most platforms. For this example, we’ll use PageFly to demonstrate the steps

1. Open the Page You Want to Edit

Select the page you want to edit or create a new one in PageFly.

2. Add an HTML/Liquid Element

Click on the "Elements" icon (second from the top on the left toolbar).
In the PageFly tab (or other page builder app), choose the HTML/Liquid element.

3. Drag and Drop the Element

Drag the HTML/Liquid element into the page editor and place it where you want the Klip Coupon to appear.

4. Open the Code Editor

Select the HTML/Liquid element you just added.
Click “Open code editor” to access the element’s code editor.

5. Add the Klip Coupon Code

Paste the following code into the editor:

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

Click Done to save the code inside the element.

6. Save and Publish Your Page

After closing the code editor, click Save in PageFly to save the page changes.
Click Publish to make the page live.

7. Test the Coupon Display

Open your live page in a browser.
Verify that the Klip Coupon appears in the correct location.

Additional Tips

Multiple Pages: Repeat these steps on any other pages where you want coupons displayed.

Other Builders: If you’re using a different page builder, look for elements labeled HTML, Custom Code, or Embed—the steps are very similar.

Placement Adjustments: You can drag the HTML/Liquid element to adjust where the coupon appears on the page.

Updated on: 16/12/2025

Was this article helpful?

Thank you!