# Search and Collection pages

### 1. How to enable/disable filter feature?

The **Filter feature** allows you to display and apply different product filters on the search results or collection page. It should be used when you have a lot of products in your store. It will help customers can find what they are looking for much faster and easier.

![The Filter feature on Collection page](/files/ZgrfYMwMVSXer43vIsRa)

#### 2.1. With the old themes that does not support OS 2.0

With these themes, you can easily enable/disable the **Filter feature** on Collection and Search page by using below option: 

![](/files/F1aNlMazvpixaBrDM5Vb)

#### 2.2. With Shopify theme OS 2.0

To enable/disable **Filter feature** with Shopify theme OS 2.0, when clicking on the **Enable/disable filter feature** option, a popup will display allowing click to redirect to the theme editor to disable the Search result widget on Collection or Search page. 

Please see the below gif:

![](/files/OmU3F80RNjSaMWu7hvmq)

### 2. Customize Collection & Search pages

To customize for Collection and Search page, please go to **Theme Customize ->  Select Collection/Search pages** on the dropdown box.

![](/files/RTrK97ngH9b8nxRepxK1)

#### 2.1. General settings

Here are the most general settings for Collection and Search page. You can change the **default sorting**, **default view** and **number of product per page**.

![](/files/JccnsNN4NfFtg725UZrS)

**Default sorting:** With the collection template of Shopify, you can change the default sorting in the collection in Shopify. But when you use Flash Search widget, you can change it here.

**Default view:** You can change the number of item per row on your collection and search pages to 2 3 4 or 6 items or a list view. 

**Product per page:** It is the number of product per page.

![](/files/pDN9lZEoOMfsuFi99jLJ)

#### 2.2. Layout

To customize layout for Collection and Search page, go to **theme customize -> Collection/Search pages -> Layout.**

![](/files/ny9zDmiqukdJBXToQH6o)

**Layout type:** Here you can choose a layout type for Collection and Search page.

![](/files/LGU3RsuT2iMSBawQOB6f)

*Result for Horizontal style 2 layout:*

![](/files/woPbxdfGE2UIGB48MX4T)

**Layout width:** You can change the width of layout to 1200px, 1600px or full width.

![](/files/RfJ4HSRzAA90fTIcUpTs)

*Result:*

![](/files/mYUeveddlevklGk3bR0F)

#### 2.3. Product label

By default, **product labels** are **enabled** on your Collection and Search page. If you want to disable them, please go to **Theme customize -> Collection/Search pages -> Product label.**

![](/files/v5Hbw6c9FmAOPxJvEid8)

**Display label:** You can enable/disable product labels by turn on/of the below options.

![](/files/ufny1itQOxqOPCGXrNTz)

**Label shape:** You can choose the shape for labels is **rounded** or **rectangle.**

![](/files/wIrDB4Jvnp1XIXHf9ZgI)

Also, you can change **position** from **top-left** to **top-right** and change **font size**, **font weight** for product labels.

![](/files/Hh2f5HsfhHrOhBDcpm7M)

#### 2.4. Product image

Here you can change the effect when hovering over product image. Go to **Theme customize -> Collection/Search pages -> Product image.**

![](/files/GGVfsEcdS4JLWEe6FBep)

**Display image:** You can choose to show one or two images when hover over product image.

**Two images hover effect:** If you choose two images, you can set the hover effect is zoom or show opacity.

**Background overlay:** Select background overlay as a percentage.

![](/files/EFce4jG6AJ14mRd7mAJs)

#### 2.5. Collection page header

The options here allow you **enable** or **disable** the **header** on **Collection page**. Also, you can change style for it. Go to **Theme customize -> Collection/Search pages -> Collection page header.**

![](/files/jhslRbArLo0GTICxpXJX)

**Display page header:** If you enable, the **collection name** will show on all collections page as a header.

![](/files/F4moNO1GYHXV4QPy7qV4)

*Result on live collection page:*

![](/files/sFL3WAC5cTlaeWnbJAQJ)

#### 2.6. Search page header

* **Options:** Here you can enable or disable the header and search box on the Search result page.

![](/files/k1ZwKhxEndhKYBYf5suH)

