π This section has been deprecated but can still be added to your pages using the "Existing Section" feature, if it was previously added to another page. Please note, if this section is used, the Undo/Redo functionality in the builder will be disabled.
Overview
The Multi-Product Dynamic Buy Box section (MPDBB) allows you to add up to 8 products at a time. It's a fantastic section for making Collection-type pages and for achieving a better multi-product layout on both Desktop and Mobile devices:
πA maximum of 20 unique products can be added to Buy Box sections per Landing Page (Shopify restriction).
Adding a MPDBB to your page
The Multi-Product Dynamic Buy Box section can be found in the "Products" category of the Page Sections library:
Once you select the section, you will be presented with the "Select Product" popup where all of your Shopify product inventory (available to the Online Store sales channel) will be available for selection. Select the products (up to 8) you want included by clicking the radio switch next to each one, then click the "Save" button:
πThe MPDBB contains the following 3 main sections, which will be covered in detail below:
These settings can be accessed from the builder at any time by either clicking on the βοΈ button on the Buy Box section (1) or from the sidebar (2):
πThe "Button Destination" setting for a product card needs to be either "Cart" or "Checkout" for the Variant and Quantity selector(s) to display. Placeholders will be shown in the Page Builder, actual values will be shown on the live/published page only.
The "Products" Tab
In the "Products" tab of the settings you can:
Click the "+ Add Product" button to add additional product(s)
Click on the "More Actions" button for a particular product where you can:
Set Discount & Quantity settings
Choose Variants
Change the Product
Remove
Bulk edit by checking the box next to each product. Bulk edit options include:
Set Discount
Remove
Rearrange the products in the Buy Box via drag and drop
The "Display" Tab
In the Display tab you have options for controlling the display on both Desktop and Mobile devices:
In the Desktop tab you can set settings for:
Products per Row - 2 / 3 / 4
Column Size - 50% / 33% / 25%
Type - Carousel or Stack
Alignment ("Stack" type only) - Left / Center / Right
In the Mobile tab you can choose between "Buy Box Carousel" (with or without swipe assist arrows) or "Stack Images" display options:
The "Layout" Tab
In the Layout tab, you decide which elements you want to be included for all products featured in the Multi-Product Dynamic Buy Box section. Each element you choose to use is also able to be edited independently for each product card in the builder, by clicking on specific elements.
The full list of elements includes:
Facebook Pixel
Because the Multi-Product Dynamic Buy Box section can feature multiple unique store products, it is our recommendation to disable the "Track View Content events" setting for page(s) that use this section. More details
Please reach out to us in Support Chat if you have any questions we can help with!