Designing Your App Homepage

Shopper App streamlines your app-building process with a flexible user interface and a selection of generic templates. Theme updates are seamlessly integrated with the app through real-time synchronization.

This article guides you on how to leverage Shopper App's pre-built components to design an engaging and visually appealing homepage for your customers.

 

---

 

Accessing the Home Page Editor

To access your app’s homepage for design and customization, follow these steps:

1. From your SHOPLINE admin panel, go to Channels > Shopper App > App Design, then click Design.

   

2. From the top dropdown menu, select Home page.

   

3. Use the left sidebar menu to configure settings for each section of the homepage. Each feature is introduced in the sections below.

   

 

---

 

Top Navigation

The Top navigation module allows you to customize the components that appear in the header of your homepage. These settings apply across all pages within your app.

The module includes three configurable sections: Top left icon, Center, and Top right icon. Each section is designed to enhance navigation and improve user engagement.

 

Available Components for Each Section

 

Configuring Top Navigation Components

You can configure the Top navigation module by following these steps:

1. Go to the Home page, then click Top navigation to expand the menu.

2. Select the section you want to configure: Top left icon, Center, or Top right icon.

   

3. From the Component type dropdown, choose the component type you want to add:

• • Icon: Click + Add icon to insert up to 3 predefined options. 
  • Logo: Upload your store logo. For best results, use an image with a 4:1 aspect ratio or 384 × 96 px.
  • Search bar: Add the predefined search bar to provide customers with a convenient way to browse your site.

4. Click Save or Publish to apply your settings.

Note: The top navigation bar does not currently support multilingual settings. The same image will be displayed across all languages.

 

---

 

Announcement Bar

The Announcement bar is located directly below the top navigation bar. Only one announcement bar can be displayed on the homepage, and it cannot be deleted or reordered. Four display styles are available: Slide horizontally, Slide vertically, Flashing switch, and Spaced and centered. You can also customize the background and text colors of the bar and schedule announcements.

You can display up to three announcements at a time. For each announcement, you can edit the title, add a redirect link, and enable a countdown timer. The position and color of the countdown can also be customized. When the countdown reaches the specified end time, it will display as 00:00:00:00.

 

---

 

Search Bar

In the Search bar section, you can decide whether to display a search bar below the announcement bar, giving customers a quick and easy way to find the products they are looking for. 

The search bar cannot be repositioned, but it can be hidden by clicking the eye icon.

 

---

 

Pagination Component

The Pagination Component is located below the announcement bar and cannot be deleted or reordered. To configure different tabs for your website's homepage, follow these steps:

1. By default, the pagination component is disabled. Click Pagination Component to enable it.
2. Click on each section to edit the tab's name. To add up to 10 tabs, click Add Pagination Component.
3. Select the page you want to design, add the desired components to each tab, and configure the settings as needed. The preview panel on the right will dynamically switch tabs and display the applied effects in real time.

 

---

 

Body Part

There are two types of components available for the body section:

• Default: Supports four types of components, including Basic Components, Product Components, Collection Components, and App Components.

• Custom: Supports the development of custom components, which can be embedded into the homepage to enhance your store app’s design or functionality.

 

Basic Components

• Carousel: You can set the auto-switch interval, the dimension, and schedule the release time according to your own preferences. You can choose to add images or videos here. 
  • Image: Supported file types are png, jpg, jpeg, and gif. You can optionally insert links that lead customers to a collection page, a product details page,  a custom page, and any web page.
  • Video: YouTube and Vimeo links are supported.
    
• Custom Image Banner: Supported file types are png, jpg, jpeg, and gif. The width of the image should be at least 1123px. Schedule the release time based on your needs.
  
• Custom Video Banner: Upload a video locally. The size of the video can’t exceed 10 MB. A cover image for the video will be automatically generated if you don’t upload one. You can choose your desired aspect ratio, insert redirect links, and schedule the release time based on your needs.
  
• Countdown: A countdown creates a sense of emergency if you are running a timed promotion. You can give it a title, schedule the end time, and choose the text color. If needed, turn on the Image after countdown toggle and upload an image that will be displayed when the countdown is over.
  
• Custom image with customizable hot zones:  You can define multiple interactive areas (hot zones) on a single image, with each zone linking to different destinations such as product detail pages or collection pages.
  • Custom Image: Supports uploading images in PNG, JPG, JPEG, or GIF format. You can also customize the image padding.
    
  • Hot Zone Settings: Click Add a hot zone to open a pop-up window. Add hot zones individually and adjust the size and target page for each as needed. If hot zones overlap, the one with the highest index will take precedence.
    

 

Product Components

You can display your products using the following component options:

• Product list A and Product list B: These components display products in a grid layout. Product list A shows two items per row, while Product list B shows three. Select the template that best suits your display requirements. For both list types, you can configure a title, select a product category, choose the sorting method, set the maximum number of products to display, and enable product ranking badges. You can also display a button with customizable text and a redirect link, as well as schedule the component’s activation time.
  
• Multi-collection product list A and Multi-collection product B: Similar to the standard Product Lists, these options display products in a grid layout, but allow you to showcase items from multiple collections. Multi-collection product list A displays two items per row, and Multi-collection product list B displays three. Select the template that best suits your display requirements.
  
  •  Display style: For both multi-collection list types, you can configure a title, set the maximum number of products to display, and enable product ranking badges. You can also display a button with customizable text and a redirect link, as well as schedule the component’s activation time.
  • Multi-collection settings: You can add up to five collections as sub-components to these multi-collection lists. Reorder the collections by dragging and dropping them. Click on each sub-component to select the desired collection, modify its title, and specify the product sorting order within that collection.

