There is no official third-party page builder integration, but many Recharge merchants choose to use Shogun Page Builder, Gem Pages, or other page builder apps to design custom pages for their Shopify store. This guide covers using these apps to build customer storefronts.

Before you start

• You should use this guide only as a reference for implementing page builder apps. Recharge Support cannot help with any of the steps below as per our design policy. If you require further assistance, work with a third-party developer.
• Aside from Shogun Page Builder, other page builders listed in this article do not have a direct integration with Recharge. Merchants using the Shopify Checkout Integration should reach out to the app's support team if they have any specific questions on setting up a page.

Shogun Page Builder

Option 1 - Use the Existing Layout option

The easiest option is to use the Existing Layout option in Shogun when importing your product pages. As Recharge relies on your theme's built-in Add to Cart buttons to function, the Custom Layout will not work with this option without further customizations. 

Option 2 - Add custom code

With the Custom Layout and non-product pages, you can use custom code to add the specific subscription attributes in addition to a submit button. You will need to pass custom properties with the add to cart form in order to direct subscription products to the Recharge checkout. Reference our developer docs to find the line item properties. This custom form can be added into your Shogun page using the HTML element. 

Option 3 - Use Ajax

Alternatively, you can use Ajax to add an item to the cart page.

This script can be applied within Shogun using the standard Button element, the CSS Class field, and the HTML element. A unique CSS class can be applied to a Button element in Shogun in the Advanced style settings.

The Recharge script can be updated to include that CSS class and the subscription data. The script can then be added into an HTML element on the page.

GemPages

For instructions on integrating Recharge code into your GemPages, visit How to integrate Recharge app with GemPages.

Hydrogen

For instructions on building a product page on Shopify's headless solution, visit Build a product page.

PageFly

For instructions on integrating Recharge code into your PageFly, visit Subscriptions by Recharge element.

Zipify Pages

 For instructions on integrating Recharge code into Zipify Pages visit Zipify Pages