Search Page: Sections and Blocks

By default, the template group includes two sections:

  1. Search results
  2. Recently viewed

You can add up to 36 more sections in the Add section list.

1. Search results

The settings for the Search results section
Section settings Settings Description
Search results
Products per page Changes the number of products displayed on a page after searching from 6 to 50.
Number of columns on desktop Customize the number of columns displayed on desktop browser: 2 columns or 4 columns.
Numer of columns on mobile Customizes the number of columns displayed on mobile browser: 1 column or 2 columns.
Filtering and sorting
Enable filtering

Customize filters with the Search & Discovery app. Learn more

.		 Enables to display the filter.
Collapse filters Enables to allow users to hide or show filter options
Desktop filter layout

Learn more.

 Lets customers filter the search results based on the filters in your Navigation settings.
Enable color swatches

View setup instructions.

 Enables to dispay color swatches.
Enable sorting Lets customers sort the search results based on the following:
  • Price, low to high - Displays the products from the lowest price to the highest price.
  • Price, high to low - Displays the products from the highest price to the lowest price.
Blog post card
Show tags Displays tags from admin blog posts with images.
Show category Displays a list of categories (eg. products, contents...)
Show date Shows blog post published date.
Show comment count Displays the total number of published comments.
Show author Displays the author of the blog posts.
Heading
Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
Heading tag Selects the heading tag to structure and organize your content for SEO.
Section
Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
Show section divider Shows a line divider above this section..
Make section full width Make the container full width.
Make section rounded Applies a rounded edge to the top two corners.
Custom CSS Adds custom CSS to this section.

Available block: Promotion block

1.5 The settings for the Promotion block.

Blocks may be hidden if not enough products are visible.

Block settings Settings Description
Promotion
Position in grid The position defined by its column coordinates.

For example, if an element has a column coordinate of 3, it will be positioned in the third column of the grid.
Image Chooses/Uploads a section image.
Icon Chooses/Uploads a icon.
Heading The column title.
Description Text describes the column.
Button label The text that displays on the button.
Button link The URL of the button.
Desktop content position Sets the position of the content on desktop:
  • Top
  • Middle
  • Right
Desktop content alignment Sets the alignment of the content on desktop:
  • Left
  • Center
  • Right
Mobile layout
Mobile image Image of the promotion on mobile browser.
Mobile content position Sets the position of the content on mobile browser:
  • Top
  • Middle
  • Right
Mobile content alignment Sets the alignment of the content on mobile browser:
  • Left
  • Center
  • Right
Color

Gradient replaces solid colors when set.

 You can optionally customize the colors of the section, including the following:
  • Text
  • Button text
  • Button background
  • Button background gradient
  • Overlay, can be adjusted from 0% to 100%.

2. Recently viewed

The settings for the Recently viewed section
Section settings Settings Description
Recently viewed
Number of recent products The number of complementary products can range from 2 to 12.
Number of columns on desktop Customizes the number of columns displayed on desktop browser from 1 column to 5 columns
Enable carousel on desktop Displays a carousel of products from the collection on a desktop browser.
Mobile layout
Numer of columns on mobile Customizes the number of columns displayed on mobile browser: 1 column or 2 columns.
Enable swipe on mobile Sets mobile display to one row with horizontal swipe.
Heading
Heading The section title.
Heading size The heading size can be set to one of the following option: Small, Medium, Large, or Extralarge.
Heading alignment The Heading can be aligned to the Left, Center, or Right.
Heading tag Selects the heading tag to structure and organize your content for SEO.
Subheading The subheading for the heading is placed above the heading.
Description The description text for the heading is placed below the heading.
Highlighted text

To add an animated highlight to text, simply wrap it with in italics. Click the "I" button in the editor to toggle italics when highlighting text.

Highlighted text Chooses from one of the following 6 options to format your text:
  • Text color
  • Text background color
  • Fancy underline
  • Regular underline
  • Stencil text
  • Hand-drawn scribble
Highlighted scribble

Require highlighted text style to be set to Hand-drawn scribble.

 This setting offers 5 ways to highlight text:
  • Circle
  • Basic underline
  • Sketch underline
  • Squiggle underline
  • Squiggle underline 2
Color

Gradient replaces solid colors when set.

 You can optionally customize the colors of the section, including the following:
  • Text
  • Background
  • Background gradient
  • Highlight
  • Highlight gradient
  • Button text
  • Button background
  • Button background gradient
Section
Can adjust padding in Top padding and Bottom padding from 0px to 120px, increasing arithmetically of 4px.
Show section divider Shows a line divider above this section..
Make section full width Makes the container full width.
Make section rounded Applies a rounded edge to the top two corners.
Custom CSS Adds custom CSS to this section.

No blocks can be added to this section.

We hope this article has been helpful. If you have any questions or concerns about this feature, please do not hesitate to contact our team for support.

Back to Concept Support