Search results settings

Banner settings

Setting	Description
Heading size	The heading size setting offers three options to control the size of your site's headings: Small Medium Large
Heading color	The “Heading color” setting offers four options to customize the color scheme of your card's heading: Text main color Text secondary color Headings color Headings secondary color
Banner left overlay	Apply an overlay over the banner image on the left to enhance its visual appeal.
Banner right overlay	Add a second overlay to the banner image on the right, allowing for creative combinations of overlay.
Make section full width	Mark the checkbox, and the section will take up the full width of the page.
Background color	There are six options: Background main, Background section 1,2,3,4,5. Colors for these backgrounds can be set in the Theme Settings/Colors block.
Background gradient	Use the gradient picker to create a custom gradient for your section background.
Top padding	The “Top padding” setting allows you to adjust the amount of space at the top of the section using a slider.
Bottom padding	The “Bottom padding” setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section.

Grid settings

Number of columns on desktop

The "Number of columns on desktop" setting allows you to choose the number of columns in which your content will be displayed on larger screens, and on tablets. You can select from 2 to 5 .

Grid style

Select the style for displaying product and blog post cards on the search page:

Grid: Product, blog post cards are displayed in a traditional grid layout.

Collage: Product, blog post cards are arranged in an artistic collage layout, with images varying in size.

Show grid navigation

Activate this option to provide users with the ability to view products in different grid views or collages by clicking on the grid navigation.

Product card

Setting	Description
Image ratio	The "Image ratio" setting allows you to control how images are displayed on your website based on their width-to-height ratio. You have several options to choose from: Adapt to image: This option uses the aspect ratio of the images, ensuring that they are not cropped and displayed in their original dimensions. Portrait: This option crops the images to use a 2:3 ratio, creating a taller appearance with a width that is 2/3 of its height. Square: This option crops the images to use a 1:1 ratio, creating a square-shaped display with equal width and height. Tall view: Sets the image ratio to a taller aspect, making images appear taller than they are wide. Images are taller than portrait images.
Show second image on hover	You can see the second image on hover if on the detail page of this product are 2 or more images in the list.
Show vendor	Show the vendor of the products under the image.
Show product rating	Displays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app such as Shopify Product Reviews, and Metafield definitions for reviews.rating_count and reviews.rating.

Blog card

Blog card styles also apply to page cards in search results. To change card styles, update your theme settings.

Setting	Description
Show date	Enable this option to display the publication date of the blog post.
Show author	Enable this option to display the author's name of the blog post.
Show comments	When this option is enabled, customers will see the number of comments left on a particular blog post displayed on the blog post card.
Author prefix	Enhance the display of author names by adding a prefix before their names. This feature allows you to include a specific label, such as "by," before the author's name, creating a more structured and professional presentation of content.

Filtering and Sorting

Settings	Description
Enable filtering	Mark the checkbox and at the top of the collection, you will see a filter with price, color, size, and availability.
Desktop filter layout	We have three filter layouts: Horizontal Vertical Drawer Try each of them and select according to your preferences.
Show filter checkboxes	Adds checkboxes to select attribute options in filters.
Enable sorting	Check the checkbox to enable sorting at the top of the collection (with a 'Sort By' dropdown list).
Show sorting label	Check the box to show the sorting label next to the sorting dropdown, or alternatively, you can leave the box unchecked to have it without the label.
Filtering size	You can see in Drawer filter layout or with all three layouts on tablet mini and mobile. Three sizes are available: Small Medium Large
Filtering and sorting colors on hover	Select the color for the filtering and sorting items when hovered over. You can customize these colors using the following options: Text main color Text secondary color Headings color Headings secondary color

Pagination

These settings apply to inactive pages. For instance, if you're on page 1, pages 2, 3, 4, etc. will adhere to these color settings.

Setting

Description

Pagination color

The “Pagination color” setting offers four options to customize the color scheme of the pagination number:

Text main color
Text secondary color
Headings color
Headings secondary color

Pagination background

There are six options: Background main, Background section 1,2,3,4,5. Colors for these backgrounds can be set in the Theme Settings/Colors block.

For the active page, such as when you're on page 1 and wish to modify the text color and background, navigate to the theme color settings/ Button primary.

Mobile layout

Setting

Description

Number of columns on mobile

Select the preferred column layout for mobile devices:

1 column
2 columns

Section settings

Setting	Description
Background color	There are six options: Background main, Background section 1,2,3,4,5. Colors for these backgrounds can be set in the Theme Settings/Colors block.
Background gradient	Use the gradient picker to create a custom gradient for your section background.
Top padding	The “Top padding” setting allows you to adjust the amount of space at the top of the section using a slider.
Bottom padding	The “Bottom padding” setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section.