Introduction

The latest iteration of BrandLift's Landing Page Builder incorporates cutting-edge Shopify theme extension practices, enabling full customization directly from your theme editor. This intuitive approach eliminates the need for code manipulation. It's our most efficient, high-performing, and user-friendly page builder to date. Let's explore its features!

Creating the Landing Page

1. From the BrandLift dashboard, go to Loyalty > Onsite
2. Select Landing Page and click Create Page
3. There is now a new Page on your store called Loyalty Program that uses our template brandlift-loyalty-landing-page
4. To change the visibility of the page or edit the SEO content, from your Shopify admin go to Online Store > Pages > Loyalty Program.

Customizing the Page

💡 Before customization, ensure the BrandLift app embed is activated.

To access customization options for the landing page:

1. From your Shopify admin, go to Online Store > Themes and click Customize on the theme
2. In the top-center dropdown, go to Pages > brandlift-loyalty-landing-page
3. Initially, the file is empty. Add BrandLift app sections to populate the template:

• In the left-side menu, underneath Template > BrandLift Landing Page, click Add section > Apps.

Available BrandLift app sections

• BrandLift: Hero Banner
• BrandLift: How it Works
• BrandLift: VIP Tiers
• BrandLift: Ways to Earn
• BrandLift: Ways to Redeem
• BrandLift: Referral Campaign

Customizing the page template

Inside the theme customizer, under Template, click BrandLift Landing Page. You'll be presented with the general customization options for the page. These are:

• General: general styling for the page, including fonts and primary/secondary colors
• Section Style: Text color and other font customizations for the BrandLift sections
• Card Style: Color, font, and other customization options for the 'Ways to Redeem' and 'Ways to Earn' cards
• Modal Popup Style: Customization options for the popup modal
• Advanced: A field for custom CSS.

Hero Banner section

Once the BrandLift: Hero banner app section has been added, click on it to see the customization options:

• Header section: Add an image or color block for the banner
• Desktop Text Container: Customizations for the text container and banner on the desktop
• Mobile Text Container: Customizations for the text container and banner on mobile.

How It Works/Activity section

Add the BrandLift: How it Works section and click on it to view the customization options:

• Section Style: Background and text color for this section. Leave blank to use the default page styles
• Steps: Customizations for the explainer steps. You can upload images for the steps from here.

Ways to Earn section

Add the BrandLift: Ways to Earn section and click on it to see the customization options:

• Section Style: Background and text color for this section. Leave blank to use the default page styles.

Ways to Redeem section

Add the BrandLift: Ways to Redeem section and click on it to see the customization options:

• Section Style: Background and text color for this section. Leave blank to use the default page styles.

VIP Tiers section

Add the BrandLift: VIP Tiers section and click it to view customization options:

• Section Style: Background and text color for this section. Leave blank to use the default page styles
• VIP Tiers Table: If enabled, customize the styling for the VIP Tiers Table. Check out this guide on adding a VIP Tiers Table.

Referral Campaign section

Add the BrandLift: Referral Campaign within your loyalty landing page, and click on it to see the following customization options:

• Section Style: This option enables you to set a custom background color for the Referral Campaign component. To retain the landing page's default styling, simply leave this field empty.
• Referral Campaign ID:
• Finding the ID: You can locate the specific identifier for your referral campaign in the campaign's general settings, particularly within the "Embedded campaign div" area.
• Default Campaign: In the absence of a specified ID, the system will display the current, active campaign by default.

Common questions

How can I migrate from the Dedicated Page to the Landing Page?

Our initial version, the Dedicated Page, utilized an iframe for its operation. In comparison, our newer Landing Page represents an evolution, harnessing theme extensions and providing direct editing functionality within the Shopify theme customizer.

Transitioning to our theme extensions requires a manual migration process, typically requiring about an hour of effort, depending on the design's intricacy. Despite this, we strongly advocate for upgrading to the Landing Page due to the following advantages:

• Compatibility with Shopify's infrastructure
• Performance optimization
• Superior user experience