> ## Documentation Index
> Fetch the complete documentation index at: https://varaahi.vritservicespro.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Collection page

> The collection grid with filtering, sorting, swatches and a mobile filter drawer.

# Collection page

The Main Collection section renders a paginated product grid with a full filtering and
sorting system — desktop sidebar filters, mobile filter drawer.

![Collection page](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro-c6bfa2fc/images/placeholder/section-collection.png)

Collection page with the filter sidebar

***

## Filtering

Filters are driven by your store's **Search & Discovery** app and your product
metafields. VARAHI renders whatever filters Shopify exposes.

| Filter type | Where it appears |
| - | - |
| Price range | Range slider in the sidebar, price inputs in the drawer |
| Product type | Checkbox group |
| Vendor | Checkbox group |
| Availability | Single toggle — in stock / on sale |
| Metafield filters | Checkbox groups, from Search & Discovery |
| Colour / size | Swatch rows, when swatch metafields exist |

> [!NOTE]
>
> Filtering is powered entirely by Shopify's search engine — VARAHI does not maintain
> its own index. That means filters work with your storefront search, your app
> filters, and your third-party search apps, all at once.

***

## The mobile filter drawer

Below 768px the filter sidebar becomes a slide-up drawer with a sticky "Show results"
button showing the live count of matching products. Filtering is applied as you toggle
options, and the count updates immediately.

> [!WARNING]
>
> The count in the "Show results" button is the number of products matching the
> **currently applied** filters. If a shopper applies filters and then closes the
> drawer, the grid is already filtered — that is intentional, and the active filter
> count appears next to the sort control so they can always tell.

***

## Sorting

| Option | Notes |
| - | - |
| Featured | Shopify's default merchandising order |
| Best selling | By units sold |
| Newest | By creation date |
| Price: low to high | |
| Price: high to low | |
| Title: A–Z | |

***

## The product card

Rendered by `snippets/product-card.liquid` and used across the collection grid,
related products and search results.

| Element | Notes |
| - | - |
| Image | First product image, lazy-loaded, with a second image on hover where available |
| Swatches | Colour swatches from the `swatch.color` metafield |
| Title | The product title |
| Vendor | Shown when the section setting is enabled |
| Price | Price with compare-at price and percentage saved |
| Badge | "Sold out", "On sale" or a custom label |
| Quick add | Adds the default variant to the cart without leaving the page |

> [!NOTE]
>
> **Quick add** adds the product's first available variant straight to the cart. It is
> disabled when a product has options that require a choice — a shopper should never
> end up with a size they did not pick.

***

## Empty and no-results states

| State | What renders |
| - | - |
| Collection is empty | A considered empty state with a link back to the shop |
| Filters exclude everything | A message with a "Clear filters" action |
| No search results | A message and a link to browse the collection |

> [!NOTE]
>
> The "clear filters" action resets both the filters and the search query, so a
> shopper who has over-filtered can always get back to a full grid in one click.

***

> **[Product page](https://varaahi.vritservicespro.com/sections/main-product.md)**
>
> The destination of every card.

> **[Product discovery](https://varaahi.vritservicespro.com/features/product-discovery.md)**
>
> Search, wishlist and recommendations.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.