Collections grid

At a glance

The Collections grid displays your product collections in a carousel or grid. Use Header & CTA Content, Card Design, and Column Settings to customize heading, cards, columns, and horizontal scroll.

Where to find it

Theme editor path: Online Store → Customize → select the relevant page → Collections grid
Add to a page: Add via Add section → category Collections.

Settings

Layout

Setting	What it does	Default	Shows when
Padding top	Adds empty space (padding top) around the section content.	16	Always
Padding bottom	Adds empty space (padding bottom) around the section content.	16	Always

Separator

Setting	What it does	Default	Shows when
Show separator line	Turns “Show separator line” on or off on the storefront.	No	Always
Use global separator color	When on, uses the matching style from Theme settings. Turn off to style only this section or block.	Yes	Show separator is on
Separator color	Controls the divider line: separator color.	#E5E5E5	Show separator is on and Use global separator color is off
Separator thickness	Controls the divider line: separator thickness.	2	Show separator is on
Separator margin top	Controls the divider line: separator margin top.	0	Show separator is on
Separator margin bottom	Controls the divider line: separator margin bottom.	0	Show separator is on

Color scheme

Setting	What it does	Default	Shows when
Color scheme	Applies a color scheme from Theme settings → Colors.	scheme-1	Always

Blocks

Block	Purpose	Limit
Header & CTA Content	Add and configure in theme editor.	1
Card Design	Add and configure in theme editor.	1
Column Settings	Add and configure in theme editor.	1
Collection	Add and configure in theme editor.	—

Header & CTA Content settings

Setting	What it does	Default	Shows when
Overline	Controls “Overline” on the storefront. Open the theme editor to preview live.	—	Always
Use global overline styles	When on, uses the matching style from Theme settings. Turn off to style only this section or block.	Yes	Overline is filled in
Overline font size (mobile)	Sets overline font size (mobile) in pixels for the matching screen size.	12	Overline is filled in and Use global overline styles is off
Overline font size (tablet)	Sets overline font size (tablet) in pixels for the matching screen size.	13	Overline is filled in and Use global overline styles is off
Overline font size (desktop)	Sets overline font size (desktop) in pixels for the matching screen size.	14	Overline is filled in and Use global overline styles is off
Overline font weight	Sets how bold overline text appears.	500	Overline is filled in and Use global overline styles is off
Heading	Controls “Heading” on the storefront. Open the theme editor to preview live.	Heading	Always
Use global H2 heading styles	When on, uses the matching style from Theme settings. Turn off to style only this section or block.	Yes	Heading is filled in
Heading font size (mobile)	Sets heading font size (mobile) in pixels for the matching screen size.	26	Heading is filled in and Use global heading styles is off
Heading font size (tablet)	Sets heading font size (tablet) in pixels for the matching screen size.	29	Heading is filled in and Use global heading styles is off
Heading font size (desktop)	Sets heading font size (desktop) in pixels for the matching screen size.	33	Heading is filled in and Use global heading styles is off
Heading font weight	Sets how bold heading text appears.	500	Heading is filled in and Use global heading styles is off
Subheading	Controls “Subheading” on the storefront. Open the theme editor to preview live.	This a subheading	Always
Use global subheading styles	When on, uses the matching style from Theme settings. Turn off to style only this section or block.	Yes	subHeading is filled in
Subheading font size (mobile)	Sets subheading font size (mobile) in pixels for the matching screen size.	16	Subheading is filled in and Use global subheading styles is off
Subheading font size (tablet)	Sets subheading font size (tablet) in pixels for the matching screen size.	18	Subheading is filled in and Use global subheading styles is off
Subheading font size (desktop)	Sets subheading font size (desktop) in pixels for the matching screen size.	19	Subheading is filled in and Use global subheading styles is off
Subheading max width	Controls “Subheading max width” on the storefront. Open the theme editor to preview live.	500	subHeading is filled in

Alignment

