Collections and search
Collection
The collection page: a banner, an optional subcollections bar and the product grid with filters and sorting.
Filters
Filters come from Shopify's Search & Discovery app. See the filters guide for setup.
Subcollections bar
The bar shows links taken from a menu, so it can follow your main menu's structure. It can sit above the grid or inside the banner.
Settings
Layout
| Setting | What it does |
|---|---|
| Default page widthDropdown | Full widthDefaultCustom |
| Custom width (px)Slider | Shown only when it applies to the options chosen above. |
Color scheme
| Setting | What it does |
|---|---|
| Use the store's default color schemeToggle | Toggle |
| Color schemeColour scheme | Shown only when it applies to the options chosen above. |
Filters
| Setting | What it does |
|---|---|
| Show filtersToggle | Toggle |
| Layout styleDropdown | Left sidebarDrawer Shown only when it applies to the options chosen above. |
| Sidebar widthSlider | Shown only when it applies to the options chosen above. |
| Show active filter tagsToggle | Shown only when it applies to the options chosen above. |
| Show clear all buttonToggle | Shown only when it applies to the options chosen above. |
| Show product count per filterToggle | Shown only when it applies to the options chosen above. |
| Collapse filter groups by defaultToggle | Shown only when it applies to the options chosen above. |
| Max visible options per groupSlider | Shown only when it applies to the options chosen above. |
Filter display styles
| Setting | What it does |
|---|---|
| Price filter styleDropdown | SliderMin / max inputs Shown only when it applies to the options chosen above. |
| Color filter styleDropdown | Color swatchesCheckboxes Shown only when it applies to the options chosen above. |
| Size filter styleDropdown | ButtonsCheckboxes Shown only when it applies to the options chosen above. |
| Other filter styleDropdown | CheckboxesDropdown Shown only when it applies to the options chosen above. |
| Show active filter count on buttonToggle | Shown only when it applies to the options chosen above. |
Spacing
| Setting | What it does |
|---|---|
| Top paddingSlider | Slider |
| Bottom paddingSlider | Slider |
Blocks
Blocks are the pieces you add, remove and reorder inside the section, under Add block.
Subcollections bar
Display
| Setting | What it does |
|---|---|
| PlacementDropdown | Inside the banner, the bar sits above the title in the banner's text color. Its own rowInside the collection banner |
| Navigation menuMenu | Shows the collections nested under the one being viewed. Collections only. |
| Show the parent collectionToggle | Adds the collection above as the first item, when it is a collection. |
| Display styleDropdown | Text linksPill buttonsImage with text |
| Highlight active subcollectionToggle | Toggle |
| AlignmentDropdown | LeftCenterRight |
| Gap between itemsSlider | Slider |
| Enable horizontal scrollToggle | Toggle |
Image with text settings
| Setting | What it does |
|---|---|
| Image widthSlider | Shown only when it applies to the options chosen above. |
| Image shapeDropdown | CircleSquareRounded square Shown only when it applies to the options chosen above. |
| Show subcollection nameToggle | Shown only when it applies to the options chosen above. |
| Show border on active itemToggle | Shown only when it applies to the options chosen above. |
Mobile
| Setting | What it does |
|---|---|
| Enable horizontal scroll on mobileToggle | Toggle |
| Show scroll arrows on mobileToggle | Toggle |
| Mobile color schemeColour scheme | Colour scheme |
Collection banner
Display
| Setting | What it does |
|---|---|
| Show collection bannerToggle | Toggle |
| Show breadcrumbsToggle | Toggle |
| Title alignmentDropdown | LeftCenter Shown only when it applies to the options chosen above. |
| Image sourceDropdown | Collections with no image of their own use the custom image. Collection image, then customCustom image only |
Custom image
| Setting | What it does |
|---|---|
| Desktop imageImage | Image |
| Mobile imageImage | Image |
| Focal pointDropdown | CenterTopBottomLeftRight |
Banner height
| Setting | What it does |
|---|---|
| Desktop heightDropdown | Full screen (100vh)Extra large (80vh)Large (60vh)Medium (50vh)Small (40vh)Original (auto) |
| Mobile heightDropdown | Full screen (100vh)Extra large (80vh)Large (60vh)Medium (50vh)Small (40vh)Original (auto) |
Content overlay
| Setting | What it does |
|---|---|
| Content positionDropdown | Top leftTop centerTop rightMiddle leftMiddle centerMiddle rightBottom leftBottom centerBottom right |
| Show collection titleToggle | Toggle |
| Show collection descriptionToggle | Toggle |
| Description character limitSlider | Set to 0 for no limit |
| Show product countToggle | Toggle |
| Banner color schemeColour scheme | Text and overlay on the image. Pick a dark scheme for dark photosShown only when it applies to the options chosen above. |
| Overlay opacitySlider | Shown only when it applies to the options chosen above. |
Product grid
Layout
| Setting | What it does |
|---|---|
| Columns on desktopDropdown | 2345 |
| Columns on mobileDropdown | 12 |
| Row gapSlider | Slider |
Pagination
| Setting | What it does |
|---|---|
| Products per pageSlider | Slider |
| Pagination styleDropdown | Page numbersLoad more button |
Sort
| Setting | What it does |
|---|---|
| Show sortToggle | Toggle |
| Sort optionsDropdown | Which orders shoppers can choose from. RecommendedAll Shown only when it applies to the options chosen above. |
Toolbar
| Setting | What it does |
|---|---|
| Show how many productsToggle | Toggle |
| Show view toggleToggle | Toggle |