Building landing pages using the Site Builder
Recharge offers a robust Site Builder for specific Revenue Tools, 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.
- Shopify Checkout Integration
- Migrated 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 merchants who have access to the legacy Cross-sell for upcoming order flow:
- Click Cross-Sell & Upsell in your merchant portal and select [Legacy] Cross-sell for upcoming order.
- Create a new cross-sell flow or click into an existing, unpublished flow.
- 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 flow. Create a new Upcoming Order Cross-sell flow 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 Churn tools in the Recharge merchant portal and select Cancellation Prevention.
- Create a new Cancellation Prevention flow or click into an existing, unpublished flow.
- In the Exit Survey node, select Customize experience to navigate to the Site Builder.
You cannot update the landing page styles after publishing the flow. Create a new Cancellation Prevention flow 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 Churn tools in the Recharge merchant portal and select Win Backs.
- Create a new win back flowor click into an existing, unpublished flow.
- 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 flow 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.
Note: The Site Builder preview doesn’t render JavaScript for security reasons. If you embed content like a YouTube video, it won’t appear in the preview, but it can still render on the live landing page.
|
|
| 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 to edit all styles of your pages. You can set the font type and add custom CSS to your pages.
Updating and saving your global styles immediately affects all pages using those styles across your store, including active and draft versions.
Changes to global styles apply instantly; there’s no separate publish or activation step. This means that editing global styles within a draft flow will still update the live pages using those styles.
Customize standard text
Customize standard subscription terms like swap,frequency, and quantity in the Site Builder for Cancellation Prevention and Win Back strategies. Your updates apply to both flows and throughout the Affinity customer portal wherever these terms appear. You can also create translations for different languages to communicate clearly with your international customers.
Customize the standard text in a flow to update general subscription terms for both flows and the Affinity customer portal:
- Click Churn tools in the merchant portal and select Cancellation Prevention or Win Back.
- Open an inactive flow, or click Create from template to create a new flow.
- Access the Site Builder:
- Cancellation Prevention flow: Click on the Cancellation survey node and select Customize landing page.
- Win Back flow: Click on the Landing page node and select Customize onsite experience.
- Confirm or select a specific language using the Language drop-down menu at the top of the Site Builder.
- Click Customize standard text.
- Add your customized text in the Edit text textbox for each text option. You can change the phrasing, or completely translate it depending on your localization plans. Ensure that you retain the relevant variables when updating your text. See Available variables for each Recharge flow for a list of variables you can use when building the onsite experience for each flow type.
- Review the Used in column to confirm where the text appears for customers.
- Click Save changes to save your updates.
- Optional - Repeat steps 4-6 to update translations for different languages.
- Select Done to exit the Site Builder. Click Apply to save your translations and Save to update the flow.
Customers see the translated text as soon as you save your Site Builder changes. You do not need to activate the flow so customers can see your translations.
