Collection listing

Overview:

The Collection List section displays multiple product collections in a structured grid layout. It allows merchants to showcase featured collections with customizable headings, descriptions, collection cards, buttons, typography styling, grid spacing, responsive layouts, and color schemes. This section is commonly used on homepages and landing pages to help customers quickly browse product categories.

Section Configuration

Header Section:

Setting	Description
Section Heading	Defines the main heading displayed above the collection grid.
Heading Size	Controls the size of the heading text.
Heading Weight	Adjusts the font thickness of the heading text.
Heading Case	Changes the 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 the heading text.
Heading Link Style	Controls the styling behavior of links used inside the heading content.

Description:

Setting	Description
Description Text	Displays supporting text or introductory content below the section heading.
Description Size	Controls the size of the description text.
Description Weight	Adjusts the font thickness of the description text.
Description Case	Changes the text transformation style of the description text.
Description Font Family	Allows switching between default and heading font family styles.
Description Color Style	Applies predefined color styling to the description text.

Grid Layout:

Setting	Description
Desktop Grid Spacing	Adds spacing between collection cards on desktop devices.
Mobile Grid Spacing	Adds spacing between collection cards on mobile devices.

Collection Card Settings

Media:

Setting	Description
Collection Card Media Ratio	Controls the aspect ratio of collection images such as adapt, square, portrait, landscape, or fit to box.
Desktop Card Height	Controls the height of collection images on desktop devices when fit mode is enabled.
Mobile Card Height	Controls the height of collection images on mobile devices when fit mode is enabled.

Typography:

Setting	Description
Collection Heading Size	Controls the size of collection titles.
Collection Heading Weight	Adjusts the font thickness of collection titles.
Collection Heading Case	Changes the text transformation style for collection titles.
Collection Heading Tag	Sets the HTML heading tag level for collection titles.
Collection Heading Font Family	Allows switching between default and body font family styles.
Collection Heading Color Style	Applies predefined color styling to collection titles.

Button Settings:

Setting	Description
Button Label	Defines the text displayed on the collection button.
Button Style	Controls the visual appearance of the button such as primary, secondary, or link style.
Button Case	Changes the text transformation style for button text.
Open in New Tab	Opens the collection link in a new browser tab when enabled.

Layout:

Setting	Description
Container Layout	Determines whether the collection list section uses a contained, contained content, or full-width layout.
Container Width	Controls the maximum width of the collection section container on desktop devices.
Text Alignment (Desktop)	Sets the horizontal alignment of content on desktop devices.
Text Alignment (Mobile)	Sets the horizontal alignment of content on mobile devices.

Color Scheme:

Setting	Description
Section Color Scheme	Applies a predefined color palette to the collection section background and content.
Inverse Color Scheme	Inverts the selected color scheme styling for contrast variations.
Gradient Mode	Enables gradient styling for the section background, widgets, or both.
Enable Heading Gradient	Enables gradient styling for section headings.

Collection Options

Setting	Description
Show Collection Description	Displays collection descriptions inside collection cards when enabled.

Blocks Configuration

Collection Block:

Setting	Description
Collection	Selects the Shopify collection displayed inside the collection list section.

Inner Spacing:

Setting	Description
Top Padding (Desktop)	Adds spacing inside the top area of the collection section on desktop devices.
Bottom Padding (Desktop)	Adds spacing inside the bottom area of the collection section on desktop devices.
Left Padding (Desktop)	Controls the inner left spacing of the collection section on desktop devices.
Right Padding (Desktop)	Controls the inner right spacing of the collection section on desktop devices.
Top Padding (Mobile)	Adds spacing inside the top area of the collection section on mobile devices.
Bottom Padding (Mobile)	Adds spacing inside the bottom area of the collection section on mobile devices.
Left Padding (Mobile)	Controls the inner left spacing of the collection section on mobile devices.
Right Padding (Mobile)	Controls the inner right spacing of the collection section on mobile devices.

Outer Spacing:

Setting	Description
Top Margin (Desktop)	Adds spacing outside the top area of the collection section on desktop devices.
Bottom Margin (Desktop)	Adds spacing outside the bottom area of the collection section on desktop devices.
Left Margin (Desktop)	Controls the outer left spacing of the collection section on desktop devices.
Right Margin (Desktop)	Controls the outer right spacing of the collection section on desktop devices.
Top Margin (Mobile)	Adds spacing outside the top area of the collection section on mobile devices.
Bottom Margin (Mobile)	Adds spacing outside the bottom area of the collection section on mobile devices.
Left Margin (Mobile)	Controls the outer left spacing of the collection section on mobile devices.
Right Margin (Mobile)	Controls the outer right spacing of the collection section on mobile devices.