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

The Collections list page is where customers browse every product collection in your store, giving them a quick way to explore your catalog by category. In the Theme Editor for OS 3.0 themes, you can customize this page's title, choose which collections appear, arrange how collection cards are laid out, and control the image style used for each card. 

This guide explains how to configure the page title, select and arrange your collections, and customize the collection image and name display. 

Navigating to the Collections List in the Theme Editor

To open the Collections list page in the Theme Editor:

1. From your SHOPLINE admin panel, go to the Online Store > Design, then click the Design button on the OS 3.0 theme you want to edit.
2. At the top of the Theme Editor, click the page selector and select Collections list from the list of page types.

The left sidebar is organized into three groups: header and footer, which are shared across every page in your store, and Template, which contains the components specific to the page you're editing. For the Collections list page, Template contains the Collection list component covered throughout this guide.

Configuring the Page Title on the Collections List Page

To configure the page title:

1. In the left sidebar, under Template > Collection list, click Title.
2. In the settings panel, update the following:
   • Title: The heading text displayed at the top of the page (defaults to "All Collections").

   • Text label: Sets the SEO heading tag used for this title (e.g., H2).

     Note: The Text label setting is for SEO purposes only, it does not change how the title looks on your storefront.

• Typography: Sets the visual font style of the title (e.g., Title 3).
• Text alignment: Aligns the title left, center, or right on desktop.
• Text alignment (mobile): Sets a separate alignment for mobile devices.
• Background: Adds a background color behind the title (default: no color).

3. Click Save to apply your changes.

Configuring Collection Cards on the Collections List Page

The Collection cards block sits under Collection list in the Theme Editor and controls which collections appear, how they're arranged, and how each card's image and name display. This section covers selecting collections, arranging the card layout, and customizing the collection image and name display.

Selecting Which Collections Appear 

To choose which collections display in the grid: 

1. In the left sidebar, expand Collection list > Collection cards.
2. In the settings panel, click + Select Product collection.
3. In the picker, select the collections you want to display, then click Done.

Under Collection cards, you can also toggle Inherit color scheme on or off to control whether the cards use the color scheme applied to the rest of the page.

Arranging the Collection Cards Layout 

Beyond selecting which collections to show, you can control how the collection cards are arranged on the page — their direction, spacing, and alignment — using the Layout tab.

To adjust how collection cards are arranged:

1. Select Collection cards in the sidebar, then open the Layout tab in the settings panel.
2. Configure the following options:

   • Direction

     Option	Effect
     Column	Collection cards stack vertically, one below another.
     Row	Collection cards line up horizontally, side by side.

• Auto wrap

  Option	Effect
  On	Cards that don't fit in one row automatically move to the next line.
  Off	All cards stay in a single row or column, even if they overflow the visible area.

• Alignment

  Option	Effect
  Start	Cards align to the start of the row or column
  Center	Cards align to the center.
  End	Cards align to the end.
  Stretch	Cards stretch to fill the available space.

• Justify

  Option	Effect
  Start	Cards are grouped at the start of the container, with extra space after the last card.
  Center	Cards are centered, with equal space on both sides.
  End	Cards are grouped at the end, with extra space before the first card.

• Spacing

  Option	Effect
  Row	Sets the vertical gap (in pixels) between rows of cards.
  Column	Sets the horizontal gap (in pixels) between columns of cards.

Configuring the Collection Image 

To customize how collection images display:

1. Under Collection cards, click Collection image.
2. In the settings panel, configure:
   • Collection image ratio: Choose the aspect ratio for each collection image — 1:1, 4:3, or 2:3.
   • Image fill method: Choose Fill to crop the image to fit the ratio, or Fit to display the full image within the frame.
   • Collection image shape: Choose Square or Round.
   • Image display area: Choose where the image's focal point is anchored — Center, Above, Upper right, Upper left, Left, Right, Bottom left, Bottom right, or Below.
3. Click Save to apply your changes.

Displaying the Collection Name 

The collection name can appear in two places on each card: as an overlay on top of the collection image, or as a caption below it. Both placements use the same settings.

To add or edit a collection name: 

1. Under Collection image, click + Add Collection name to add the name as an overlay on the image, or select the existing Collection name block below the Collection image to edit the caption version. 
2. In the settings panel, configure:
   • Collection titles: Enter the text to display for the collection name.

   • Text label: Sets the SEO heading tag for this text (e.g., H2).

     Note: The Text label setting is for SEO purposes only, it does not change how the collection name looks on your storefront.

• Typography: Sets the visual font style (e.g., Body 3).
• Text alignment: Aligns the text left, center, or right.

3. Click Save to apply your changes.

Setting the Color Scheme 

To change the color scheme applied to the collection cards:

1. Select Collection list in the sidebar.
2. Under Color, click Change to choose a different color scheme, or Edit to modify the current scheme.
3. Click Save to apply your changes.

Adding a Multilevel Filter to the Collections List Page

You can optionally add a Multilevel filter component to help customers narrow down collections by product, brand, or service type, useful if your store has a large number of collections.

The Multilevel filter section displays a heading and subheading, up to several filter dropdowns, a Search button, and a row of quick-access category links (for example, "Shop by Product," "Shop by Brand," or "Shop by Service Type") beneath it.

To add a Multilevel filter:

1. In the left sidebar, under Template, click Add component and select Multilevel filter.
2. In the settings panel, configure:
   • Color: Choose a color scheme, or click Edit to modify the current one.
   • Background image: Click + Add image to set a background image for the filter section.
   • Layer mask opacity: Adjust the slider or enter a percentage to control how visible the background image is behind the overlay (e.g., 30%). 
   • Height on desktop: Sets a fixed height for the section on desktop (e.g., 650px).
   • Height on mobile: Sets the height on mobile, choose Fit to content size to let it adjust automatically.
3. Click Save to apply your changes.