Setting	What it does	Default	Shows when
Hide heading and subheading (for accessibility)	Controls “Hide heading and subheading (for accessibility)” on the storefront. Open the theme editor to preview live.	No	Always
Content alignment	Controls “Content alignment” on the storefront. Open the theme editor to preview live.	center	Hide heading/subheading visually is off

CTA

Setting	What it does	Default	Shows when
Button text	Controls “Button text” on the storefront. Open the theme editor to preview live.	—	Always
Button link	Controls “Button link” on the storefront. Open the theme editor to preview live.	—	Button text is filled in
Button variant	Chooses the button look (primary, secondary, outline, or ghost).	primary	Button text is filled in
Button size	Chooses the button size from Theme settings → Button sizes.	medium	Button text is filled in
Use global button styles	When on, uses the matching style from Theme settings. Turn off to style only this section or block.	Yes	Button text is filled in
Button background	Controls “Button background” on the storefront. Open the theme editor to preview live.	#ffffff	Button text is filled in and Use global button styles is off
Button text color	Controls “Button text color” on the storefront. Open the theme editor to preview live.	#000000	Button text is filled in and Use global button styles is off
Enable full width on mobile	Turns “Enable full width on mobile” on or off on the storefront.	No	Button text is filled in
Enable shimmer	Adds a moving highlight across the button or ribbon.	Yes	Button text is filled in

Card Design settings

Card settings

Setting	What it does	Default	Shows when
Content position	Choose whether the collection name appears over the image, below it, or stays hidden.	inside	Always

Collection name typography

Setting	What it does	Default	Shows when
Use global heading font family	Uses the theme heading font for collection names on cards.	Yes	content position != 'hide'
Font family	Controls “Font family” on the storefront. Open the theme editor to preview live.	assistant_n4	use global heading font family is off and content position != 'hide'
Use global H3 heading styles for collection name	Uses Typography → H3 for collection names on cards.	No	content position != 'hide'
Collection name font size (mobile)	Sets collection name font size (mobile) in pixels for the matching screen size.	14	use global collection name styles is off and content position != 'hide'
Collection name font size (tablet)	Sets collection name font size (tablet) in pixels for the matching screen size.	16	use global collection name styles is off and content position != 'hide'
Collection name font size (desktop)	Sets collection name font size (desktop) in pixels for the matching screen size.	18	use global collection name styles is off and content position != 'hide'
Collection name font weight	Sets how bold collection name text appears.	600	use global collection name styles is off and content position != 'hide'

Content layout

Setting	What it does	Default	Shows when
Card content alignment	Controls “Card content alignment” on the storefront. Open the theme editor to preview live.	left	content position != 'hide'
Overlay intensity	Control how strong the image overlay appears when content is shown inside the image.	soft	content position == 'inside'

Image

Setting	What it does	Default	Shows when
Image aspect ratio	Controls the image setting “Image aspect ratio”. Upload clear photos for best results.	1 / 1	Always
Rounded full	Display collection images as circles.	No	Always
Image shadow	Drop shadow behind collection images.	balanced	Always
Hover effect	Controls “Hover effect” on the storefront. Open the theme editor to preview live.	scale	Always

Image loading

Setting	What it does	Default	Shows when
Loading	Eager loads card images immediately. Lazy defers off-screen cards.	lazy	Always

Column Settings settings

Autoscroll

Setting	What it does	Default	Shows when
Enable autoscroll	Automatically advance the carousel.	No	Always
Autoscroll direction	Controls “Autoscroll direction” on the storefront. Open the theme editor to preview live.	left_to_right	autoscroll
Animation time	Controls “Animation time” on the storefront. Open the theme editor to preview live.	4000	autoscroll
Pause animation on hover	Controls “Pause animation on hover” on the storefront. Open the theme editor to preview live.	Yes	autoscroll
Pause animation on focus	Controls “Pause animation on focus” on the storefront. Open the theme editor to preview live.	Yes	autoscroll

Layout

