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

On this page:

Landing page builders

• Compatible page builders
• Using page builders with Downpay
• 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

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.

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.

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

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

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.

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

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>

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

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

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.

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

Jump to top

Updated on: 13/01/2025