Start Strong
Sell Smart
Manage with Ease
Market to Success

Designing Your Collections Page in the Theme Editor (OS 3.0 Themes)

Your Collections page is where customers browse the products in a specific collection in your store. In the Theme Editor for OS 3.0 themes, you can customize this page's header, product list, and other page-specific settings directly from your SHOPLINE admin panel — no coding required.

This guide explains how to access the Collections page in the Theme Editor, configure its header, control how products display on mobile, and set up interactive features like Quick view, hover effects, and promotion cards. 

Before You Start: Confirm You’re Using the Correct Tool

This article covers your Collections page inside the Theme Editor for OS 3.0 themes, which controls the storefront customers see in their web browser. If you're designing the collections page of your SHOPLINE Shopper app instead, see "Designing the Collections Page" — Shopper App has its own collections page editor with different components that are unrelated to the Theme Editor.

 

 

Navigating to the Collections Page in the Theme Editor

To open the Collections page in the Theme Editor:

  1. From your SHOPLINE admin panel, go to Online Store > Design > My Theme, then click the Design button on the OS 3.0 theme you want to edit.
    image.png
  2. At the top of the Theme Editor, click the page selector and select Collections from the list of page types.
  3. Click Collections (the row with the > arrow) to open its template list, then select Default to edit the standard Collections page layout, or click + Create a template to build a custom layout you can assign to specific collections.
    image.png
  4. Use the collection drop-down list on the left sidebar to choose which collection to preview while you make changes.
    image.png
Note: The left sidebar of the Theme Editor is always organized into three groups: header and footer, which apply across your entire store, and Template, which contains the content specific to the page you're editing. For the Collections page, Template contains the Collection header and Product list components covered in this guide.

 

 

Configuring the Collection Header Component

At the top of your Collections page, customers see a header banner image and a breadcrumb trail that shows where they are in your store. This section covers how to set a header banner image and hide the breadcrumb's "Home" node — the two most recently updated settings, both found within the Collection header component's Collection image block. The Title and Collection description blocks use the same standard settings shared across the Theme Editor — see "Designing Store Pages with Theme Editor Components (OS 3.0 Themes)" for a full list of components and their settings.

 

Uploading a Header Banner Image

To upload or update the header banner image:

  1. In the Theme Editor, go to the Collections page. Under Template, click the Collection header.
  2. Click Collection image to open its settings panel.
  3. Upload an image for the header banner. In the same panel, set the Mobile banner image field to control the image shown to visitors on mobile devices.
  4. Click Save to apply your changes.

 

Hiding the "Home" Node in Collections Page Breadcrumbs

The legacy Collections page includes a hardcoded "Home" node in its breadcrumb that can't be removed, but you can hide it. To hide it:

  1. In the Theme Editor, go to the Collections page. Under Template, click the Collection header.
  2. Click Collection image to open its settings panel.
  3. Turn on Hide breadcrumb.
    image.png
  4. Click Save to apply your changes.
Note: The Hide breadcrumb toggle hides the "Home" node, it does not delete it. For more breadcrumb configuration options, see "Designing Store Pages with Theme Editor Components (OS 3.0 Themes)".

 

 

Configuring the Product List Component

Your Collections page's product grid can adapt to how customers browse — showing one or two products per row on mobile, letting shoppers preview a product without leaving the page, drawing attention to a promotion between products, letting customers filter and sort what they see, and hiding filters automatically once a collection gets too large to filter efficiently. 

This section covers those settings, all found within the Product list component. Other blocks, such as Product title, Product price, Sale badge, and Shop button, use the same standard settings shared across the Theme Editor, see "Designing Store Pages with Theme Editor Components (OS 3.0 Themes)" for a full list of components and their settings.

 

Choosing How Many Products Display per Row on Mobile

