Setting Up and Customizing Landing Pages

Copyright (c) 2023, Intercom, Inc. ([email protected]) with Reserved Font Name "Inter". This Font Software is licensed under the SIL Open Font License, Version 1.1.Copyright (c) 2023, Intercom, Inc. ([email protected]) with Reserved Font Name "Inter". This Font Software is licensed under the SIL Open Font License, Version 1.1. Table of contents Setting Up and Customizing Landing Pages

Setting Up and Customizing Landing Pages

How to setup and use Landing Pages on your Mobile App

Written by Reactiv App

Updated over 2 months agoReactiv App Table of contents

In this guide, you’ll learn how to create and customize Landing Pages in your Reactiv mobile app or Reactiv Clip. Landing Pages are focused, high-conversion screens designed to engage shoppers from a specific source—like ads, emails, or social media—and guide them toward a single goal, such as making a purchase or exploring a collection.

What Is a Landing Page?

A Landing Page is a campaign-specific screen in your app that allows you to:

Promote sales, launches, or limited-time collections
Drive traffic from social media, email, or ads
Showcase curated product content
Tell your brand story using visuals and copy

Promote sales, launches, or limited-time collections

Drive traffic from social media, email, or ads

Showcase curated product content

Tell your brand story using visuals and copy

You can create multiple Landing Pages and assign each a unique deep link URL to support different marketing campaigns.

How to Create a Landing Page

Open the Reactiv App Studio after logging in to your Shopify admin.
Go to the Reactiv App Studio from your Shopify admin.
Select the Landing Page Screen
In the screen dropdown at the top of the Studio, choose Landing Page. This opens the layout canvas for editing.
Add Sections
Use drag-and-drop sections to build your page. Most sections can be added multiple times—except the Hero Carousel, which is fixed and always located at the top when enabled.

Open the Reactiv App Studio after logging in to your Shopify admin.
Go to the Reactiv App Studio from your Shopify admin.

Select the Landing Page Screen
In the screen dropdown at the top of the Studio, choose Landing Page. This opens the layout canvas for editing.

Add Sections
Use drag-and-drop sections to build your page. Most sections can be added multiple times—except the Hero Carousel, which is fixed and always located at the top when enabled.

Landing Page Sections Overview

📸 Hero Carousel (Fixed Section)

The Hero Carousel is always pinned to the top of the Landing Page and cannot be moved or duplicated. You can enable or disable this section from the page settings, but its position is fixed.

To set up the Hero Carousel:

Click on the Hero Carousel section to open the settings panel.
Use the + Add hero button to upload image banners or lifestyle shots.
For each slide, you can:
- Upload an image
- Add a Title and Description (optional)
- Include a CTA button with link destination (e.g., to a product, collection, or another screen in your app)
- Upload media like videos or gifs.

Click on the Hero Carousel section to open the settings panel.

Use the + Add hero button to upload image banners or lifestyle shots.

For each slide, you can:

Upload an image

Add a Title and Description (optional)

Include a CTA button with link destination (e.g., to a product, collection, or another screen in your app)

Upload media like videos or gifs.

📝 Tip: Use bold visuals and keep text short for maximum impact on mobile.

✨ Story Blocks

Use these sections to tell your brand’s story, promote a theme, or highlight a limited-time offer.

To add and set up a Story Block:

Drag the Story Block into the studio.
Fill out the fields:
- Title – A short headline to grab attention
- Header – A subheading or supporting line
- Description – Use this space to explain more about the promotion or story
- Image Asset – Upload an image to visually support the content

Drag the Story Block into the studio.

Fill out the fields:

Title – A short headline to grab attention

Header – A subheading or supporting line

Description – Use this space to explain more about the promotion or story

Image Asset – Upload an image to visually support the content

You can add as many Story Blocks as you'd like.

🛍 Featured Products

This section lets you showcase a curated list of products to drive conversions.

To set up Featured Products:

Drag in the Featured Products section into the studio.
In the settings panel, click + Add Collection.
Search for and select the Shopify collections you want to feature. You can select multiples at once.
Customize the section:
- Heading – Add a heading (e.g., “Shop the Look” or “Best Sellers”)
- Choose a Layout style between grid and slider.
- You can update the Image shape and orientation: landscape, portrait, and square.
- Choose an Image display style between fill and fit.
- And update the maximum number of products to display.
- You can add background gradients to further customize your branding.

