Designing Product List Pages

When customers click on a collection, they will enter its product list page. You can customize each collection’s product list page based on your needs.

Accessing the Product List Editor

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

Selecting a Product Listing for Preview

In the left pane, the first component is the dropdown menu of collections. Click the down arrow to switch to another collection. If you haven't created products in the collection or added the collection to the Shopper App sales channel, the dropdown menu will display No available collection. The order of the collections in the dropdown is independent of that on your customer-facing interface. 

To improve shopping experience, like displaying product specifications as a color palette and enabling the sidebar of filters on the product list pages, refer to Improving Product Display with Product Filters & Color Swatch.

Setting Up the Top Navigation

The Top navigation module allows you to customize the components that appear in the header of your product list 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 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:

• 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 Floating Icon

You can add a Floating icon to the product listing 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 listing 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.

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.