To let customers switch between one or two products per row when browsing your Collections page on mobile:

  1. From your SHOPLINE admin panel, go to Online Store > Design > My Theme. Choose an OS 3.0 theme and click Design to enter the Theme Editor.
  2. Go to the Collections page and select a collection from the drop-down list. Under Template, click Product list to open its settings panel.

  3. Turn on Multi-column switcher for mobile display.
    image.png

    Tip: To preview how this looks on mobile while you configure it, click the device toggle at the top of the Theme Editor and switch to the Mobile view.
  4. Set Default number of columns on mobile and Alternative switchable number of columns from the dropdowns, then click Save.
    image.png

Notes:

  • This option is available for mobile view only.
  • You can set the default and alternative column count to 1 or 2.
  • If the default and alternative numbers are the same (for example, 1/1 or 2/2), the switcher icon will not respond when customers tap it.
  • Supported on all OS 3.0 themes except Bottle.
  • Test with any active apps to ensure proper display. Some custom apps may affect how the product listing page grid renders.

 

Enabling Quick View and the Floating Hover Layer on Product Cards

The Top-layer image overlay block sits above your product image and can hold the Quick view button and other content. It also controls the Floating hover layer effect, how that content appears when customers hover over a product. To set it up:

  1. In the Theme Editor, go to the Collections page. Under Collections, click the down arrow icon to select a collection to preview.
  2. Under Product list, go to Product cards > Product image, hover over Top-layer image overlay, click + Add content, and select Quick view button (you can add other content to this overlay as well).
    image.png
  3. Customize the Quick view button's text, color, and formatting in its settings. By default, the button displays as View more.
    image.png
  4. Click Top-layer image overlay itself to configure the Floating hover layer effect, choose Persistent overlay, Fade-in overlay, or Fade-out overlay to control how the overlay content appears.
    image.png
  5. Click Save to apply your changes.

Notes:

  • This overlay covers the product image and other overlays by default.
  • Enable Popup product card overlay in Theme settings > Product card to also trigger this overlay when a customer adds an item to the cart — the effect disappears again after the item is added. When enabled, make sure the overlay content (for example, a variant selector) fades in. Hovering over the product also triggers this update.
  • Available on all OS 3.0 themes except Bottle.

 

Adding a Promotion Card to Your Collections Page

The Promotion card is a block you can add alongside Product cards under Product list to highlight a promotion within your product grid. To add and configure it:

  1. In the Theme Editor, go to the Collections page. Under Product list, click + Add content and select Promotion card. 
  2. Click the Promotion card to open its settings panel.
  3. Under Image, click + Add image to upload the promotion image. You can also upload a separate Image on mobile, and set the Image display area (for example, Center).
    image.png
  4. Set the Title text and choose its Title typography (for example, Heading 5).
  5. Add a Description using the rich text editor.
  6. Click Save to apply your changes.
Note: The Inherit color scheme toggle is on by default, so the Promotion card follows the page's global color scheme.

 

Turning On Filters for Your Collections Page

Customers can filter the products on your Collections page — for example, by price or variant options — once you turn on Enable filter under Product list. Whether customers see your theme's native filter or a filtering app's filter depends on which apps you have installed. To turn it on:

  1. In the Theme Editor, go to the Collections page. Under Template, click Product list to open its settings panel.
  2. Under Sorting and filtering, turn on Enable filter.
    image.png
  3. Click Save to apply your changes.

Notes:

  • If you don't have the Product Filters & Color Swatch or Smart Search Recommendation app installed, turning on Enable filter shows your theme's native filter.
  • If you have one of these apps installed, its filter takes priority over the native filter whenever the Enable filter is on. If both apps are installed, Smart Search Recommendation takes priority over Product Filters & Color Swatch.

 

Understanding Filter Display Limits on Collections and Search Pages

To ensure optimal performance, filters are displayed only when the number of products is within the supported range:

  • Collections page: up to 5,000 items.
  • Search results page: up to 1,000 items.

Notes: 

  • If the number of products exceeds these limits, filters will be automatically hidden. If your store requires a higher limit, please contact SHOPLINE Support for assistance.
  • Filters are provided by the Product Filters & Color Swatch and Smart Search Recommendation apps. See those guides for details on setting up and customizing filters.