Overview
The Collection Section allows you to add up to 12 products to be featured at a time. It's also great for making Collection-type pages and for achieving a better multi-product layout on both Desktop and Mobile devices.
Find it in the "Products" category of the Page Section library:
📝The Collection Section is not a standard Buy Box section, meaning it doesn't interact directly with your Shopify product inventory. If you'd like to use a Buy Box section that has much of the same layout and flexibility, use the "Multi-Product Dynamic Buy Box" section instead.
Adding the Collection Section
Once you select this section to be added to your page, you will be presented with the following popup to start adding items (up to 12) you'd like featured:
Click the "Add Item" button to open the "Select Product" popup where all of your Shopify product inventory (available to the Online Store sales channel) will be available for selection. Select your first item by clicking on it, then click the "Next" button:
To access the Collection Section settings at any time, click the ⚙️ button in the top-left of the section or from the sidebar:
The Collection Section contains the following 3 settings tabs, which will be covered in detail below:
Items
Display
Layout
The "Items" Tab
In the Items tab you can:
Add additional item(s) by clicking the "Add Item" button. Up to 12 items can be added.
Change a particular product to a different one by clicking the "Change Product" button.
Delete a particular product by clicking the "Remove" button
Rearrange items into different positions via drag and drop
The "Display" Tab
In the Display tab, you have options for controlling the layout on both Desktop and Mobile devices:
Desktop:
Products per Row - Choose how many items to feature per row (2/3/4)
Column size - Depending on the "Products per row" option chosen, choose the column size you'd like used
Type - Choose either Carousel or Stacked types
Alignment - If the "Stack" option is chosen, choose the alignment you'd like used
Mobile:
Buy Box Carousel - show the collection as a carousel, including "Swipe Assist Arrows" if desired
Stack Images - shows the collection as stacked images (1 or 2 column layout)
Alignment - If the "Stack Images" option is chosen, choose the alignment you'd like used
The "Layout" Tab
In the Layout tab, you decide which elements you want to be included for all items featured in the Collection Section. Each element you choose to use is also able to be edited independently for each item card in the Page Editor, by clicking on specific elements.
Please reach out to us in Support Chat if you have any questions we can help with!