The Buy Box / Buy Box with Cross-sell 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, a Cross-sell feature to help sell more products, a Sticky Button functionality, Tabs and more!
Find the Buy Box and Buy Box with Cross-sell blocks in the "Buy Boxes" section of the page block library:
If you're using a page Template that has the Buy Box block already included in it, click the ⚙️ icon in the top-right of the block to access the Product Settings:
That will open the product settings popup and present 4 tabs that you can edit: Product, Cross-Sell, Layout and Sold Out View:
📝 If you're adding a new 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 click the "Add Product" button to choose the product you want featured for your buy box. Then click the "Save" button:
Once the product has been selected, you can access the more options menu where you can access and edit:
Discount & Quantity
In the Discount & Quantity section, you can choose your Product Discount and default Product Quantity settings:
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. Make sure the compare at price is higher than the price, otherwise it won't show.
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.
The Quantity Selector can also be completely removed from the Buy Box if desired in the "Layout" tab, by deselecting the option there:
If your product has Variants, then select which variants you want used by selecting them on the "Choose Variants" screen. ZP uses "All Variants" by default, unless you select specific variant(s) from the list by clicking into the "Custom" tab instead.
To change the product connected to the Buy Box at any time, click on the "Change Product" option to open the product picker where a new product can be selected:
📝Changing the product will automatically replace existing copy for the Product Title, Product Description and Pricing elements.
The "Cross-Sell" Tab
Click into the Cross-Sell tab to add a cross-sell product box within your Buy Box. Up to 3 products can be selected. A cross-sell can be used to get a customer to spend more by purchasing a product that’s related to what’s already being featured in the Buy Box. Click the "Add Product" button to add the cross-sell product(s):
The cross-sell section will only show on your published page if either "Cart" or "Checkout" Destinations are chosen for the Buy Box button.
If a "Dynamic discount" is set for the main product in the Product tab, the Cross-Sell product will use the same discount and can't be set independently from the main product.
The next step is to design the layout and style of the cross-sell box. Here you can adjust the Product settings (1) if needed, choose which Elements (2) to use, set the Checkbox color (3) and the Alignment (4). Once done, click the "Enable" button to add the cross-sell box to your Buy Box:
Once it has been added, you can then further customize the text, style and image settings of the elements included in the Cross-Sell box using the options available in the Page Builder:
*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 Titles" box is checked in the Layout tab of the Buy Box.
On the live published page, if the checkbox is clicked on a cross-sell box prior to clicking the main CTA (Buy Now!) button, then both the featured product + any cross sell product(s) selected will be added to the Cart or Checkout.
📝 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 "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 - 3 options available:
• Shopify Image Carousel - Pulls your images/video media content from Shopify's products section automatically. All images may not be shown in the builder, check the live/published page to see all images. No option to add custom images. To customize the images manually, select the “Static Image Carousel” option in the Layout tab.
• Product/Variant Image - Show only the featured image section.
• Static Image Carousel - Shows the featured image section + a carousel with 15 image slots and 1 video slot.
📝 For "Shopify Image Carousel" and "Product/Variant Image" options, the featured image will update to show the variant image selected on the published page.
Product Name - 2 options available:
• Shopify - Pull's the product name from Shopify's products section automatically
• Static - Set the product name manually using the text editor in the Builder
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.
Tabs - Adds a "Tabs" section below the star rating element, where tabbed content can be added.
Product Description - 2 options available:
• Shopify - Pull's the product description from Shopify's products section automatically
• Static - Set the product description manually using the text editor in the Builder
Compare at Price - Shows the "Retail Price" field and label. The "Product Discount" option must also be enabled to show this field.
If the "Compare at Price" Discount option is chosen in the Product Settings, it will show the product's Compare at price pulled from Shopify's products section.
If any other Discount option is chosen in the Product Settings, it will show the product's Price pulled from Shopify's products section instead.
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 sections to include product discount fields. The price elements are calculated dynamically based on your product's price / compare at price set in Shopify and the Discount option chosen in the Product Settings.
Quantity Selector - Include or exclude the product quantity selector
Dynamic Checkout - Include a branded "Dynamic Checkout" button (Amazon Pay, Apple Pay, Google Pay, PayPal, Shop Pay, Venmo) below the main CTA button.
📝The associated payment method must be connected in your Shopify admin, refer to the guides above for more details. This button does not work with the Discount and Cross-sell features.
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
Cross-Sell Section - Adds a cross-sell section to offer additional complementary product(s)
FAQ/Accordion - Adds an expandable/collapsible accordion section where additional product details or faqs can be added
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 "Sold Out View" Tab
In the "Sold Out View" tab, you can enable the Sold Out View setting which will automatically replace the Buy Box block with a different block of your choosing, if the product featured in the Buy Box becomes sold out.
Just check the box and then select the block you want used to replace the Buy Box and click the "Save" button:
This feature was designed to have the Buy Box replaced with an Opt-in Form, however you can choose to replace it with any block of your choosing. If you'll be using an opt-in form block, it's recommended to connect the form to a particular List in your CRM system that correlates to the product that is sold out I.e. Boom Calm sold out.
When the product becomes back in stock again, you can send out an email everyone on that list to notify them and when they visit the page again, the Buy Box will be automatically shown again as long as the product has inventory added in your Shopify admin.
Only works for a product with no variants, or if you've only selected the sold out variant(s) for use with the Buy Box.
Make sure to include the replacement block directly above or below the Buy Box in the page builder so when the Buy Box is replaced, the replacement block will be located in the same location on the page.
The block selected as the replacement will be hidden on the published page if the Buy Box product is in stock. It will automatically be shown and replace the Buy Box on the published page if/when the product becomes sold out.
Sticky ATC Button
A sticky "Add to Cart" button can be included on any/all device views (Desktop / Tablet / Mobile) if desired, by clicking into the view (1), then on the ATC button (2) and then enabling the "Sticky Button" toggle (3) in the sidebar of the builder:
Styles and copy for the elements included in the sticky button bar can be configured in the page builder, by hovering over the desired element and clicking on it:
📝The sticky button can only be enabled for one Buy Box added to a page at a time.
To access the Product / Cross-Sell / Layout / Sold Out View tabs again for the 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 Buy Box can be accessed by clicking on the button element from the page builder. The settings then become accessible from the left sidebar 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.
Home Page - Link the button to your store's Home Page
ZP Landing 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 Buy Box is its "Image & Video Carousel" functionality! You can add up to 15 images and 1 video via the "Static Image Carousel" option in the Layout tab.
*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 Images" or "Add Video":
Choose the "Add Images" button to add your image(s) from your image library. Multiple images can be selected at a time. You can Crop, Rotate and/or apply Shapes to your images before including them in the carousel as well:
Note: If you haven't added images to your image library yet or need to upload new ones, choose either the "Upload by URL" or "Upload" options:
After your images have been added, the "Images Auto Crop" settings will be available allowing you to crop all images added to the carousel in one click:
And a "Restrict Carousel Height" option which restricts the height of the carousel, regardless of how tall an image added is. This setting is recommended to be un-checked when either 4:3 or 16:9 Images Auto Crop is selected so that white horizontal stripes within the Image Carousel will be isolated:
Each image added can also be edited individually by clicking the "Edit Image" button shown when hovering over a carousel image:
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 Thumbnail Position
Choose the position of the carousel's thumbnail images.
Mobile Image Thumbnails
Choose how to display carousel thumbnail images on Mobile.
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!
Live "Published Page" Example
Product Variant Styles
The Product Variant Selector element is editable to include "Color & Size Swatches" functionality 🎉
Instead of only having the Dropdown (Default) style available for product variant selection, there is now also Color Swatches and Text Labels styles that can be set for each product variant option your product may have:
To edit the product variant selector styles, click directly on the variant selector element from the page builder to open the editing options in the left sidebar:
Under the "Main" tab, click on the "Edit All Variants" button to choose the style you want used for each variant type:
If "Swatches" is selected, choose the color you'd like used for each variant option from the color picker:
The following Tabs are also available in the sidebar of the builder to further edit your variant selector styles:
1. In the "Option Name" tab you can edit the variant selector's:
Show/Hide the option name using the "Show Option Name" toggle
Font Name from the available dropdown menu
Font Size from the available dropdown menu
Font Styles (Bold/Italicize/Underline/Strikethrough)
Font Color (Exact color hex code or use the color picker)
2. In the "Option Values" tab you can edit the variant selector's:
3. In the "Border" tab you can edit the variant selector's:
Active Color - The color shown when the variant selector is hovered over
Inactive Color - The color shown by default when the page is loaded
4. In the "Spacing" tab you can edit the variant selector's:
Padding - Top/Bottom and Left/Right in px. Padding is the space between the content of the element and its border
Margin - Top/Bottom and Left/Right in px. Margin is the space outside the border of the element
5. In the "Size" tab you can edit the variant selector's:
Color Swatches Size - Preset options of S/M/L/XL are provided
Text Label Size - Preset options of S/M/L are provided
6. In the "Visibility" tab you can choose which device(s) to show the variant selectors on:
Show on Desktop
Show on Tablet
Show on Mobile