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.

 

---

 

Top Navigation

In your SHOPLINE admin panel, go to Apps > Shopper App > App Design and click the Design button to open the design editor. From the top dropdown menu, select Home page.

You can configure the following settings for your top navigation bar, which will apply to every page within your app:

1. Store Logo: In the left sidebar, select Top navigation, then click Change to upload your store logo. We recommend using an image with a 4:1 aspect ratio or 384px × 96px dimensions.
   
2. Left/Right Navigation Icons: Click the triangle icon on the left side of Top navigation to expand the menu. Then, select the left and right navigation icons and their corresponding destination pages.
   

 

---

 

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.

 

---

 

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

Click Add component to add one. Four types of components are provided for the body part: 

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, specify the product sorting order, and schedule the component's activation time. Optionally, you can display a "View All" button with customizable text and a redirect link.
  
• 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, specify the number of products to display, and schedule the component's activation time. You can also optionally display a "View All" button with customizable text and a redirect link.
  • 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 the collection containing the products you want to display. The products will be displayed in a carousel. You can give the component a title, decide how you want to sort the products, choose the product card style (Frame or Regular) and alignment, and schedule the release time. You can also display a button like “View all” if needed. The text and redirect link of the button can be customized.
  
  
  
• 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 like “View all” 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 the collection containing the products you want to display. The products will be displayed in front of a backdrop. This component is suitable for featuring a collection. You can decide how you want to sort the products, and schedule the release time if needed. For the backdrop, upload an image and optionally give it a title and subtitle, customize the text color, and set up the 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

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

 

---

 

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 will also be displayed on all pages while customers are browsing the app. You can choose to display default components or make custom ones.

 

Default Components

In the editor,  click on the dropdown icon beside Bottom navigation to expand available components. You can make the following changes to the components:

Custom Components

Click Add Navigation to add a custom component. Give it a title, choose the icons, and set up the redirect link. The link can only go to a custom page.

 

Hiding Text

You can choose whether to display text on the button navigation icons. For example, the Shop component will just display its icon without “Shop” when turned on.

 

---

 

Publishing Your Design

After completing the edits and confirming that everything looks right in the preview, click the Apply button in the upper right corner to publish your design to the app. If you want to hold the publishing, you can click Save to retain your edits.