Though there is no official third-party integration, many ReCharge merchants may choose to use Shogun Page Builder, Gem Pages, or other page builder apps to design custom pages for their Shopify store. As ReCharge uses a separate checkout system, you will need to configure your pages to direct to the ReCharge checkout.
Before you start
- Shogun Page Builder and GemPages are not official integrations. If you would like to configure your custom pages to work with ReCharge, you will need to work with a developer or a ReCharge Expert.
- This guide is meant to be used as a reference in order for you, your team, or a recommended third-party developer to carry out. This is not part of ReCharge's standard turnkey solution.
Using 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 add custom code to add the specific subscription attributes in addition to a submit button. Reference our line item documentation to find the line item properties you will need to pass using an HTML form to direct your subscription products to the ReCharge checkout. 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.
For instructions on integrating ReCharge code into your GemPages, visit How to integrate ReCharge app with GemPages.
For instructions on integrating ReCharge code into your PageFly, visit Subscriptions by Recharge element.
Using Zipify Pages
For instructions on integrating ReCharge code into Zipify Pages visit Zipify Pages