Overview
The Collection Block 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 Buy Boxes category of the Page Block library:
📝The Collection Block is not a Buy Box block, meaning it doesn't interact directly with your Shopify product inventory. If you'd like to use a Buy Box block that has much of the same layout and flexibility, use the "Multi-Product Dynamic Buy Box" block instead.
Adding the Collection Block
Once you select this block 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 invoke 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:
📝The Collection Block contains the following 3 main sections, which will be covered in detail below:
Items
Layout
Elements
The "Items" Section
In the Items section you can:
Add items you'd like featured
Change or Remove existing item(s)
📝This screen can always be accessed from the Page Builder by clicking the ⚙️ button located in the top-right of the Collection Block:
The "Layout" Section
In the Layout section, 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 "Elements" Section
In the Elements section, you decide which elements you want to be included for all items featured in the Collection Block. 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.
Pro Tip - Create an Element Carousel
By disabling all Elements but one, you're able to create an element carousel.
For example, by disabling all elements except the "Image", you can then achieve an Image Carousel on both Desktop and Mobile devices:
By clicking on each image in the Page Builder, you can then change it to whichever image you'd like used from your Image Library instead of the default one pulled from your Shopify admin.
Please reach out to us in Support Chat if you have any questions we can help with!