Drag in the Featured Products section into the studio.

In the settings panel, click + Add Collection.

Search for and select the Shopify collections you want to feature. You can select multiples at once.

Customize the section:

Heading – Add a heading (e.g., “Shop the Look” or “Best Sellers”)

Choose a Layout style between grid and slider.

You can update the Image shape and orientation: landscape, portrait, and square.

Choose an Image display style between fill and fit.

And update the maximum number of products to display.

You can add background gradients to further customize your branding.

✅ Tip: Choose products that match the theme of the landing page to keep things cohesive.

📝 Text Area

Use Text Areas to highlight exclusive benefits, shipping perks, or customer trust badges.

To set up a Text Area:

Drag in the Text Area section.
Enter:
- Section Title – A bold line to introduce the message (e.g., “Why Shop With Us?”)
- Body Text – Write your message using the built-in text editor. You can use bold, italic, bullets, or links to format the content.

Drag in the Text Area section.

Enter:

Section Title – A bold line to introduce the message (e.g., “Why Shop With Us?”)

Body Text – Write your message using the built-in text editor. You can use bold, italic, bullets, or links to format the content.

Common use cases include:

“Fast + Free Shipping”
“Buy Now, Pay Later”
“100% Satisfaction Guaranteed”

“Fast + Free Shipping”

“Buy Now, Pay Later”

“100% Satisfaction Guaranteed”

✅ Tip: This is a great area for a testimonial about your brand or promotion.

📧 Newsletter Signup (New)

The Newsletter Signup section helps you capture shopper email addresses and grow your marketing list. It serves a dual purpose:

If the shopper is not logged in or does not have an account – The section prompts them to create an account, log in, and opt-in for marketing emails.
If the shopper is logged in but not subscribed to marketing emails – The section allows them to subscribe directly.

If the shopper is not logged in or does not have an account – The section prompts them to create an account, log in, and opt-in for marketing emails.

If the shopper is logged in but not subscribed to marketing emails – The section allows them to subscribe directly.

To set up Newsletter Signup:

Enable Email Capture
- In the Reactiv admin, navigate to Email Capture from the left-hand navigation menu.
- Toggle the feature On.
- Once enabled, the Newsletter Signup section will be available for use in your app screens.
Add the Newsletter Signup Section
- In the Reactiv App Studio, drag the Newsletter Signup section into the canvas of your Landing Page.
Customize the Section
- Heading – The main title of the section (e.g., “Stay in the Loop”)
- Description – Supporting text to encourage signups (e.g., “Be the first to know about new arrivals and special offers.”)
- Button Text – Call-to-action text for the signup button (e.g., “Subscribe Now”)
- Footer Text – Additional note or disclaimer (e.g., “You can unsubscribe at any time.”)
- Text Alignment – Choose how the text is aligned (left, center, or right) within the section

Enable Email Capture

In the Reactiv admin, navigate to Email Capture from the left-hand navigation menu.

Toggle the feature On.

Once enabled, the Newsletter Signup section will be available for use in your app screens.

Add the Newsletter Signup Section

In the Reactiv App Studio, drag the Newsletter Signup section into the canvas of your Landing Page.

Customize the Section

Heading – The main title of the section (e.g., “Stay in the Loop”)

Description – Supporting text to encourage signups (e.g., “Be the first to know about new arrivals and special offers.”)

Button Text – Call-to-action text for the signup button (e.g., “Subscribe Now”)

Footer Text – Additional note or disclaimer (e.g., “You can unsubscribe at any time.”)

Text Alignment – Choose how the text is aligned (left, center, or right) within the section

📝 Tip: Use inviting, benefit-focused language to increase signups.

🌟 Social Proof (New)

The Social Proof section allows you to highlight testimonials, reviews, or brand stories in a carousel format, helping you build trust and add a rich narrative to your Landing Page. This is a great way to showcase authentic voices from your shoppers and encourage new customers to engage with your brand.

To set up Social Proof:

