Designing Custom Pages

You can create custom pages in Shopper App based on your business needs. For example, you can create a page for your Christmas campaign.

Creating a Custom Page

1. From your SHOPLINE admin panel, go to Apps > Shopper App > App Design and click the Design button to access the design editor. 

2. From the dropdown menu at the top, select Custom page.

   

3. Click + Create page. You can create up to 5 custom pages.

   

4. Give the page a title and click Confirm.

   

5. Learn how to design the page in the next section.

Making Your Design

You will automatically be directed to the custom page editor. Identify your custom page by the title you just entered.

Setting Up the Top Navigation

The Top navigation module allows you to customize the components that appear in the header of the custom page. 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 custom 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 you want to add:

• • Icon: Click + Add icon to insert up to 3 predefined options. 
  • Image: Upload a branding or promotional image as needed.
  • Search bar: Add the predefined search bar to provide customers with a convenient way to browse your site.
  • Page title: Display the title of the custom page.

4. Click Save or Publish to apply your settings.

Announcement Bar

The announcement bar appears at the top of the custom page and cannot be rearranged. You can choose to sync it with the notice board of the homepage, or set it up separately.

• Synchronized from the Announcement bar on the home page: You are not able to make any changes to the Notice Board, such as the copy and text color.
• Independently set: You can edit the copy, text color, and display style, and schedule the release time if needed. The board can have up to three announcements. An announcement can’t be deleted but you can hide or edit it whenever you need to.

Page Content

Click + Add component, select the component you want to add, and configure it using the settings panel. The supported component types are consistent with those used in Home page design. For detailed configuration instructions, please refer to the Designing Your App Homepage: Body Part article section.

Floating Icon

You can add a Floating icon to the custom page that remains visible as users scroll. This icon can be linked to either a live chat service or an event page to enhance customer support efficiency or drive campaign engagement.

There are two configuration options available: If you select Synchronized from the floating icon on the home page, the icon will inherit the homepage settings and cannot be changed. If you select Independently set, you can configure a separate floating icon specifically for the custom page, including the following settings:

• 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.

Renaming or Deleting the Page

Click More in the upper right corner to rename the page or delete it.

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:

• More: Click More to edit the page name or delete the page.
• 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

Home Page Components That Support Redirecting to Custom Pages

Certain components on the homepage support setting up redirect links to your custom pages, including: Carousel, Customize image banner, Customize video banner, Product carousel, Product showcase, Product collection display, and Bottom navigation. Please refer to Designing Your App Homepage for detailed instructions on setting up these components.