Setting Up Your Home Screen - All Elements

Creating a captivating home page on your mobile app using the Reactiv dashboard is straightforward with its drag-and-drop functionality. This guide will help you set up different sections of your home page in no time.

Accessing the Reactiv Dashboard

First, sign into your Shopify store admin.
Open Reactiv Dashboard by going to Sales channels > Reactiv - Mobile App Builder.
You will be redirected to the app studio where you can start designing your homepage.

⭐️ Reactiv Tip: Hover over the Reactiv - Mobile App Builder label on your sidebar and click the pin icon to pin the studio for easy access in the future

Elements Available for the Home Screen

You'll add and configure various sections that will appear on your home screen. Here’s how to add and customize each type of section:

Carousel

This section, also sometimes called the hero banner, is typically used for showcasing current promotions or important announcements.

Once your carousel has been dragged and dropped to your app builder, you'll be brought to the editing section, where you'll be able to update settings specific to this carousel element.

To add a banner to this carousel, you will select the + Add Banner button & the below window will pop up, allowing you to add an image, decide where this banner links to, & add a title and/or a button overlay.

Once you are happy with this banner, click Apply to add this change. Repeat these steps for the number of banners you wish to have in the carousel element.

Search Bar

This section allows you to add a search bar directly on your homepage.

Once the search bar element has been dragged and dropped to your app builder, you'll be brought to the editing section where you can update the copy that displays within the search bar.

Promo Banners

This section can be used to highlight various products, collections or simply a place to add some eye-catching graphics.

Once the promo banners element has been dragged and dropped to your app builder, you'll be brought to the editing section where you can change a number of settings and configuration options.

To add a banner to this element, you will select the + Add Banner button & the below window will pop up, allowing you to add an image, decide where this banner links to, & add a title and/or a button overlay.

Once you are happy with this banner, click Apply to add this change. Repeat these steps for the number of banners you wish to have in the promo banner element.

⭐️ Reactiv Tip: The Promo Banners Element can be configured as a slider element or grid via the settings. If you are using the grid configuration, the # of banners wide will vary based on the style of the banners. Reference the below;

Square = 3 banners wide

Circle = 3 banners wide

Portrait = 3 banners wide

Landscape = 2 banners wide

Featured Collections

Use this section to highlight specific collections or bestsellers to instantly catch the eye of your customers.

Steps to Configure:

Drag the "Featured Collections" section to the preview area.
Use the settings area to configure the content and design of the section.
Scroll down and click on Add Collection button, then select as many collections you want to display in the home page.
The featured image from you collection will automatically be pulled which you can change if needed.
Set the style of the image card to be square, portrait or landscape depending on your brand's style.
You can also adjust how the images fit by changing the Image Display Style.
All your changes will reflect in real-time in the preview area.

Collection Tabs Slider

Similar to the Featured Collections, use this section to provide quick links to specific collections for easy navigation.