Designing the Collections Page

The Collections page serves as the central hub for all your product collections. Customers can click on a collection to view the products it contains. This article provides guidance on how to customize your Collections page using Shopper App's design editor.

Styles of the Collections Page

Shopper App offers three display styles for your collections page:

• Graphics and text
• Plain text
• 3-tier graphics and text

Before setting up your collections page, select the style that best aligns with your store design and business needs. For more details, refer to the Setting up the Collections Page section.

Configuring the Collections Page

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

Setting Up the Announcement Bar

The Announcement Bar is positioned at the top of the page and cannot be deleted or reordered. To configure your announcement bar, select your preferred content source option in the Content Source section:

• If you select Synchronized from the Announcement bar on the home page, the text, color, and other settings will inherit those set on the homepage and cannot be edited.
• If you select Independently set, you can add up to three announcements, customize the text, color, and other settings, set the publish time, and hide individual announcements.

Setting Up the 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 collections page, 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 and configure the respective collections page settings as needed. The preview panel on the right will dynamically switch tabs and display the applied effects in real time.

Setting Up the Collections Page

The Shopper App retrieves your collections from the admin panel. To ensure collections are synchronized with the Shopper App, you must enable the Shopper App - Mobile App Builder channel for each desired collection in your admin panel.

1. In the left-hand menu, click Collections page to begin configuring your collection layout.
   
2. Select a layout style for your collection page: Image-text, Only text, Three-level image-text. If you choose Image-text or Three-level image-text, you will then need to select the preferred Image aspect ratio.
   
3. Configure the collection settings as needed:
   
   • Add collections: Click Collection added, select the collections you want to show in the app, and click Apply.
     
   • Edit collections: Click the down-pointing triangle icon next to a collection to expand its settings. Shopper App automatically syncs the collection's name and cover image from the admin panel, but you can upload a custom cover image, edit the collection name, and schedule the collection's activation time. Additionally, you can add sub-collections under this main collection and customize their details.
     
   • Sort collections: Drag and drop a collection vertically to rearrange the order of collections. To move a collection to a higher or lower level within the hierarchy, drag and drop it horizontally.
     
   • Delete a collection: Hover over the collection and click the trash bin icon to remove it.

Setting Up the Floating Icon

The Floating icon feature allows you to add a persistent shortcut that stays visible as users scroll. You can link the icon to either a live chat or a designated event page to enhance customer support efficiency and drive campaign engagement. To set it up, follow these steps:

1. In the left-hand menu, click Floating Icon. Then, choose how to configure the icon on the collections page:

• • Synchorized from the floating icon on the home page: All settings will follow those on the homepage and cannot be changed.
  • ndependently set: Configure a floating icon on the collections page that differs from the one on the homepage. For setup instructions, proceed to Step 2.

2. If you selected Independently set, click Add Floating icon and configure the following options for your 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.

3. Click Save to save the settings for later modifications or Apply to apply your settings immediately.
   

Publishing the 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.