* **Look and feel:** There are some options help you design for page header and search box.

![](/files/JNNhaGyxR4tfVA4TNhNf)

* **Translations:** You can change header and placeholder text in the search form. **{count}** will show the number of product result. **{searchTerm}** will show the searched term.

![](/files/FYrwJE6OknLAHs5wCAIF)

*Result on live pa*ge:

![](/files/sp32JA2P9HJnjXgl388E)

#### 2.7. Tool bar

In this **Toolbar** section, you can enable/disable Filter, product layout views, sort by and total products. Also, you can change style and change texts.

![](/files/1s1LQ87ATnvwXc1b5HVI)

* **Options:** There are some options allow you enable/disable the elements on toolbar.

![](/files/c4NQIzQZ1hN3mDaUWmFM)

* **Look & Feel:** Under this tab you can change style for all elements on the toolbar like text color, icon color...

\+ Filter and Total product:

![](/files/nlbtM1IcmixsgKQmbaYD)

\+ Sort by:

![](/files/8RqSOC6PziVhIcXcom8S)

Grid/List view:

![](/files/7txkaEo0NPkiJtF87Oeh)

**Translations:** All text on Toolbar can be changed here. You can change to your language. The default language is English.

![](/files/G6PhXYkMji6qKrM3TBKK)

#### 2.8. Product item

The options here will applied to all product items on Grid and List layouts.

![](/files/XRGFWH91AXhxFgULSG6s)

* **Border:** You can add a border to arrow **product image** or **product item**.

![](/files/Nvfy8b9bpoKNgpOIKLWm)

*Result for border around product image on live collection page:*

![](/files/bJ9Wy1gRIbbhVCFmjqxb)

* **Product buttons:** They are the buttons on product item.

![](/files/bAa5xOsJJe8y4xPgcwAm)

* **Button design:** We have several designs for buttons that you can choose here. You can choose different designs for buttons on mobile and desktop.

![](/files/fuTjUzx6M1Xfb86kvhT2)

*Result for button **design 3 center** on desktop:*

![](/files/HJ87IJAORIyh6AHS3Yry)

*Result for button **design 5** on mobile:*

![](/files/zQT0fSqyztnGsf1RQ6Mt)

If you choose **design 7** for buttons, we have some options to change **background and text color** for **Add to cart** button:

![](/files/inam2EYwOUXBMRpB22Yo)

#### 2.9. Product variants

If your products have **Color** and **Size** variants and you want to show them on product item, you can do that here and customize for variant options. 

Go to **Theme customize -> Collection/Search pages -> Product item.**

* **Product color:** 

![](/files/1CGHAt1vLwDBO2aynfKY)

\+ **Display product color:** If you enable this option, the color options will display below product image.

![](/files/qxv0lUklVMUQzjnyj9aV)

\+ **Show type:** You can choose to show **all colors** or **only show available colors** (this means that it will hide out-of-stock color variants)

![](/files/OpzJ0xsCjc9k5BobRUUr)

\+ **Swatch layout type:** Here you can choose to show the variant options as **swatch color** or **swatch image.**

![](/files/no1GWg93iXM2Mjpu8W6X)

\+ **Swatch size:** You can change the **size** for swatch options. We have three sizes for you to select.

![](/files/Lb1Bwxu7zA9sLd6KoP8C)

\+ **Swatch style:** You can change the style of swatch options to **rounded** or **square**.

![](/files/gKA4pAEGhHfqsqXddZcs)

\+ **Color option name to show Product color**s: This option to fill the **variant name** to. For example, in Shopify, the variant name of your products is "**Color**", you must fill that "**Color**" text to this option. Or the variant name is "**Colour**", you must fill to this option "**Colour**". That is, it must be the **same as the variant name in Shopify**, case sensitive. Press "enter" on your keyboard to add more names.

![](/files/JUyOSsTGzrT7AtRtxIY4)

\+ **Show more options:** For example, you have all 10 variant options, you can adjust to show only 5 and when you click on show more colors, it will show all options.

#### 2.9. Quick view

#### 2.10. Pagination

#### 2.11. Filters


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.flashsearch.io/layout/customization/customize/search-and-collection-pages.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.