Setting	What it does	Default	Shows when
Grid gap (mobile)	Controls “Grid gap (mobile)” on the storefront. Open the theme editor to preview live.	10	Always
Grid gap (tablet)	Controls “Grid gap (tablet)” on the storefront. Open the theme editor to preview live.	10	Always
Grid gap (desktop)	Controls “Grid gap (desktop)” on the storefront. Open the theme editor to preview live.	10	Always

Mobile (up to 639px)

Setting	What it does	Default	Shows when
Enable horizontal scroll	Swipe through images. Adjust visible items to show a peek of the next image.	No	Always
Visible items (mobile)	Use decimals like 1.2 to show a peek of the next item. Whole numbers show full items only.	1.2	Horizontal scroll (mobile) is on
How many items?	Maximum cards in the swipe track. Visible items still controls how many peek on screen. None shows every item.	none	Horizontal scroll (mobile) is on
Show swipe hint	Shows swipe helper text on mobile.	Yes	Horizontal scroll (mobile) is on
Columns on mobile	Controls “Columns on mobile” on the storefront. Open the theme editor to preview live.	1	Horizontal scroll (mobile) is off
How many rows?	Extra collections stay in the section but are hidden on the storefront until you add more rows or choose All collections.	show_all	autoscroll is off and Horizontal scroll (mobile) is off
Rows on mobile	Controls “Rows on mobile” on the storefront. Open the theme editor to preview live.	1	autoscroll is off and Horizontal scroll (mobile) is off and rows are capped

Tablet (640px – 879px)

Setting	What it does	Default	Shows when
Enable horizontal scroll	Swipe through images. Adjust visible items to show a peek of the next image.	No	Always
Visible items (tablet)	Use decimals like 1.2 to show a peek of the next item. Whole numbers show full items only.	2.2	Horizontal scroll (tablet) is on
How many items?	Maximum cards in the swipe track. Visible items still controls how many peek on screen. None shows every item.	none	Horizontal scroll (tablet) is on
Show swipe hint	Shows swipe helper text on mobile.	Yes	Horizontal scroll (tablet) is on
Columns on tablet	Controls “Columns on tablet” on the storefront. Open the theme editor to preview live.	2	Horizontal scroll (tablet) is off
How many rows?	Extra collections stay in the section but are hidden on the storefront until you add more rows or choose All collections.	show_all	autoscroll is off and Horizontal scroll (tablet) is off
Rows on tablet	Controls “Rows on tablet” on the storefront. Open the theme editor to preview live.	1	autoscroll is off and Horizontal scroll (tablet) is off and rows are capped

Desktop (880px+)

Setting	What it does	Default	Shows when
Enable horizontal scroll	Swipe through images. Adjust visible items to show a peek of the next image.	No	Always
Visible items (desktop)	Use decimals like 1.2 to show a peek of the next item. Whole numbers show full items only.	3.2	Horizontal scroll (desktop) is on
How many items?	Maximum cards in the swipe track. Visible items still controls how many peek on screen. None shows every item.	none	Horizontal scroll (desktop) is on
Show swipe hint	Shows swipe helper text on mobile.	Yes	Horizontal scroll (desktop) is on
Columns on desktop	Controls “Columns on desktop” on the storefront. Open the theme editor to preview live.	3	Horizontal scroll (desktop) is off
How many rows?	Extra collections stay in the section but are hidden on the storefront until you add more rows or choose All collections.	show_all	autoscroll is off and Horizontal scroll (desktop) is off
Rows on desktop	Controls “Rows on desktop” on the storefront. Open the theme editor to preview live.	1	autoscroll is off and Horizontal scroll (desktop) is off and rows are capped

Collection settings

Collection

Setting	What it does	Default	Shows when
Collection	Controls “Collection” on the storefront. Open the theme editor to preview live.	—	Always

Content settings

Setting	What it does	Default	Shows when
Override image (optional)	Choose an image to override the collection featured image.	—	Always
Image alt text	Optional alt text for the collection card image. If blank, falls back to the image alt from Shopify media, then the collection name (or custom title when set).	—	Always
Accessibility label	Optional aria-label on the collection card link. If blank, uses the collection name or custom title.	—	Always

