> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/avante-themes/templates/default-collection.md). # Default collection The Default collection template controls the product grid, filters, and card layout for every collection page in your store. Every collection page uses this template by default. Configure it to control how the product grid is structured, how filters and sorting behave, and what information appears on each product card. {% hint style="info" %} **Theme Editor → page selector → Collections → Default collection** {% endhint %}

*** ### Collection page The Collection page section is the core of this template. It controls the collection header, product grid layout, filter panel, and every product card within it.

### **Collection image and description** The collection header displays the name, product count, description, and banner image — all pulled from Shopify Admin. {% hint style="info" %} To update the collection description or banner image, go to **Shopify Admin → Products → Collections** and edit the collection directly. {% endhint %}

**Show image under heading** — places the banner image below the collection name rather than above. Useful when the heading needs to appear first for SEO or visual hierarchy reasons. ### **Product grid** **Show product count** — prints the number of products in the collection above the grid. Its type size is set separately, under **Filter content size → Total products size**. **Enable availability toggle** — appears only when **Enable filtering and sorting** is on. It changes the way the standard **Availability** filter is drawn: instead of a checkbox list it becomes an **In stock only** switch with the product count beside it, inside the filter itself. There is no separate button above the grid, and nothing shows up unless Availability is one of the filters configured in the Search & Discovery app. **Desktop filter style** — three options that behave differently depending on the store's navigation layout: | Style | Behavior | | -------------- | -------------------------------------------------------------------------------------------------------------- | | **Horizontal** | Filter bar spans across the top of the grid | | **Vertical** | Filters appear in a sidebar on the left — automatically switches to Drawer in sidebar-based navigation layouts | | **Drawer** | Filters open in a sliding panel. Default on mobile regardless of the desktop setting | **Drawer button and collection search position** — choose whether the filter button and the collection search field appear **Inline with heading** (next to the collection name) or **Below heading** (on a separate line). **Tabs always open** — enter filter names (e.g., `Size, Color`) to keep those tabs permanently expanded in Drawer and Vertical styles. Separate names with commas. **Description of filters with 'AND' operator** — adds a short label (e.g., "Match all") that explains to customers that selecting multiple values within a filter shows only products matching all of them. [Learn more about AND filter behavior.](https://help.shopify.com/en/manual/online-store/storefront-search/search-and-discovery-filters#filter-behavior) **Infinite scroll** — controls navigation at the bottom of the product list:

Mode	Behavior
Disable	Classic numbered pagination
Button	"Load more" button reveals the next batch of products
Auto	True infinite scroll — products load automatically as the customer scrolls

**Grid type** — ten layouts. **Two**, **Three** (the default), **Four**, **Five** and **Six columns** are even grids. The five **Alternative** layouts mix card sizes. Their numbers show how many products sit in each row:

Layout	Rows on desktop
Alternative 2	Two products per row in three columns: one wide card and one regular card. The wide card alternates position.
Alternative 3	Three products per row in four columns. The wide card shifts position.
Alternative 3-4	Rows of three and four. The three-product row has a wide card that alternates left and right.
Alternative 4-3	A row of four, followed by a row of three larger cards.
Alternative 4-1-2	A row of four, followed by one large centred card or two centred cards.

On mobile, every Alternative layout becomes a regular one- or two-column grid. It follows **Mobile layout**. {% hint style="info" %} Stores updated from an earlier version: **Alternative 1** is now **Alternative 2**, and **Alternative 2** is now **Alternative 3**. The layouts themselves have not changed. {% endhint %} {% hint style="info" %} Five and six columns put a lot of products above the fold, which pays off for catalogues of many similar items — accessories, spare parts, groceries. They also make every card small, so turn off whatever needs reading room on the card (short description, pickup availability) and keep an eye on Banner tiles: **Min span at 5-6 columns** exists precisely because a one-cell banner gets lost on a dense grid. {% endhint %} **Grid gap → Custom** — switch from Default to Custom to set independent column and row gaps for desktop and mobile separately. ### **Collection search** A shopper who lands on a 300-product collection looking for one thing has two options: scroll, or leave. Collection search gives them a third — a field that narrows the collection as they type, with no page reload. **Enable collection search** is off by default. Once it is on, the field appears on any collection holding more than one product, and the search runs inside that collection only. Place it with **Drawer button and collection search position**. It matches the product title, the vendor, the tags, the product subtitle metafield, and variant SKUs and prices. Every word typed has to match: *blue linen* returns the products carrying both words somewhere in that list, not the products carrying either one. {% hint style="info" %} The theme loads the rest of the collection in the background, so results cover the whole collection rather than the products currently on screen. Pagination and Load more hide while a query is active and come back when the field is cleared. {% endhint %}

