> For the complete documentation index, see [llms.txt](https://utd-bv.gitbook.io/manual-shopify-theme-ultra/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://utd-bv.gitbook.io/manual-shopify-theme-ultra/templates/search-template.md).

# Search template

**Adding a Section**

<figure><img src="/files/10Y2S2EAewnZHQkNbJIG" 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="/files/AuWPvrWKJkNR6m9gcBcf" 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="/files/KL5lYDmZq7WVkVfbO5Tk" 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="/files/QPjBG1jxIjX98U9THCKT" 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="/files/vZkZ9PpVnvH6NpbW982S" 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`.