Text settings

Setting	What it does	Default	Shows when
Custom title	Optional override for the collection name shown on the card.	—	Always

Setting details

Each control from the tables above, explained simply:

Padding top

Adds empty space (padding top) around the section content. Default: 16.

Padding bottom

Adds empty space (padding bottom) around the section content. Default: 16.

Show separator line

Turns “Show separator line” on or off on the storefront. Default: No.

Use global separator color

When on, uses the matching style from Theme settings. Turn off to style only this section or block. Default: Yes. This control appears when: Show separator is on.

Separator color

Controls the divider line: separator color. Default: #E5E5E5. This control appears when: Show separator is on and Use global separator color is off.

Separator thickness

Controls the divider line: separator thickness. Default: 2. This control appears when: Show separator is on.

Separator margin top

Controls the divider line: separator margin top. Default: 0. This control appears when: Show separator is on.

Separator margin bottom

Controls the divider line: separator margin bottom. Default: 0. This control appears when: Show separator is on.

Color scheme

Applies a color scheme from Theme settings → Colors. Default: scheme-1.

Overline

Controls “Overline” on the storefront. Open the theme editor to preview live. Default: —.

Use global overline styles

When on, uses the matching style from Theme settings. Turn off to style only this section or block. Default: Yes. This control appears when: Overline is filled in.

Overline font size (mobile)

Sets overline font size (mobile) in pixels for the matching screen size. Default: 12. This control appears when: Overline is filled in and Use global overline styles is off.

Overline font size (tablet)

Sets overline font size (tablet) in pixels for the matching screen size. Default: 13. This control appears when: Overline is filled in and Use global overline styles is off.

Overline font size (desktop)

Sets overline font size (desktop) in pixels for the matching screen size. Default: 14. This control appears when: Overline is filled in and Use global overline styles is off.

Overline font weight

Sets how bold overline text appears. Default: 500. This control appears when: Overline is filled in and Use global overline styles is off.

Heading

Controls “Heading” on the storefront. Open the theme editor to preview live. Default: Heading.

Use global H2 heading styles

When on, uses the matching style from Theme settings. Turn off to style only this section or block. Default: Yes. This control appears when: Heading is filled in.

Heading font size (mobile)

Sets heading font size (mobile) in pixels for the matching screen size. Default: 26. This control appears when: Heading is filled in and Use global heading styles is off.

Heading font size (tablet)

Sets heading font size (tablet) in pixels for the matching screen size. Default: 29. This control appears when: Heading is filled in and Use global heading styles is off.

Heading font size (desktop)

Sets heading font size (desktop) in pixels for the matching screen size. Default: 33. This control appears when: Heading is filled in and Use global heading styles is off.

Heading font weight

Sets how bold heading text appears. Default: 500. This control appears when: Heading is filled in and Use global heading styles is off.

Subheading

Controls “Subheading” on the storefront. Open the theme editor to preview live. Default: This a subheading.

Use global subheading styles

When on, uses the matching style from Theme settings. Turn off to style only this section or block. Default: Yes. This control appears when: subHeading is filled in.

Subheading font size (mobile)

Sets subheading font size (mobile) in pixels for the matching screen size. Default: 16. This control appears when: Subheading is filled in and Use global subheading styles is off.

Subheading font size (tablet)

Sets subheading font size (tablet) in pixels for the matching screen size. Default: 18. This control appears when: Subheading is filled in and Use global subheading styles is off.

Subheading font size (desktop)

Sets subheading font size (desktop) in pixels for the matching screen size. Default: 19. This control appears when: Subheading is filled in and Use global subheading styles is off.

Subheading max width

Controls “Subheading max width” on the storefront. Open the theme editor to preview live. Default: 500. This control appears when: subHeading is filled in.

Hide heading and subheading (for accessibility)

Controls “Hide heading and subheading (for accessibility)” on the storefront. Open the theme editor to preview live. Default: No.

Content alignment

