🛠️Search template

Adding a Section

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

Section settings

General

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

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

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.

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.