Collection search settings

**Field width** — **Short**, **Medium** (default) or **Wide**. **Placeholder text** — the prompt inside the empty field, `Search the collection` by default. Naming what is being searched ("Search 300 wines") works better than a generic prompt.

### **Collection navigation** A row of tabs under the collection heading that either links to other collections or filters the current one by a single filter — the fastest way to let shoppers move between *Men / Women / Kids* or *Red / Blue / Black* without opening the filter drawer. It has enough logic of its own to deserve a page: see [Quick filter](/docs/avante-themes/features-and-advanced-setup/quick-filter.md). ### **Grid switcher** One shopper wants to see the weave of the fabric, the next wants to scan sixty products in one screen. The grid switcher hands that choice over: three small buttons above the grid that change how many products fit in a row, instantly, with no page reload. **Enable** is off by default. **Label** is the word printed next to the buttons, `Grid` by default — leaving it empty hides the whole control. Each button shows a number: how many products its row will hold. Desktop and mobile get their own numbers, and the middle one follows the **Grid type** you picked above.

Button	Desktop	Mobile
Left	2 products per row	1 product per row
Middle	Your Grid type, Alternative patterns included	2 products per row
Right	8 products per row	4 products per row

The middle button is the one pressed when the page opens, so the storefront still looks exactly as you configured it — the customer only overrides it for themselves. On mobile the middle button is active too, unless **Mobile layout** is set to one column, in which case the left button is. {% hint style="info" %} **Two columns** and **Alternative 2** are a special case. Both already show two products per row, so there is nothing for the left button to do — it takes over your layout, and the middle button becomes a four-column grid. The left button starts active instead of the middle one. {% endhint %} The choice is remembered in the customer's browser, so it carries over to every other collection built on the same grid settings and survives a reload. It also survives filtering, sorting, Load more and infinite scroll: products that arrive after the switch keep the chosen density, and the theme re-requests images at the size the new layout needs rather than stretching the old ones. {% hint style="warning" %} The control needs at least two products in the collection to appear. It also needs a **Label** — clearing that field is another way to switch it off. {% endhint %} **Customization ideas.** A dense eight-per-row view is what rewards a catalogue of similar items — spare parts, beads, wallpaper samples, wine. The two-per-row view makes the opposite argument: it is where texture, print and finish become visible, so it earns its place in fashion, ceramics and furniture. If your products do both jobs, the switcher saves you from having to choose. ### **Product image switcher** Fashion and jewellery brands shoot everything twice: on the model and flat on the table. The product image switcher is a single toggle above the grid that flips every card in the collection to its second photo at once, so a shopper can read the whole collection as outfits, then read it again as products. **Enable** is off by default. **Label** is the text beside the toggle, `On model` by default — rename it to whatever the second shot actually is: `Detail`, `Flat lay`, `In use`, `On wall`. The image it switches to is the card's alternate media, chosen the same way the card picks its hover image. With **On hover → Show** set to **Second image** or **Nothing**, that is literally the product's second media. With the slider styles or Hover gallery, it is the media that follows the one on screen, so a variant image the customer has already selected is respected rather than discarded. Products that have only one image keep it. The toggle never leaves a card blank, which means a catalogue with partial second shots still works — it simply switches fewer cards. The toggle holds while the customer works through that collection: moving between its pages, or returning to it with the browser's Back button after opening a product, keeps the alternate view. Opening another collection clears it, and so does refreshing the page — nobody arrives from Google, or from a hard reload, into a view they did not ask for. {% hint style="info" %} Consistency is what makes this feature pay off. If half the catalogue has a model shot in second position and the other half has packaging, the switched view looks accidental. The order of media on the product in **Shopify Admin → Products** is what decides it, so it is worth agreeing on a rule — second slot is always the model shot — before turning the toggle on. {% endhint %} {% hint style="warning" %} Like the grid switcher, this control disappears if **Label** is empty. Both controls share one row above the grid, and where that row lands depends on **Desktop filter style** and **Drawer button and collection search position**. {% endhint %} ### **On hover** **Show** controls what happens when a customer hovers over a product card: | Option | Behavior | | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Second image** | Swaps the card image for the product's second image | | **Slider** | Turns the card into a slider the customer steps through image by image | | **Slider with second image** | The same slider, but hovering also jumps straight to the second image and back on leaving | | **Hover gallery** | Splits the card into as many invisible vertical zones as the product has media. Moving the cursor across the card switches images instantly; leaving it returns to the first | | **Nothing** | No hover interaction | {% hint style="info" %} There is no hover on a touchscreen. On phones and tablets the slider styles and Hover gallery become a card the customer can swipe instead. {% endhint %} **Enable 'Add to cart' button** — shows a quick add button on the card. If the product has multiple variants, clicking it opens a Quick View popup for variant selection before adding to cart. **Enable 'Quick view' button** — opens a product popup with full details without navigating away from the collection page. See [Quick view](/docs/avante-themes/templates/quick-view.md). ### **Product card** Most settings here are self-explanatory. Non-obvious ones: **Show short description** — displays the product subtitle on the card. Requires setting up the `Product subtitle` metafield in **Admin → Settings → Metafields and metaobjects → Products**. See [Product subtitle](/docs/avante-themes/features-and-advanced-setup/product-subtitle.md). **Enable color pills** — shows color variant swatches directly on the product card. Requires color pills to be configured in Theme Settings → [Variant selector](/docs/avante-themes/theme-settings/variant-selector.md). **Show pickup availability** — displays in-store pickup status on the product card. Requires retail locations configured in Shopify.

