Building landing pages using the Site Builder
Recharge offers a robust Site Builder for specific Subscription Experiences, allowing you to customize the customer portal experience for customers.
This guide explains what the Site Builder is, and how you can use it to create landing pages to communicate with your customers.
- Recharge Checkout on Shopify
- Shopify Checkout Integration
Before you start
- Upcoming Order Cross-sell, Win Backs, and Cancellation Prevention come equipped with the Site Builder, where you can build custom landing pages to interact with your customers.
- The appearance within the site builder is an approximation due to the inheritance of some styles from your store's Shopify theme that is not reflected in the preview. View the landing page on a test customer using your live theme to confirm the final presentation.
Overview
The Site Builder is an easy-to-use, robust page editor used to create landing pages for Upcoming Order Cross-sell, Win Backs, and Cancellation Prevention strategies.
Edit the text displayed on each page, customize the style of your pages, and add custom HTML blocks where you can embed custom content such as video messages or gifs.
Access the Upcoming Order Cross-sell Site Builder
The Site Builder is available for Upcoming Order Cross-sell strategies through the Cross-sell Offer node:
- Click Grow in your merchant portal and select Upcoming order.
- Create a new cross-sell strategy or click into an existing, unpublished strategy.
- In the Cross-sell Offer node, select Customize experience to navigate to the Site Builder.
You cannot update the landing page styles after publishing the experience. Create a new Upcoming Order Cross-sell strategy to build a new landing page.
Save your changes
After you've made changes using the Site Builder, you must save your work for the changes to take effect:
- In the Site Builder, click Done.
- Click Apply in the Cross-sell Offer node after the Site Builder closes.
- Save the flow on the flow canvas.
Access the Cancellation Prevention Site Builder
The Site Builder is available for Cancellation Prevention strategies through the Exit Survey node:
- Click Retain in the Recharge merchant portal and select Cancellation Prevention.
- Create a new Cancellation Prevention strategy or click into an existing, unpublished strategy.
- In the Exit Survey node, select Customize experience to navigate to the Site Builder.
You cannot update the landing page styles after publishing the experience. Create a new Cancellation Prevention strategy to build a new landing page.
Save your changes
After you've made changes using the Site Builder, you must save your changes for them to take effect:
- In the Site Builder, click Done.
- Click Apply in the Exit Survey node after the Site Builder closes.
- Save the flow on the flow canvas.
Access the Win Backs Site Builder
The Site Builder is available for Win Backs landing pages through the Landing Page node:
- Click Retain in the Recharge merchant portal and select Win Backs.
- Create a new win back or click into an existing, unpublished strategy.
- In the Landing Page node, select Customize experience to navigate to the Site Builder.
You cannot update the landing page styles after publishing. Create a new win back strategy to build a new landing page.
Save your changes
After you've made changes using the Site Builder, you must save your changes for them to take effect:
- In the Site Builder, click Done.
- Click Apply in the Landing Page node after the Site Builder closes.
- Save the flow on the flow canvas.
Site Builder elements
Sections
The site builder uses sections to display brand content on the landing page.
Select Add a section when updating your landing page to add additional information, including custom HTML, videos, and callouts. Drag and drop page blocks to display content in the order you want.
Available sections
Section type |
Purpose |
Available with |
| Custom HTML | HTML sections offer flexibility, allowing you to add different blocks for unique designs and advanced customization using custom HTML and CSS. |
|
| Video | Use video sections to directly add video content by inputting a video URL. |
|
| Callout | Add callout blocks using callout sections to add a callout banner to your landing page. Within this block, you can add a header, text, and up to two call-to-action buttons. |
|
| Columns | Add a custom informational section with multiple column blocks. They can include text, an image, and a URL in each column. |
|
| Text with image | Add text content with accompanying images to craft a visually compelling page layout that conveys information to customers effectively. |
|
| Free gift reminder | If you use a Surprise and Delight template or Rewards strategies to provide customers with a free gift, add a reminder when a customer goes to cancel, letting them know that they'll lose their free gift if they cancel their subscription. |
|
| Credit balance reminder | If you offer Credits to customers, you can add a reminder to let customers with active balances know that they may their credits if they cancel their subscription. This section only displays if the customer has a credit balance and is not visible to customers with no active balance. |
|
Global styles
Click on Edit global styles, colors, and layout at the bottom left of the Site Builder to edit all styles of your pages. You can set the font type and add custom CSS to your pages.
Updating and saving the global styles for any Upcoming Order Cross-sell or Cancellation Prevention strategies impacts all strategies in your store, including any active strategies.
