The Dynamic Buy Box allows you to pick and choose exactly which elements you'd like to be shown and used for your Buy Box. It also includes an Image & Video Carousel functionality to show off multiple product images and a video!
Find the Dynamic Buy Box in the "Buy Boxes" section of the page block library:
Working with the Dynamic Buy Box
After the block has been added to your page, to start working with it click the gray pencil icon in the top-right of the block. That will open up the block settings and present 3 tabs that you can edit: General, Product and Layout
The "Product" Tab
Click into the Product tab and then select "Add Product" to choose the product you want featured for your buy box. Then click the "Next" button:
If your product has Variants, then select which variants you want used by selecting them in the next screen. ZP uses all variants by default unless you select specific variants from the list instead. You can also use the Select/Deselect All link to select all variants and deselect all respectively. Click the "Next" button to continue:
Next, choose whether or not you want a Discount displayed for the product or not. Note, this discount will NOT be auto-applied during checkout. The customer needs to enter a coupon code at checkout or you'd need to setup some other method to auto-apply a discount at checkout such as a "shareable discount link".
You can modify the discount amount shown at any time by clicking on the discount icon or on the more options menu (3 dots) and selecting "Set Discount".
Click the "Confirm" button to confirm your Product Variant and Discount display settings.
The "Layout" Tab
Next, click into the Layout tab so you can pick and choose exactly which elements you want included for the layout of your buy box. Just check/un-check the box next to each element you'd like included or excluded.
There is also a live preview window available for both Desktop and Mobile to help you quickly decide on the optimal layout you'd like used. Click the "Save" button once you've finished selecting your Layout elements:
The "General" Tab
The General tab is where you edit everything else about the block's general settings. Click here to see more details about working with the General settings for a page block:
Product Image & Video Carousel
One of the best features about the Dynamic Product Block is its "Image & Video Carousel" functionality! You can add up to 9 product images and 1 video.
To add images and a video to the carousel, start by clicking on the image placeholder within the page editor. Then choose either "Add Image" or "Add Video":
Choose the "Add Image" button to add your first image from your image library. You can Crop, Rotate and/or apply Shapes to your images before including them in the carousel as well:
Repeat this process to add your remaining images (up to 9 images can be added).
Note: If you haven't added images to your image library yet or need to upload new ones, choose the "Upload" button from the image library screen:
Rearrange Images in the Carousel
Images added to the carousel will be displayed on the page in the order which you've added them. Images can be easily rearranged via drag and drop:
Carousel "Slide Show" Setting
Choose the amount of time you want elapsed before the next image in the carousel is shown. Or set it to "None" if you don't want the images to cycle. For example, if 2 sec is chosen then each image in the carousel will be displayed for 2 seconds before it cycles to the next one.
Carousel "Border" Settings
Border Style, Color and Thickness can be applied to the images in the carousel through the Border tab:
Adding a Video
A video can be added to the end of the carousel as well! Click the "Add Video" button to add your video. Then enter in the video's URL or Embed code from a supported video service. Currently there are 6 video services supported: Wistia, Vimeo, YouTube, Facebook, Dailymotion and SproutVideo.
Don't forget to click the "Save" button to save your work!