*** ### Banner **Banner** is a block rather than a setting: it drops a promo tile into the product grid in place of a product card. A lookbook image, a sale message, a short video — in the middle of browsing, where it gets seen. Add the block in the section's block list and set: **Position in grid** — which cell the tile takes, from 1 to 36. The theme may move the tile to fill empty spaces, so check the result on the storefront rather than trusting the number. **Size** — **1 x 1**, **2 x 1** (default) or **2 x 2** product cards. **Mobile size** is separate and defaults to **1 x 1**. **Media type** — **Image** or **Video**. An image tile takes a separate **Mobile image**, which falls back to the desktop one when left empty. **Min span at 5-6 columns** — on by default, shown only on the five- and six-column grids. It stops a one-wide banner from shrinking to a single cell by promoting it to two. {% hint style="warning" %} Banner tiles are hidden while any filter is active, so a customer who has filtered the collection sees products only. On Alternative grids, the desktop **Size** setting is hidden. The tile takes the size of the product card in its slot, so on **Alternative 3-4**, **Alternative 4-3** and **Alternative 4-1-2** it can appear wide or large based on **Position in grid**. **Mobile size** still works. {% endhint %}

Content and link settings

**Media overlay** and **Media overlay opacity** — a colour laid over the image or video, black at 20% by default, so text stays readable. **Link** and **Open link in a new tab** — where the tile leads. The whole tile is clickable. **Center text**, **Vertical content position**, **Horizontal content position** and **Narrow content width** — where the text sits inside the tile and how wide it is allowed to run. **Subheading**, **Heading**, **Text** and **Dim text** — the copy on the tile. **Button label** and **Button style** — the call to action. Leaving the label empty keeps the tile clickable without a button.

--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://staylime.com/docs/avante-themes/templates/default-collection.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.