> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://docs.downpay.app/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Setting up landing page builders with Downpay

This guide will help you set up your landing page builder with Downpay.
---
---

###### On this page:

[Landing page builders](#1-landing-page-builders)
* [Compatible page builders](#2-compatible-page-builders)
* [Using page builders with Downpay](#2-using-page-builders-with-downpay)
* [Setup for eComposer](#2-setup-for-ecomposer)

# Landing page builders

You can use most page builders with Downpay and it is easier to set up if your page builder is able to export their template into the Shopify theme editor. 

## Compatible page builders

| We are constantly testing apps for compatibility and adding them to this [page](https://getdownpay.com/shopify-downpay-app-compatibility-list/).

Some compatible page builders include but are not limited to:

* Gem Pages
* Page Fly
* Zipify
* eComposer

---
---

## Using page builders with Downpay

To enable landing page builders with Downpay:

1. Create your templates in your page builder and publish them. If you are able to publish the template to the Shopify theme editor, do so as well.

2. Add a liquid block (custom code) to your template where you'd like the Downpay block to appear. Use the identifier **downpay** for a new class. In this case, we're using GemPages v7, yours might look a little different depending on the page builder app you're using.

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/2-adding-downpay-class-to-gemp_13957my.png)

3. Downpay will allow you to place it's block relative to a unique HTML element. By using **downpay** in step 2 we've created that unique element.

4. Open the Shopify theme editor and navigate to the embeds section and toggle the Downpay product embed on. If it is missing, please reach out to us and we will add it for you.

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot2024-05-09at95131-am_1oafro.png)

5. Click into the Downpay Product embed and scroll down to **HTML element to insert relative to** and type in **.downpay**.

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot2025-01-13at95848-am_g5jp7w.png)

6. Use **Insert position** to adjust the position of the Downpay block and click save.

7. Refresh the page in your browser or preview it in the Shopify theme editor and adjust placement as needed.

---
---

[Jump to top](#6-on-this-page)


## Setup for eComposer

Here is an example of how to set up eComposer to support Downpay

1. Check to see if your store has the Downpay Product Embed in your theme editor. If it does not, contact us and we will enable it for you.

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2025-01-10-at-13085_17ul87o.png)

2. In the eComposer page, go to the Elements, select Shopify, and choose the Code widget.

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2025-01-10-at-12550_2n6eib.png)

3. Drag the new code block to where you want it on the page, typically we recommend above the add to cart button, or similar area.

4. Edit the code block by double-clicking and paste the following code:

```
`<div class = "downpay"></div>
```

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2025-01-10-at-12544_1w2t5hr.png)

5. Click `Save and publish`.

6. Navigate to the Shopify theme editor for your theme and sleect the page template from the dropdown under `Products`

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2025-01-10-at-13014_s5l9ls.png)

7. Select the `App Embeds` Menu on the left hand navigation and turn on `Downpay Product`.

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2025-01-10-at-13085_6hugn7.png)

8. Click into the `Downpay Product` Embed and scroll down to the `HTML element to insert relative to` and paste `.downpay` to match the code block in eComposer. The `.` before `downpay` above is important to include. Further customize placement by choosing `Insert position` to insert above of below the code block we added.

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2025-01-10-at-12544_18hvg4g.png)

9. Review your landing page and click `Save` once you are happy with the placement.

![](https://storage.crisp.chat/users/helpdesk/website/81f235024a249800/screenshot-2025-01-10-at-13104_f27m0v.png)

---
---

[Jump to top](#6-on-this-page)