Search page

Overview:

The Main Search section is designed to display search results in a structured and customizable layout for products, blog articles, and pages. It supports search headings, descriptions, filters, sorting, product cards, blog cards, pagination options, responsive grids, typography customization, color schemes, and spacing controls. This section helps merchants create an organized and user-friendly storefront search experience.

Section Configuration

Header Settings

Heading:

Setting	Description
Section Heading	Defines the main heading displayed above search results such as Search Results.
Heading Size	Controls heading size such as H1–H6, Large, Medium, or Small.
Heading Weight	Adjusts the font thickness ranging from Thin (100) to Black (900).
Heading Case	Changes text transformation style such as Uppercase, Lowercase, Capitalize, or Default.
Heading Tag	Sets the HTML heading tag level from H1 to H6 for SEO and accessibility purposes.
Heading Font Family	Allows switching between Default and Body font family styles.
Heading Color Style	Applies predefined color styling to heading text.
Heading Link Style	Controls styling behavior of links used inside heading content.

Description:

Setting	Description
Section Description	Displays supporting text below the search heading.
Description Size	Controls text size such as Large, Medium, or Small.
Description Weight	Adjusts the font thickness ranging from Thin (100) to Black (900).
Description Case	Changes text transformation style such as Uppercase, Lowercase, Capitalize, or Default.
Description Font Family	Allows switching between Default and Heading font family styles.
Description Color Style	Applies predefined color styling to description text.

Product Card Settings

Media Settings:

Setting	Description
Product Media Ratio	Controls image ratio such as Adapt, Square, Portrait, Landscape, or Fit to Box.
Desktop Product Height	Controls product image height on desktop devices when Fit to Box mode is selected.
Mobile Product Height	Controls product image height on mobile devices when Fit to Box mode is selected.

Product Typography:

Setting	Description
Product Heading Size	Controls product title size such as Large, Medium, or Small.
Product Heading Weight	Adjusts the font thickness ranging from Thin (100) to Black (900).
Product Heading Case	Changes product title text transformation style such as Uppercase, Lowercase, Capitalize, or Default.
Product Heading Tag	Sets the HTML heading tag level from H1 to H6 for SEO and accessibility purposes.
Product Heading Font Family	Allows switching between Default and Body font family styles.

Product Features:

Setting	Description
Enable Add to Cart	Displays an Add to Cart button for products in search results.
Show Price	Displays product pricing information.
Show Discount Tag	Displays promotional discount badges.
Discount Marquee Direction	Controls discount scrolling direction such as Right to Left or Left to Right.
Discount Marquee Speed	Controls scrolling animation speed.
Pause on Hover	Pauses discount marquee animation on hover.
Show Unit Price	Displays product unit pricing when available.
Show Vendor	Displays product vendor information.
Vendor Case	Changes vendor text transformation style.
Vendor Background Color	Controls vendor badge background color.
Vendor Text Color	Controls vendor text color.
Show Color Swatches	Displays product color swatches.
Variant Rows	Defines visible variant rows such as 1,2.
Show Hover Image	Displays a secondary product image on hover.
Show Excerpt	Displays short product descriptions.

Blog Card Settings:

Setting	Description
Blog Heading Weight	Adjusts font thickness for blog titles.
Blog Heading Case	Changes text transformation style for blog headings.
Blog Heading Tag	Sets the HTML heading tag level from H1 to H6.
Blog Heading Font Family	Allows switching between Default and Body font family styles.
Blog Heading Color Style	Applies predefined color styling to blog titles.
Show Tags	Displays blog article tags.
Show Date	Displays article publish date.
Show Author	Displays article author name.
Show Blog Excerpt	Displays a short blog summary.
Show Comments Count	Displays total comments count.

Page Settings:

Setting	Description
Page Description Size	Controls text size for page search results such as Extra Large, Large, Medium, or Small.
Page Description Weight	Adjusts font thickness for page content.
Page Description Case	Changes text transformation style.
Page Description Font Family	Allows switching between Default and Heading font family styles.

Grid Settings

Setting	Description
Desktop Columns	Controls the number of search result columns on desktop devices (2–4 columns).
Desktop Rows	Controls the number of visible rows on desktop devices (2–6 rows).
Mobile Columns	Controls whether 1 or 2 columns appear on mobile devices.
Desktop Grid Spacing	Adds spacing between result cards on desktop devices.
Mobile Grid Spacing	Adds spacing between result cards on mobile devices.

Search Features:

Setting	Description
Filter Color Scheme	Applies a predefined color palette to filters.
Enable Product Counts	Displays total matching product count.
Enable Sort	Allows customers to sort search results.
Enable Filters	Displays filtering options for search results.
Pagination Type	Controls result loading behavior such as Pagination, Click to Load, or Load More.

Layout:

Setting	Description
Container Layout	Determines whether the section uses Contained, Contained Content, or Full Width layout.
Container Width	Controls the maximum width of the section container on desktop devices.
Text Alignment (Desktop)	Sets content alignment on desktop devices (Left, Center, or Right).
Text Alignment (Mobile)	Sets content alignment on mobile devices.

Color Scheme:

Setting	Description
Section Color Scheme	Applies a predefined color palette to the Main Search section background and content.