> 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](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FqRiKhFdmoExqCYrtxVIp%2Fimage.png?alt=media\&token=e349acbb-9824-4434-8f92-19bf70e6bd10)

#### 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: 

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2F2PzfuZbd8s79uQon8ObN%2Fimage.png?alt=media\&token=03b6804f-9168-41c3-9414-8f4e8812f4a1)

#### 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:

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2F1bUO6pgrcaIHtlW5TiGX%2F2022-04-14_20-06-28%20\(1\).gif?alt=media\&token=b93bf740-c8cd-4543-96c9-11c158dd7dd1)

### 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.

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FlKtnRf5ZDhqFPz1rec8U%2Fimage.png?alt=media\&token=9e6bd8b0-f943-4e89-a6c8-b785560e51db)

#### 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**.

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FjGvl0KlZBOCxVg83Z6Ep%2Fimage.png?alt=media\&token=2ffa1b02-40f2-48d0-be6e-c8bb981ee7cf)

**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.

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2Fl2MKq1qFxljvlb8XBgiN%2F2022-04-21_15-36-50%20\(1\).gif?alt=media\&token=4bfe52aa-5f7c-455c-a8fc-6f25c71f3baf)

#### 2.2. Layout

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

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FnmY96HsDxujjML6eQtkx%2Fimage.png?alt=media\&token=e4cd49ec-e62d-420f-9c96-a92370da3888)

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

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FGErcpgcv4ThC1HOQLohB%2Fimage.png?alt=media\&token=59b3acc6-99ca-4124-8c68-f24eaf54534f)

*Result for Horizontal style 2 layout:*

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FH0zG3qDzSB6ElGpNgTb7%2Fimage.png?alt=media\&token=0d78c659-4309-434a-b308-35976d6a5d71)

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

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FUUCT0Zjjb7XTsxmL4qyX%2Fimage.png?alt=media\&token=4a3c2210-b0a0-45d7-b27a-0a1f9eddef40)

*Result:*

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FVxBcMCqcYlMgWbP7G6Ra%2Fimage.png?alt=media\&token=98d7929c-883a-4eb2-8581-85cf8f677ec8)

#### 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.**

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FwylZ4gJR8TSeYLlO3plD%2Fimage.png?alt=media\&token=ea3e1767-d025-45cd-b188-56fb5e588a24)

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

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2F8X2ux9fm4OjDAsDKfSyg%2Fimage.png?alt=media\&token=375abeb0-21dc-4cbb-8229-891b03cdaade)

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

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FXGAgZ3e1baeLdgnQc5OF%2Fimage.png?alt=media\&token=ecafe4eb-c9ab-4120-b875-535f819a0e86)

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

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2F67uS7ype1UNSsUAIyw3O%2Fimage.png?alt=media\&token=c2ddf770-0e5e-45e9-a16f-54b50fa81443)

#### 2.4. Product image

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

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2Fc06bwuwwOmYcyyQ4CgoE%2Fimage.png?alt=media\&token=e4364eb8-c0b1-47df-8d0e-99c70f4794d4)

**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.

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FS5Imcm404GsMW3VpwtFi%2Fproductimage.gif?alt=media\&token=6f499809-c6ef-4b24-85e4-6e7e27e1dd35)

#### 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.**

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2Fcu7dfjuyLfGPm7fWOHQY%2Fimage.png?alt=media\&token=b77976d4-99ba-4b35-a4b0-a72a3f504a1c)

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

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2Fc4Ea8S4fff7RHgV4KCvc%2Fimage.png?alt=media\&token=80f33831-789f-4b95-a136-3a4dd26220a6)

*Result on live collection page:*

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FLMvl1hNL7YhxDJMErvUB%2Fimage.png?alt=media\&token=6bdd83a8-80bd-4680-9b73-083bd43060fd)

#### 2.6. Search page header

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

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FZVkwAJa4xn7z6idm2fQp%2Fimage.png?alt=media\&token=eca26eb7-f5fd-42b3-a3a5-2bafc19e83a1)

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

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2F7mm5rWqWvO1QZfTrAMcy%2Fimage.png?alt=media\&token=3d90a00b-3424-457f-8c3b-a04316323532)

