On this page
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:
If you're using a page Template that has the Dynamic Buy Box block already included in it, click the gray pencil icon in the top-right of the block. That will open up the block settings and present 4 tabs that you can edit: Product, Cross-Sell, Sticky Button and Layout
Note: If you're adding a new Dynamic Buy Box to your page, you will be taken immediately to the Product Selection screen to choose the product you want to feature.
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 and/or applied at Checkout for the product.
There are 6 discount options available in the dropdown menu:
None - No discount will be shown
Percent (Dynamic) - Show a % based discount which auto-applies at Checkout
Fixed (Dynamic) - Show a $ based discount which auto-applies at Checkout
Compare At Price - Show the product's "Compare at price" pulled from Shopify
Percent (Static) - Show a % based discount
Fixed (Static) - Show a $ based discount
Static discount types will NOT be auto-applied at Checkout. The customer needs to enter a coupon code or you'd need to setup some other method to auto-apply a discount at checkout such as a "shareable discount link" configured with a redirect to your ZP page.
Dynamic discount types do auto-apply at Checkout. The only Buy Box button destination that can work with this type is "Checkout".
Dynamic discount applies to each unit of the product I.e. if you pre-set the Buy Box quantity to 3 units and set a $10 dynamic discount, a $30 discount will be applied at checkout.
When you publish a page that uses a "Dynamic" discount type for a Buy Box, the Shopify Discount code is then auto-generated in the "Discounts" section of your Shopify admin.
You can modify the discount amount or type 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 "Cross-Sell" Tab
Click into the Cross-Sell tab to add a cross-sell product box within your Dynamic Buy Box. A cross-sell can be used to get a customer to spend more by purchasing a product that’s related to what’s being featured in the Buy Box already.
*Important Note: The cross-sell section will only show on your published page if either "Cart" or "Checkout" Destinations are chosen for the Buy Box button.
Just as when selecting the main product, you will be prompted to select the desired variants and discount to display for the cross-sell product.
The next step is to design the layout and style of the cross-sell box. Here you can choose which elements to use, the background color of the box and the color of the checkbox. Once done, click the "Enable" button to add the cross-sell box to your Dynamic Buy Box:
Once it's been added, you can then further customize the text and style of the elements included in the cross-sell box using the options available in the page editor:
*Important Note: In order for the discount you've set to display to be shown on the published page, it's required that the "Display Field Labels" box is checked in the Layout tab of the Dynamic Buy Box.
On the live published page, if the checkbox is clicked in the cross-sell box prior to clicking the main CTA (Buy Now!) button, then both items will be added to the Cart:
*Note: The CTA button also includes a loading animation when clicked on the published page, indicating to the customer that their click has been registered and that they are waiting to be redirected.
The "Sticky Button" Tab
Click into the Sticky Button tab to configure the sticky button you'd like shown on Mobile devices, when the page is scrolled 25%. You will need to check the "Mobile Sticky Button" checkbox in the "Layout" tab as well for it to be used on your page.
📝The sticky button can only be enabled for one Dynamic Buy Box at a time, if you have multiple featured on your page.
The Sticky Button tab includes the following sections so you can style your button to match your branding:
Layout - The "Initial Price" setting allows to show both the original price and the discount price or only the discounted price
Button - Configure all the styles you'd like used for the button
Product Title - Edit the Product Title and font styles
The "Layout" Tab
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.
The Layout tab includes the following elements you can include or exclude from the Buy Box:
Image Area - 2 options available:
- Image Carousel - Shows the featured image section + a carousel with 9 image slots and 1 video slot
- Product / Variant Image - Show only the featured image section
*Note: For either option, the featured image will update to show the variant image selected on the published page.
Product Name - Display the product name field.
Hero Benefit - Add an additional text field to highlight the product. "BEST SELLER" is the default text.
Divider - Adds a divider below the Product Name field.
Star Rating - Adds a star rating element. The star ratings can be adjusted and can be clicked to direct to a specific section of the page containing your reviews.
Product Description - Adds a product description section below the star ratings.
Competitive Advantage - Adds an additional line of text next to the product price. The default text is "& Free Delivery in the USA".
Product Discount - Adjusts the product price section to include a product discount display. A discount code will need to be applied at checkout to discount the product.
Unique Selling Proposition: Adds a line of text directly below the CTA button. Default text is "100% Money Back Guarantee"
Countdown Timer - Adds a countdown timer below the CTA button. The countdown timer text and time can be adjusted as needed
USP Image - Adds a small image element below the CTA button where you can display credit card logos or trust seals
Display Field Titles - Adds label text for the price and variant fields such as "Your Price:", "Variants:", etc
Size Chart - Add a size chart link/button that opens a lightbox popup containing a custom added image when clicked
*Note: Size Chart is only available for Dynamic Buy Boxes added on or after Aug. 20, 2019
Cross-Sell Section - Add a cross-sell section to offer an additional complementary product
*Note: Cross-Sell is only available for Dynamic Buy Boxes added on or after Jan. 15, 2020
FAQ/Accordion - Adds an expandable/collapsible accordion section where additional product details or faqs can be added
Compare At Price - Show/hide the "Retail price" field and label
Mobile Sticky Button - Include a sticky button on Mobile devices that shows when the page is scrolled 25%. Configure it in the "Sticky Button" tab of the Dynamic Buy Box block's Settings
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:
To access the Product / Cross-Sell / Layout tabs again for a Buy Box, a ⚙️ button is available in the top-right corner of the block where those Product Settings can be accessed.
Clicking in either/or location shown below will invoke the same action so you can quickly and efficiently edit the details about the product being featured:
The Button settings for the Dynamic Buy Box can be accessed by clicking on the button element from the page builder. The settings then become accessible from the left-side menu:
Button settings are comprised of the following 4 subsections:
Text - Edit the button's CTA text including font size, style and color
Appearance - Edit the button style, color, shape, border, and hover state effect
General - Adjust the button alignment, size and padding
Destination - Choose the action that is taken and destination directed to when the button is clicked on
The Text, Appearance and General subsections are all the same as for regular buttons gone over here in this help article section.
The Destination section differs from regular buttons and includes options to add a product to the Cart and/or Shopify Checkout. Other destinations are available via the dropdown menu as well:
URL - Link To A Specific URL
Cart has 3 options:
- Add to Cart and load the Cart Page (default)
- Add to Cart and stay on the same page
- Add to Cart and direct customer to a specific URL
The Default Product Quantity field allows you to pre-set the quantity for the Buy Box button. The Quantity Field can be toggled on/off by clicking the switcher.
Product - Link to the Product page of the product selected for the Buy Box
Checkout - Add the product to the Shopify Checkout and redirect to there
This destination also includes the Default Product Quantity field and the Quantity Field toggle.
ZP Page - Link the Button to one of your published ZP Landing Pages
ZP Blog Post - Link the Button to one of your published ZP Blog Posts
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.
*Note: Variant images will also be shown on the published page when a variant is selected and the variant has an image associated with it in the Products section of Shopify admin.
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 carousel as well! By default, the video will be added to the end of the carousel.
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.
You are also able to "Use Video as First Element" in the carousel by checking that option and/or disable the "Zoom Image on Hover" functionality by un-checking that option:
Don't forget to click the "Save" button to save your work!