Add the Social Proof Section
- In the Reactiv App Studio, select Landing Page from the screen dropdown.
- Drag the Social Proof section into the mobile app preview.
Customize the Section Appearance
- Background – Upload an image or choose a background color
- Gradient Overlay – Add a gradient and choose the overlay color for better text readability
- Subheading – Add a short title for the entire section
- Text Alignment – Align text left, center, or right
- Opacity – Choose Full, Strong, or Light to control the visibility of the overlay items
Add a Call-to-Action (Optional)
- Enable or disable the CTA button
- Edit the Button Text (e.g., “Shop Now,” “See More”)
- Link the button to a Product, Collection, Screen, URL, or leave it unlinked
Add Proof Blocks
- Click the + Add Proof button
- Enter content for each testimonial:
  - Heading – Up to 80 characters (e.g., reviewer’s name or a short highlight)
  - Description – Up to 180 characters (optimized for mobile; perfect for short testimonials or stories)
- Repeat as needed to create a carousel of multiple testimonials

Add the Social Proof Section

In the Reactiv App Studio, select Landing Page from the screen dropdown.

Drag the Social Proof section into the mobile app preview.

Customize the Section Appearance

Background – Upload an image or choose a background color

Gradient Overlay – Add a gradient and choose the overlay color for better text readability

Subheading – Add a short title for the entire section

Text Alignment – Align text left, center, or right

Opacity – Choose Full, Strong, or Light to control the visibility of the overlay items

Add a Call-to-Action (Optional)

Enable or disable the CTA button

Edit the Button Text (e.g., “Shop Now,” “See More”)

Link the button to a Product, Collection, Screen, URL, or leave it unlinked

Add Proof Blocks

Click the + Add Proof button

Enter content for each testimonial:

Heading – Up to 80 characters (e.g., reviewer’s name or a short highlight)
Description – Up to 180 characters (optimized for mobile; perfect for short testimonials or stories)

Enter content for each testimonial:

Heading – Up to 80 characters (e.g., reviewer’s name or a short highlight)

Description – Up to 180 characters (optimized for mobile; perfect for short testimonials or stories)

Repeat as needed to create a carousel of multiple testimonials

📝 Tips for Success:

Use real testimonials or reviews to add credibility.
Keep text short and impactful for mobile readability.
Use gradients and opacity settings to ensure text is easy to read over your background image.
Consider adding a CTA to turn testimonials into action (e.g., “Shop the Collection”).

Use real testimonials or reviews to add credibility.

Keep text short and impactful for mobile readability.

Use gradients and opacity settings to ensure text is easy to read over your background image.

Consider adding a CTA to turn testimonials into action (e.g., “Shop the Collection”).

Landing Page Settings

From the Settings tab for this screen, you can:

Add a URL Slug
Create a deep link that leads directly to this Landing Page (e.g., yourstore.app.link/spring-sale). This is useful when linking from an ad, email, or Instagram bio.

Add a URL Slug
Create a deep link that leads directly to this Landing Page (e.g., yourstore.app.link/spring-sale). This is useful when linking from an ad, email, or Instagram bio.

Enable/Disable the Hero Carousel
If you prefer a cleaner layout, you can toggle the Hero Carousel section off.

Enable/Disable the Hero Carousel
If you prefer a cleaner layout, you can toggle the Hero Carousel section off.

Managing Multiple Landing Pages

You can build and save multiple Landing Pages in Reactiv—each with its own layout, content, and deep link. This allows you to:

Run simultaneous campaigns
Tailor messaging for different audiences
A/B test page layouts or offers

Run simultaneous campaigns

Tailor messaging for different audiences

A/B test page layouts or offers

⭐️ Best Practices for Landing Pages

Keep it focused: Limit each page to one core goal (e.g., product launch or sale).
Use strong visuals: Story Blocks, Hero Carousel, Newsletter Signup, and Social Proof images/text should be high quality and mobile-friendly.
Drive action: Place CTAs and Featured Products where shoppers can easily engage.
Match the message: Align content and visuals with your ad or email campaign to improve conversion.
Leverage Social Proof: Add testimonials or reviews to build trust and highlight authentic customer voices.

Keep it focused: Limit each page to one core goal (e.g., product launch or sale).

Use strong visuals: Story Blocks, Hero Carousel, Newsletter Signup, and Social Proof images/text should be high quality and mobile-friendly.

Drive action: Place CTAs and Featured Products where shoppers can easily engage.

Match the message: Align content and visuals with your ad or email campaign to improve conversion.

Leverage Social Proof: Add testimonials or reviews to build trust and highlight authentic customer voices.

📝 All done: You can save and publish your changes now.

Did this answer your question?😞😐😃

Setting Up and Customizing Landing Pages | Reactiv Support Center