Setting up landing page builders with Downpay
This guide will help you set up your landing page builder with Downpay.
Landing page builders
Compatible page builders
Using page builders with Downpay
Setup for eComposer
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.
We are constantly testing apps for compatibility and adding them to this page.
Some compatible page builders include but are not limited to:
- Gem Pages
- Page Fly
- Zipify
- eComposer
To enable landing page builders with Downpay:
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.
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.
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.
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.
Click into the Downpay Product embed and scroll down to HTML element to insert relative to and type in .downpay.
Use Insert position to adjust the position of the Downpay block and click save.
Refresh the page in your browser or preview it in the Shopify theme editor and adjust placement as needed.
Jump to top
Here is an example of how to set up eComposer to support Downpay
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.
In the eComposer page, go to the Elements, select Shopify, and choose the Code widget.
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.
Edit the code block by double-clicking and paste the following code:
Click Save and publish.
Navigate to the Shopify theme editor for your theme and sleect the page template from the dropdown under Products
Select the App Embeds Menu on the left hand navigation and turn on Downpay Product.
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.
Review your landing page and click Save once you are happy with the placement.
Jump to top
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
We are constantly testing apps for compatibility and adding them to this page.
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:
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.
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.
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.
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.
Click into the Downpay Product embed and scroll down to HTML element to insert relative to and type in .downpay.
Use Insert position to adjust the position of the Downpay block and click save.
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
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.
In the eComposer page, go to the Elements, select Shopify, and choose the Code widget.
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.
Edit the code block by double-clicking and paste the following code:
`<div class = "downpay"></div>Click Save and publish.
Navigate to the Shopify theme editor for your theme and sleect the page template from the dropdown under Products
Select the App Embeds Menu on the left hand navigation and turn on Downpay Product.
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.
Review your landing page and click Save once you are happy with the placement.
Jump to top
Updated on: 13/01/2025
Thank you!