• Product Carousel: Select a collection containing the products you want to display in a carousel. You can add a title, choose the product sorting method, enable product ranking badges, and customize the product card style (Standard or Framed) and alignment. You can also schedule the activation time and display a button with customizable text and a redirect link.
  
  
  
• Product Showcase: Select the collection containing the products you want to display. The products will be displayed in a collage. You can give the component a title, decide how you want to sort the products, and schedule the release time. You can also display a button if needed. The text and redirect link of the button can be customized.
  
  

  Note: The first 6 products in the collection, excluding invalid products, will be displayed in the component according to your chosen sorting method. The number tags in the preview are only visible to you and won’t be displayed on your App homepage.

• Product Collection Display: Select a collection containing the products you want to showcase. The products will appear in front of a backdrop, making this component ideal for highlighting a collection. You can choose the product sorting method, enable product ranking badges, and schedule the release time if needed. For the backdrop, you can upload an image, optionally add a title and subtitle, customize the text color, and set a redirect link. 
  

 

Collection Components

You can display your collections in the following ways.

• Collections: You can choose the desired image style (Round or Square), number of columns, title and its alignment, and release schedule for the entire component. For individual collections, click into each sub-component to specify the collection, upload an image, and schedule the release time.
  
• Collection showcase A and Collection showcase B: The collections will be displayed in a collage. Collection showcase A supports up to 4 collections, while Collection showcase B supports up to 7 collections. You must use up all the slots or there will be empty placeholders. For the entire component, you can give it a title, choose the desired alignment, and schedule the release time. For individual collections, click into each sub-component to specify the collection and upload an image. Drag and drop to adjust their display order.
  
  
  
• Collection Carousel: The collections will be displayed in a carousel. Specify at least 4 collections. You can add up to 12 collections in the component. For the entire component, you can give it a title, choose the desired alignment and color of the background and text, and schedule the release time. For individual collections, click into each sub-component to specify the collection, upload an image, and schedule the release time. Drag and drop to adjust their display order.
  
• Collection Grid: The collections will be displayed in a grid. Specify at least 1 collection. You can add up to 4 collections in the component. For the entire component, you can give it a title, choose the desired alignment and image proportion, and schedule the release time. For individual collections, click into each sub-component to specify the collection and upload an image. Drag and drop to adjust their display order.
  

 

App Components

Flash sales: The campaigns you configure in the Flash Sales app will be showcased on your App. Learn more.

 

Custom Components

You can create a custom component in the Shopper App admin panel and embed it into your store app’s homepage to enhance its design or functionality. Click + Add component, switch to the Custom tab, and select an existing component to embed. Alternatively, click + Create a custom block to open the component editor and create a new one. For more details on creating custom components, please refer to this Help Center article.

Components marked as In dev. are unpublished and cannot be applied directly to the live version of your app. However, you can preview these components using Snaplook. Once you’ve confirmed the content is correct, you can publish the component via the code editor and apply it to your live app. For details, see the Saving and Publishing Your Design section.

 

---

 

Floating Icon

The Floating icon serves as a persistent shortcut that remains visible as users scroll through the page, enhancing usability by providing immediate access to key features without navigating away. 

Currently, the Shopper App supports linking the floating icon to either a live chat feature or a designated event page, helping streamline support interactions or promote ongoing campaigns.

In the settings panel, you can configure the following options for your floating icon:

• Basic settings: Name the icon, choose its position, and upload an icon image to be displayed in your app.
• Feature type: Select whether the icon links to an Event page or a Live chat feature.
  • If you choose Event page: Set the destination page for redirection.
  • If you choose Live chat: 
    • Select the chat service to use. Shopper App currently supports integration with Shulex, an AI-powered solution for real-time customer support. For more information, refer to this guide.
    • Decide whether to enable the Unread message notice. When enabled, a red dot will appear to notify users of any unread messages.
• Activation time: Optionally, set a schedule for when the floating icon should be published.

 

---

 

Login Bar

The Login bar component is fixed above the bottom navigation bar, providing customers with quick, one-click access to sign in to your store. It is displayed by default but can be hidden if necessary. You can also customize the sign-in message and button text.

 

---

 

Bottom Navigation

The Bottom navigation appears on all pages of your app, providing quick access to key sections and features. Through this navigation, you can ensure important pages like Shop, Collections, Search, and Inbox are always within reach. You can display up to six default or custom components, giving you flexibility to highlight the most relevant features for your customers.

 

Default Components

In the editor, click the dropdown icon next to Bottom navigation to view the available components. You can make the following changes to them:

 

Custom Components

To create custom components for the bottom navigation of the home page, click the palette icon in the left sidebar to go to Brand kit > Icon, then click + Add custom icon to create and configure your component. After that, return to the Bottom navigation section of the home page to add it to the bar.

For detailed instructions on creating and customizing a custom icon, see the Customizing the Icon Settings section in this article.

 

---

 

Saving and Publishing Your Design 

After completing your edits and confirming that the preview appears as expected, you can use the options in the top-right corner to proceed:

• Save: Temporarily saves your current edits for future updates. This will not affect the live version of your store app.
• Publish > Publish to Snaplook: Publishes the component to Snaplook for preview and testing. Use this option to verify functionality and appearance before making it live. For more information, refer to the related Help Center article. 
• Publish > Publish to live App: Publishes your changes to the live version of your store app, making them visible to end users.