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