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 Configuring the Collections Page section.

Accessing and 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 Top Navigation

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

You can configure the Top navigation module by following these steps:

1. Go to the Collections page, then click Top navigation to expand the menu.

2. Select the section you want to configure: Top left icon, Center, or Top right icon.
   

3. From the Component type dropdown, choose the component you want to add:

•  
  • Icon: Click + Add icon to insert up to 3 predefined options. 
  • Image: Upload a branding or promotional image as needed.
  • Search bar: Add the predefined search bar to provide customers with a convenient way to browse your site.
  • Page title: Display the title of the product collections page.

4. Click Save or Publish to apply your settings.

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.

Enabling or Disabling the Search Bar

In the Search bar section, you can choose whether to display a search bar below the announcement bar. This provides customers with a quick and easy way to find products.

The search bar cannot be repositioned, but you can hide it by clicking the eye icon.

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

Shopper App provides two versions of the Collection list component for designing your Collections page. To achieve a more comprehensive and flexible collection management experience, we recommend using the New component.

• Collection list (Old): Supports Shopper App version 2.3.0 and earlier. This component is scheduled for deprecation.
• Collection list (New): A redesigned configuration panel that provides a more structured way to manage collection groups and hierarchy.

Setting Up the Collections Page (Collection list – Old)

To configure your Collections page using the Collection list (Old) component, follow the steps below.

Configuring the Display Style  

1. In the left-hand menu of the design editor, click Collection list (Old).

2. Select a Display style for the collections page:

   • Image-text: Displays collections from top to bottom with both name and image.
   • Only text: Displays collections in a text-only list.
   • Three-level image-text: Expands collections into up to three levels, allowing customers to browse second- and third-level collections.

   If you select Image-text or Three-level image-text, choose an Image aspect ratio (2:3, 3:4, or 1:1)

Managing Collection Settings

1. Click Collections added to select the collections you want to display in the app, then click Apply.

   

2. Under Settings, click the expand icon next to a collection to configure its settings:

   • Collection image: Upload a custom image (optional). If not uploaded, the image from the admin panel is used.
   • Collection name: Edit the display name shown in the app.
   • Activation time (optional): Set a start time and end time, or enable Never expires.
   • Add second-level collections: Add sub-collections under a main collection.

   

3. Reorder collections by dragging them vertically to change display order, or horizontally to adjust hierarchy. To remove a collection, hover over it and click the Delete icon.

   

After completing the configuration, click Save to keep your changes for later, or click Publish to apply the settings to your app immediately.

Setting Up the Collections Page (Collection list – New)

The Collection list (New) component uses a structured, collection group–based configuration, enabling more refined and flexible design for your collections page. To configure the Collections page with the Collection list (New) component, follow these steps.

Configuring the Display Style  

1. In the left-hand menu, click + Add component and select Collection list (New).
2. Click Collection list (New) to open the Collections management panel.

3. In the settings panel, select the Style settings tab.

   

4. Under Display style, choose how collections are presented:

   • Grid style with tabs: Displays main categories as tabs and shows subcategory entries in a grid below.
   • Image catalog: Displays category entries using an image-and-text layout.

   

5. Configure additional display options based on the selected style:
   • If Grid style with tabs is selected, you have the following options:
     • Display style for leaf item: Select how leaf-level entries are displayed in the grid (for example, number of items per row).
     • Image ratio for leaf item: Choose the image ratio for leaf-level entries (1:1, 2:3, 3:4, or original ratio).
     • Grid title alignment: Choose whether entry titles are aligned Left or Center.
   • If Image catalog is selected, you have the following options:
     • Default image source for collection group: Choose whether to use a custom image or another available image source for collection groups.
     • Image ratio for collection group: Select the image ratio for collection group entries (1:1, 2:3, 3:4, or original ratio).
     • Display style for leaf item: Select how leaf-level entries are displayed (for example, thumbnail with text).
     • Image ratio for leaf item: Choose the image ratio for leaf-level entries.

Managing Collection Settings

1. In the Collection list (New) settings panel, switch to the Collection management tab.

   

2. Click Add collection group to create a new collection group.

   

3. Within a collection group, configure the following:

   

   • Group name: Click the collection group name to configure the following options:
     • Custom group name: Set the name displayed for this collection group in the app (applies to both the Grid style with tabs and Image catalog styles).
     • Collection group image: Available only when the Image catalog display style is selected. Choose the image source for the collection group:
       • If Auto-fetch collection/product images is selected, you must specify the corresponding product Collection.
       • If a Custom image is selected, upload a custom image.
     • Activation time (optional): Set when the collection group is displayed (applies to both the Grid style with tabs and Image catalog styles).
   • Group images: Click + Add image to upload up to 3 images for the group. After uploading, click an image to open the Edit image panel and configure:
     • Custom image: Upload, replace, or remove an image (supported formats: .png, .jpg, .jpeg, .gif; max size: 1 MB).
     • Redirect to: Set the destination users are taken to when tapping the image (collection, custom page, or web page).
     • Sort by: Choose how products in the collection are sorted (for example, Recommended).
     • Activation time (optional): Schedule when the image and its associated entry are visible.

4. Add and manage the collection structure as needed:

   • Click + Subgroup name to create a second-level group. The supported settings are the same as those for the main group.
   • Click+ Leaf entry to create a leaf entry. Leaf entries can be added directly under a group or within a subgroup. For each leaf entry, you can configure its display name, redirect destination, entry image, and control its activation time.

   

5. Repeat the steps above to add additional collection groups if needed.

After completing the configuration, click Save to keep your changes for later, or click Publish to apply the settings to your app immediately.

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.