Controls “Content alignment” on the storefront. Open the theme editor to preview live. Default: center. This control appears when: Hide heading/subheading visually is off.

Button text

Controls “Button text” on the storefront. Open the theme editor to preview live. Default: —.

Button link

Controls “Button link” on the storefront. Open the theme editor to preview live. Default: —. This control appears when: Button text is filled in.

Button variant

Chooses the button look (primary, secondary, outline, or ghost). Default: primary. This control appears when: Button text is filled in.

Button size

Chooses the button size from Theme settings → Button sizes. Default: medium. This control appears when: Button text is filled in.

Use global button styles

When on, uses the matching style from Theme settings. Turn off to style only this section or block. Default: Yes. This control appears when: Button text is filled in.

Button background

Controls “Button background” on the storefront. Open the theme editor to preview live. Default: #ffffff. This control appears when: Button text is filled in and Use global button styles is off.

Button text color

Controls “Button text color” on the storefront. Open the theme editor to preview live. Default: #000000. This control appears when: Button text is filled in and Use global button styles is off.

Enable full width on mobile

Turns “Enable full width on mobile” on or off on the storefront. Default: No. This control appears when: Button text is filled in.

Enable shimmer

Adds a moving highlight across the button or ribbon. Default: Yes. This control appears when: Button text is filled in.

Content position

Choose whether the collection name appears over the image, below it, or stays hidden. Default: inside.

Use global heading font family

Uses the theme heading font for collection names on cards. Default: Yes. This control appears when: content position != 'hide'.

Font family

Controls “Font family” on the storefront. Open the theme editor to preview live. Default: assistant_n4. This control appears when: use global heading font family is off and content position != 'hide'.

Use global H3 heading styles for collection name

Uses Typography → H3 for collection names on cards. Default: No. This control appears when: content position != 'hide'.

Collection name font size (mobile)

Sets collection name font size (mobile) in pixels for the matching screen size. Default: 14. This control appears when: use global collection name styles is off and content position != 'hide'.

Collection name font size (tablet)

Sets collection name font size (tablet) in pixels for the matching screen size. Default: 16. This control appears when: use global collection name styles is off and content position != 'hide'.

Collection name font size (desktop)

Sets collection name font size (desktop) in pixels for the matching screen size. Default: 18. This control appears when: use global collection name styles is off and content position != 'hide'.

Collection name font weight

Sets how bold collection name text appears. Default: 600. This control appears when: use global collection name styles is off and content position != 'hide'.

Card content alignment

Controls “Card content alignment” on the storefront. Open the theme editor to preview live. Default: left. This control appears when: content position != 'hide'.

Overlay intensity

Control how strong the image overlay appears when content is shown inside the image. Default: soft. This control appears when: content position == 'inside'.

Image aspect ratio

Controls the image setting “Image aspect ratio”. Upload clear photos for best results. Default: 1 / 1.

Rounded full

Display collection images as circles. Default: No.

Image shadow

Drop shadow behind collection images. Default: balanced.

Hover effect

Controls “Hover effect” on the storefront. Open the theme editor to preview live. Default: scale.

Loading

Eager loads card images immediately. Lazy defers off-screen cards. Default: lazy.

Enable autoscroll

Automatically advance the carousel. Default: No.

Autoscroll direction

Controls “Autoscroll direction” on the storefront. Open the theme editor to preview live. Default: left_to_right. This control appears when: autoscroll.

Animation time

Controls “Animation time” on the storefront. Open the theme editor to preview live. Default: 4000. This control appears when: autoscroll.

Pause animation on hover

Controls “Pause animation on hover” on the storefront. Open the theme editor to preview live. Default: Yes. This control appears when: autoscroll.

Pause animation on focus

Controls “Pause animation on focus” on the storefront. Open the theme editor to preview live. Default: Yes. This control appears when: autoscroll.

Grid gap (mobile)

Controls “Grid gap (mobile)” on the storefront. Open the theme editor to preview live. Default: 10.

Grid gap (tablet)

