• Topic 主题 トピック Topic Topic
  • Sign in

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.

 

In this Article

 


 

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.
2-0 select collections page.png

 

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.

2-1 Announcement bar.png

 

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.

2.2 Pagination component.png

 

Setting up the Collections Page

Shopper App retrieves your collections from the admin panel. Ensure to enable the Shopper App - Mobile App Builder channel for a collection so they can be synced to Shopper App.

  1. On the left pane, click Collections Page to start configuring collection pages.
  2. In the Select type section, select your desired display style for collections.
    • Graphics and Text: If you choose this style, it will not automatically synchronize with your online store’s collections. You will need to manually add collections. Click on the triangle icon on the right of each collection to change or upload cover images or names, add lower-level collections, and schedule its release time.
      2-2-2.1.1 g and t.png
      Click on the triangle icon on the right of each collection to change or upload cover images or names, add lower-level collections, and schedule its release time.
      2-2-2.1.2 g and t.png
    • Plain Text and 3-tier Graphics and Text: If you choose these two styles, your online store’s collections are automatically synced.
      2-2-2.2.1 plain.png
      Click on the triangle icon on the right of each collection to change the collection name and schedule its release time. The cover image is retrieved from your online store.
      2-2-2.2.2 plain.png
      Tip: Drag and drop a collection vertically to adjust the order of your collections. Drag and drop a collection horizontally to move it to an upper or lower level.

 


 

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.

 

Have more questions? Submit a request

Comments