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.

Configure Sort, Filter, and List View

The Sort & Filter & List View section consists of three modules: Sort, Filter, and List View. These modules allow you to configure the sorting options, filter options, and product display density for the product list page.

The order of these modules is fixed and cannot be changed or removed. Sort and Filter are enabled by default and cannot be disabled. List View can be enabled or disabled independently and is disabled by default.

Configuring Sort

In the Sort module, you can configure the following settings:

• Preset sort name: Enter a name for the default sorting option (for example, Recommended). This name appears on the sort button in the app. This field is required and supports multiple languages.

• Secondary preset sort: Adds an additional sorting option to the product list page. Click + Select secondary sort to select a sorting rule. You can choose any sorting rule except Recommended, such as Best Sellers or Newest. After selecting a sorting rule, enter a Secondary preset sort name.

  If the selected sorting rule is disabled in the Smart Search Recommendation app, or you remove the sorting rule here, the secondary sorting option will no longer appear on the storefront. However, the Secondary preset sort name you entered will be retained.

• Price sort: Disabled by default. After enabling it, select the Default order (Price: low to high or Price: high to low. The default is Price: low to high). Customers can then sort products by price using the price sort option on the storefront.

Configure Filter

In the Filter module, you can configure the filter options displayed on the product list page.

1. Click + Add filter and select the filter attributes provided by the Smart Search Recommendation app, such as Size, Color, or Price. You can add up to 10 filter options.

   

2. In the Saved filters list, you can enable or disable each filter individually.

Configure List View

In the List View module, you can configure the product display density on the product list page. Under View options, you can enable one or more of the following layouts:

• 1 per row
• 2 per row (enabled by default)
• Staggered
• 3 per row

You can enable multiple layouts, but at least one must remain selected.

If only one layout is enabled, customers will see only that layout and no view switcher will be displayed. If two or more layouts are enabled, the storefront displays a view switcher, and you must designate one layout as the Default view.

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.