# Search template

**Adding a Section**

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2Ff06vpc9OzdmmSWp0Av8p%2FUntitled%20(1).png?alt=media&#x26;token=fa64b2a3-a204-45a0-9b8a-315bae525bc2" alt=""><figcaption></figcaption></figure>

The section is static on the **Search page** template, it was added initially and cannot be removed.

## **Section settings**

### General

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FPssP7nX34uQ2r9Bepi82%2FUntitled%20(2).png?alt=media&#x26;token=badcbd6f-610d-46d4-b429-8e2727a06f83" alt=""><figcaption></figcaption></figure>

1. **`Heading`** - the setting allows you to set the heading;
2. **`Show color swatch in filters`** - the setting allows you to show or hide a color swatch in filters;
3. **`Show grid button`** - the setting shows the user grid selection buttons where they can choose to display 3 or 4 cards in a row;
4. **`Filters type`** - the setting allows you to choose the location of filters on the search page, there are two options horizontal or in the drawer;
5. **`Paginate by`** - the setting allows you to specify the number of results in the search sidebar;
6. **`Pagination type`** - the setting allows you to select the type of pagination. Has several meanings:
   * **`Pagination`** - default pagination of elements;
   * **`Load more`** - loading a group of elements on a button click;
   * **`Infinite scrolling`** - loading elements on scroll.

#### Colors

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FI4FiDRxan1Y5bD431M8I%2FUntitled%20(5).png?alt=media&#x26;token=57827c7b-62a1-46ea-8d2a-f64e7677d929" alt=""><figcaption></figcaption></figure>

1. **`Enable products colored background`** - a setting that enables a custom background color and text color for product cards;
2. **`Product cards background`** - default card background color;
3. **`Product cards color`** - default card text color;

### Layout

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FhIVoeDM5uoEl7NOffUMf%2FUntitled%20(3).png?alt=media&#x26;token=cb501358-f383-4eb3-858b-4266246750e1" alt=""><figcaption></figcaption></figure>

1. **`Make full width`** - if disabled - container width will be set based on the group 'Layout' settings in the Theme settings;
2. **`Desktop offset top`** - the **top** indent of the section on the **desktop**;
3. **`Desktop offset bottom`** - the **bottom** indent of the section on the **desktop**;
4. **`Mobile offset top`** - the **top** indent of the section on the **mobile**;
5. **`Mobile offset bottom`** - the **bottom** indent of the section on the **mobile**.

### **Additional information**

1. Learn more about **Shopify Filtering**: <https://help.shopify.com/en/manual/online-store/themes/customizing-themes/storefront-filters>
2. When you change the color of the text, you may encounter a situation where in Select sorting the color of the icon does not change.

<figure><img src="https://3988388892-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX39aWWRJk2Y01xGBqnJw%2Fuploads%2FIu2zXNer9kVt0a0o2iCr%2FUntitled%20(8).png?alt=media&#x26;token=6a6dcbe5-0133-452e-a5b2-d1851c3e6ee0" alt=""><figcaption></figcaption></figure>

This happens because the icon is added with a picture. To change the color of the icon, you need to go to `Edit code` → `Assets` → `icon-select.svg` and delete the current icon, then add a new one with the desired color. The main condition is that it has the same name - `icon-select.svg`.