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.

Making Your Design

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.

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.

Currently, you can add a notice board to the product list pages. The notice board appears at the top of each Product List page. You can choose to sync it with the notice board of the homepage, or set it up separately. 

• Synchronized from the Notice bar on the home page: You are not able to make any changes to the Notice Board.
• Independently set: You can edit the 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.

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.