Skip to main content
All CollectionsBuilding Your App
Setting Up Your Shop Screen
Setting Up Your Shop Screen

Use this guide to support the design of a seamless Shop Screen experience from the Reactiv dashboard

R
Written by Reactiv App
Updated over 4 months ago

Accessing the Shop Screen from the Reactiv Dashboard

  1. First, sign into your Shopify store admin.

  2. Open Reactiv Dashboard by going to Sales channels > Reactiv - Mobile App Builder.

  3. You will be redirected to the App Studio

  4. From the dropdown menu in the App Studio, navigate to Shop Screen

⭐️ 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 Shop Screen

Featured Collections

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

Steps to Configure:

  1. Drag the "Featured Collections" section to the preview area.

  2. Use the settings area to configure the content and design of the section.

  3. Scroll down and click on Add Collection button, then select as many collections you want to display in the home page.

  4. The featured image from you collection will automatically be pulled which you can change if needed.

  5. Set the style of the image card to be square, portrait or landscape depending on your brand's style.

  6. You can also adjust how the images fit by changing the Image Display Style.

  7. All your changes will reflect in real-time in the preview area.

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

Collections Tabs Slider

This section can be used to showcase specific collections and allow customers to easily hop into those collections.

Once the collections tabs slider element has been dragged and dropped to your app builder, you'll be brought to the editing section where you will be able to select the collections that you want to showcase.

Did this answer your question?