Search results template


Setting Description
Number of columns on desktop The “Number of columns on desktop” setting allows you to select the number of columns in which your products will be displayed on larger screens, and on tablets. You can select from 1 to 6.
Show breadcrumbs By enabling this option, breadcrumbs will be displayed above the page banner, providing navigation links to help visitors back to main page – homepage.
Color scheme

Choose an appropriate color scheme for the search results template.

*Applying a color scheme automatically updates all associated colors set in the theme settings according to the created color schemes. You can edit colors in this block, but it will impact the other sections and blocks in which the same color scheme is used.  Learn more about color schemes.
Description 

To add a description to the search results template, simply enter the text in the provided field.

In the top menu of the field, you can find options to customize text, such as making its font bold or light, italic, or adding a hyperlink. Additionally, you can use the style of headings from H1 to H6 to the body text.

Furthermore, you can click the dynamic source button to insert a dynamic source as the description of the section.

Product card

Setting Description
Image ratio

Image Ratio controls how your images look based on their shape. Here are the options:

  • Adapt to Image: Keeps the original shape of the image, no cropping.
  • Portrait: Makes the image taller.
  • Square: Makes the image a perfect square.
Custom image height Set a custom image ratio and adjust its height using a convenient slider.
Image shape

You can check and choose from the following shapes for product cards in the dropdown:

  • Default
  • Arch
  • Blob
  • Chevron left
  • Chevron right
  • Diamond
  • Parallelogram
  • Round

To view the changes:

  • Select the Standard style in the Theme Settings under the Product Card tab to explore different image shapes.
  • If the style is set to Card, ensure the product background is different from the card background in color scheme.
Show vendor Show the vendor of the product after product title.
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.
Show product type You can show or hide the product type (e.g., headphones) added on the product detail page using this button.
Show color variants

Enable this option to show color swatches. This option works with the Color Variant Name option.

In the Color Variant Name field (Theme settings — Product cards tab), ensure you enter the name of the variant option, such as “Color.” It should match exactly as it appears in the Product Detail Page in the Shopify Admin Variants section.

Directly on the product card, you can preview different product variant colors and even add a selected variant to your cart. Simply click on the desired color swatch, then hover over the product card and click “Add to Cart”.
Show quick add button Enables or disables buy buttons in product cards.

Filtering and Sorting

Settings Description 
Enable filtering Enable the setting, 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.
Enable sorting  Enable the setting to enable sorting at the top of the collection (with a "Sort By" dropdown list).
Sorting color scheme Select a color scheme for the “Sort By” options. This color scheme will apply to the dropdown menu that allow customers to sort products based on various criteria, such as price, popularity, or newest arrivals.

Blog card

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.

Mobile layout

Setting Description
Number of columns on mobile

Select the preferred column layout for mobile devices:

  • 1 column
  • 2 columns

Section padding 

Setting Description
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. 
Top padding mobile The "Top padding mobile" setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile The "Bottom padding mobile" setting works similarly to the "Top padding mobile" setting but controls the space at the bottom of the section for mobile devices.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us