Controls “Grid gap (tablet)” on the storefront. Open the theme editor to preview live. Default: 10.

Grid gap (desktop)

Controls “Grid gap (desktop)” on the storefront. Open the theme editor to preview live. Default: 10.

Enable horizontal scroll

Swipe through images. Adjust visible items to show a peek of the next image. Default: No.

Visible items (mobile)

Use decimals like 1.2 to show a peek of the next item. Whole numbers show full items only. Default: 1.2. This control appears when: Horizontal scroll (mobile) is on.

How many items?

Maximum cards in the swipe track. Visible items still controls how many peek on screen. None shows every item. Default: none. This control appears when: Horizontal scroll (mobile) is on.

Show swipe hint

Shows swipe helper text on mobile. Default: Yes. This control appears when: Horizontal scroll (mobile) is on.

Columns on mobile

Controls “Columns on mobile” on the storefront. Open the theme editor to preview live. Default: 1. This control appears when: Horizontal scroll (mobile) is off.

How many rows?

Extra collections stay in the section but are hidden on the storefront until you add more rows or choose All collections. Default: show_all. This control appears when: autoscroll is off and Horizontal scroll (mobile) is off.

Rows on mobile

Controls “Rows on mobile” on the storefront. Open the theme editor to preview live. Default: 1. This control appears when: autoscroll is off and Horizontal scroll (mobile) is off and rows mode mobile == 'cap'.

Enable horizontal scroll

Swipe through images. Adjust visible items to show a peek of the next image. Default: No.

Visible items (tablet)

Use decimals like 1.2 to show a peek of the next item. Whole numbers show full items only. Default: 2.2. This control appears when: Horizontal scroll (tablet) is on.

How many items?

Maximum cards in the swipe track. Visible items still controls how many peek on screen. None shows every item. Default: none. This control appears when: Horizontal scroll (tablet) is on.

Show swipe hint

Shows swipe helper text on mobile. Default: Yes. This control appears when: Horizontal scroll (tablet) is on.

Columns on tablet

Controls “Columns on tablet” on the storefront. Open the theme editor to preview live. Default: 2. This control appears when: Horizontal scroll (tablet) is off.

How many rows?

Rows on tablet

Controls “Rows on tablet” on the storefront. Open the theme editor to preview live. Default: 1. This control appears when: autoscroll is off and Horizontal scroll (tablet) is off and rows mode tablet == 'cap'.

Enable horizontal scroll

Swipe through images. Adjust visible items to show a peek of the next image. Default: No.

Visible items (desktop)

Use decimals like 1.2 to show a peek of the next item. Whole numbers show full items only. Default: 3.2. This control appears when: Horizontal scroll (desktop) is on.

How many items?

Maximum cards in the swipe track. Visible items still controls how many peek on screen. None shows every item. Default: none. This control appears when: Horizontal scroll (desktop) is on.

Show swipe hint

Shows swipe helper text on mobile. Default: Yes. This control appears when: Horizontal scroll (desktop) is on.

Columns on desktop

Controls “Columns on desktop” on the storefront. Open the theme editor to preview live. Default: 3. This control appears when: Horizontal scroll (desktop) is off.

How many rows?

Rows on desktop

Controls “Rows on desktop” on the storefront. Open the theme editor to preview live. Default: 1. This control appears when: autoscroll is off and Horizontal scroll (desktop) is off and rows mode desktop == 'cap'.

Collection

Controls “Collection” on the storefront. Open the theme editor to preview live. Default: —.

Override image (optional)

Choose an image to override the collection featured image. Default: —.

Image alt text

Optional alt text for the collection card image. If blank, falls back to the image alt from Shopify media, then the collection name (or custom title when set). Default: —.

Accessibility label

Optional aria-label on the collection card link. If blank, uses the collection name or custom title. Default: —.

Custom title

Optional override for the collection name shown on the card. Default: —.

Tips

Try the Autoscroll preset for a carousel of featured collections on the homepage.
Assign collection images in Shopify admin — they appear on the cards.

Collections grid

On this page