In the theme editor: CustomizeCollection pageAdd sectionCollection page

Collection page

The product grid of a collection, with filters, sorting and paging.

Filters come from Shopify’s Search & Discovery app. Add availability, price, type and your options there.

Settings

Heading

Show the heading in this section
On or offDefault: OnTurn off when a separate Collection heading section sits above this one. The heading, count, description and breadcrumbs then come from that section. The filter and sort button always stays here, above the products.
Show collection description
On or offDefault: Off
Space above the title
Slider, 0 to 60 pxDefault: 8 pxOn phones this is shown at 75% of the value.
Space below the title area
Slider, 0 to 60 pxDefault: 24 px
Menu for the breadcrumb trail
MenuWhen the collection sits under an item of this menu, that item appears in the trail.

Product grid

Products per row, at first
Choice: Large, Standard, CompactDefault: StandardLarge: one product per row on phones. Standard: two. Compact: three, photo and price only. On desktop, the columns below.
Let shoppers choose how many products per row
On or offDefault: OnThree small buttons next to Filter and sort. The choice is remembered during the visit.
Desktop columns, large view
Slider, 2 to 4Default: 3Tablets show 2, 3 and 4 columns.
Desktop columns, standard view
Slider, 3 to 5Default: 4
Desktop columns, compact view
Slider, 4 to 8Default: 5
Length of the change between views
Slider, 0 to 800 msDefault: 420 msEach product glides to its new place. 0: the grid changes at once. Visitors who asked their device for less motion always get the change at once.
Products per load
Slider, 8 to 48Default: 20

Tools

Show filters
On or offDefault: OnFilters are set up in the Search & Discovery app. Without it, only availability and price appear.
Show sorting
On or offDefault: On
Settings every section sharesWindow, Scrolling, Spacing, Colors, Text styling

The window, scrolling, spacing and color settings work the same way in every section. Read how they work.

Window

Attach
Choice: Separate window, Attached to the window above, Attached to the window below, Attached above and belowDefault: Separate window
Image corners
Choice: Rounded, SquareDefault: Rounded

Scrolling

Next section covers it on scroll
On or offDefault: OffScrolling down, this section stays in place under the header and the next section rises over it. Scrolling back reverses it. Off in the editor, for visitors who asked for reduced motion and on very short screens.

Spacing

Custom spacing for this section
On or offDefault: OffOff: the section spacing from theme settings, under Layout. On: the values here, above and below this section. On phones most sections use 65% of them.
Space above
Slider, 0 to 160 pxDefault: 0 px
Space below
Slider, 0 to 160 pxDefault: 24 px
Content width
Choice: Narrow, Standard, Wide, Full widthDefault: Standard

Colors

Color scheme
Color schemeSame as the page scheme: the section sits on the page background. Another scheme gives the section its own background, as a card inside the frame. Custom colors below override the scheme.
Use custom colors for this section
On or offDefault: OffOverrides the color scheme. Empty fields follow the scheme.
Background
ColorDefault: #F1F1EF
Text
ColorEmpty: automatic. Light on a dark background, dark on a light one.
Background style
Choice: Flat color, Lit stageDefault: Flat colorLit stage: a soft light from above that fades toward the bottom, made from the section color, light or dark. On a dark color, text and buttons turn light on their own.
Light color
ColorThe soft light from the top center. Empty: white.

Text styling

Custom text styling for this section
On or offDefault: OffOtherwise the section uses the theme styling. Shopify fonts do not include Hebrew, so you choose between styles that work in Hebrew.
Heading style
Choice: Theme default, Light, Bold, SerifDefault: Theme default
Heading size
Slider, 70 to 160 %Default: 100 %
Heading color
ColorEmpty: automatic, uses the section color (light on a dark background).
Text style
Choice: Theme default, Light, Bold, SerifDefault: Theme default
Text size
Slider, 70 to 160 %Default: 100 %
Text color
ColorEmpty: automatic, uses the section color (light on a dark background).

Something here doesn’t match what you see in your editor? Tell us and we will fix the guide.