> For the complete documentation index, see [llms.txt](https://docs.flashsearch.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flashsearch.io/layout/customization/customize/search-and-collection-pages.md).

# 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