* **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.

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FAUiTHw12ZXKHFJpjwMNe%2Fimage.png?alt=media\&token=5bd5f3aa-9beb-4875-aa87-9d19752b3f0a)

*Result on live pa*ge:

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FpMsdrIEJXPvpUPWDoEgT%2Fimage.png?alt=media\&token=ccfcc4ed-214e-47d9-8e87-e7b202987f67)

#### 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.

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FbH8KaOCNTkdibaJ8YaOw%2Fimage.png?alt=media\&token=194620e8-da62-4ab3-bd67-d74de5ad05a2)

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

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FaJzl673mTHir7DePQ7D8%2Ftoolbar.gif?alt=media\&token=5e8ddd25-b484-457f-9d6c-56e9a71f8b0e)

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

\+ Filter and Total product:

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FoVWimQZhCO53Sxo7waoE%2Ftoolbar1.gif?alt=media\&token=febedd7e-65b0-4f17-b27f-758bdb7499e5)

\+ Sort by:

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FRTtk9p1Qp533jglUASRw%2Fsortby.gif?alt=media\&token=a9128348-d1c5-45a8-bf46-e51e42cd04b6)

Grid/List view:

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2Fh9lwiDdWhQZIiwj3wh7k%2Fimage.png?alt=media\&token=93c53297-7e26-40d8-8b23-39e323416c73)

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

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FPrDdDBhpY6T7jaekMXBw%2Fimage.png?alt=media\&token=e34891c3-d00a-4601-a696-c2ce1a08388c)

#### 2.8. Product item

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

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FbLlruflJROsTkV4yTSGc%2Fimage.png?alt=media\&token=ccf7aa96-cb50-49b2-8f62-3e7d6218b7c3)

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

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FSdCzXK1Q1Pwx47fIEt3O%2Fborder.gif?alt=media\&token=d88264ac-17a4-417a-8954-cd40428f986d)

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

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FzK5VUqnp0fA9zjtwGo2f%2Fimage.png?alt=media\&token=944a289f-a65a-4d77-aa28-9119a35414d8)

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

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FilybAPtRfJQxpC34h6r9%2Fimage.png?alt=media\&token=a2e74ca2-52ca-4977-b741-700eaf6603dd)

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

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FqG0iYqaTjQua1oXHzhQz%2Fproductitem.gif?alt=media\&token=a2a8f205-ef1f-4184-843b-71d6388b8d4b)

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

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FipU2xZJgncggF0iwcb0m%2Fimage.png?alt=media\&token=60321863-d276-4741-b229-48757bd60447)

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

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FPEO8kjSke4mZJ7aDq0xB%2Fimage.png?alt=media\&token=073d434c-0983-485b-9700-2e1c64defaec)

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

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FP5joyKineFHqzTpb6939%2Fimage.png?alt=media\&token=286d466a-9beb-484d-b1b0-fc197676e282)

#### 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:** 

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FRTITmZYHtOUGzbAzdWxw%2Fimage.png?alt=media\&token=fac7acc5-ab77-46d6-8e01-95c9252db9fb)

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

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FoZlCEwxGxhB0DV7lNcU5%2Fimage.png?alt=media\&token=5719528d-3c4e-48c1-8505-7e3d8cb82051)

\+ **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)

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FHy6CNyP18cjJvQ03PFPZ%2Fimage.png?alt=media\&token=cd8223fa-46d9-4b17-aa80-bf36a38a64e9)

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

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2F94sNQQYC1arpxNgIRY2o%2Fcolor.gif?alt=media\&token=13b8cc91-14f7-418d-9113-b6bd9ed30f2f)

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

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2F2hnbYKzFhLaRCB5gnqHH%2Fswatch.gif?alt=media\&token=cc79ae83-fcb3-4ebd-a001-2ad550c9901a)

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

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FPRXPjhBk1fwrfa04uxbX%2Fswatch-style.gif?alt=media\&token=cb91dd8a-6d65-4bfb-bfad-3c210b8d3dae)

\+ **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.

![](https://18485717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCzuOkAOl5qfbBdbB78Ru%2Fuploads%2FeOTJnWuj5SFbOJ2WiNNB%2Fimage.png?alt=media\&token=912444fb-cc45-42fe-b805-cb5e72ec8e63)

\+ **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