All Collections
Zipify Pages - Tutorials & Documentation
Buy Boxes
Buy Box / Buy Box with Cross-sell [Zipify Pages]
Buy Box / Buy Box with Cross-sell [Zipify Pages]

Customize your Buy Box like never before!

Jeff Maxfield avatar
Written by Jeff Maxfield
Updated this week

Overview

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 sections in the "Buy Boxes" category of the Section Library:Β 

πŸ“ Currently there is a restricted ability to delete "Product" elements (title, description, price, etc) in Buy Boxes directly in the builder. Instead, those need to disabled in the Layout tab of the Buy Box settings:

You can however still add and remove new elements added to the Buy Box.

Product Settings

If you're using a page Template that has the Buy Box section already included in it, click the βš™οΈ icon in the top-left of the section (1) or in the sidebar (2) to access the Product Settings:

That will open the product settings popup and present 3 Tabs that you can edit:

  • Product, Layout and Sold Out View

The "Product" Tab

In the "Product" tab you can add your Shopify product by clicking on the "Add Product" button:

Next, select your product in the "Select Product" popup and 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

  • Choose Variants

  • Change Product
    ​

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.

*Notes:

  • 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:

Choose Variants

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.

Change Product

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.

These settings are also available in the sidebar of the builder after clicking on the "Product" element there:

The "Layout" Tab

Click into the Layout tab so you can pick and choose exactly which elements you want included or excluded for the layout of your Buy Box. Just check/un-check the box next to each element per your preference:

Layout Elements

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.
    ​

  • 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.

There's also a "Layout" tab available in the sidebar of the builder after clicking on the "Product" element, where can access the Vertical Alignment setting and choose the Layout for the Buy Box section, depending on your preferences:

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 with a different section of your choosing, if the product featured in the Buy Box becomes sold out.

Just check the box and then select the section 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 section of your choosing. If you'll be using an opt-in form section, 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.

Notes:

  • 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 section directly above or below the Buy Box in the page builder so when the Buy Box is replaced, the replacement section will be located in the same location on the page.

  • The section 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.

The "Cross-Sell" Section

To enable the Cross-Sell section for your Buy Box, check the "Cross-Sell Section" option in the Layout tab of the Buy Box settings, then click the "Save" button:

Once enabled, the new section will be added to your Buy Box in the builder and can be configured there. Hover over the element and click on the ✏️ button in the top-left corner to select product(s) to use in the Cross-Sell section:

After the product(s) have been added, click the ✏️ button again to edit the product settings for each product included in the Cross-Sell section in the sidebar:

Cross-Sell Product Setting

Cross-Sell product setting options include the following:

  1. Drag and drop the cross-sell product into a different position

  2. Expand/Collapse the product settings for a particular product

  3. Change the Product to a different one

  4. Choose product Variants to use (if applicable)

  5. Set a Discount type for a particular product

  6. Add a New Product to the cross-sell section (if applicable)

  7. Delete a Product from the cross-sell section

*Important Notes:

  • 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.

  • 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 settings.

Cross-Sell Layout Settings

Click into the "Layout" tab of the Cross-Sell element settings to choose the elements you want included in the cross-sell box and to set the Vertical Alignment setting:

You can also further customize the elements and styles and/or add additional element(s) within the Cross-Sell section, by clicking on each element and editing the settings in the sidebar of the Page Builder:

On the 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.

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:

πŸ“ The sticky ATC button will show in the builder for the view it's enabled on at all times. It only shows on the live/published page when the page is scrolled 25% if the Buy Box is above that page content threshold. If the Buy Box is below 25% of page content, it will be shown immediately on page load.

Styles and Text 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. If the main product in the Buy Box has no variants, then the sticky button will inherit the same destination as the main Buy Box button. If the product has variants, then the button will scroll the customer to the Buy Box to select their variant instead.

Button Settings

The Button settings for the Buy Box button can be accessed by clicking on the button element (1) in the page builder. The settings then become accessible from the sidebar (2):

In the "Main" tab of the button settings you can:

  1. Set the "Call to Action" text for the button and adjust text styles such as Font Name, Font Size and Font Style (bold, italic, underline)

  2. Set the "Destination" for the button, which is where you want the customer be redirected to after the button is clicked

  3. Enable/Disable the "Sticky Button" feature on particular device

  4. Set the button's Hover State and Non-Hover State settings and styles
    ​

The remaining settings tabs of the button (Background, Shape, Border, etc) are all the same as for regular buttons as gone over here in this help article.

Button Destination Options

The Destination section for Buy Box buttons differs from regular buttons and includes options to add a product to the Cart and/or Shopify Checkout as well. Other destinations are available via the dropdown menu:

  • 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

  • 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

  • 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.

πŸ“ For the "Shopify Image Carousel" and "Product/Variant Image" options for the carousel, 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 when the "Static Image Carousel" option is selected, start by clicking on the Carousel element within the builder. Then choose either "Add Images" or "Add Video":Β 

Adding Images

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: Β 

πŸ“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:

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:Β 

This section of the carousel settings includes the options to:

  • Enable/Disable the "Zoom Image on Hover" setting for images in the carousel.

  • The option to "Use Video as First Element" if desired.

  • Set the time interval for the "Slide Show" setting, which is the amount of time you want elapsed before the next image in the carousel is shown.

Carousel Thumbnail Position

Choose the position of the carousel's thumbnail images.

  • Bottom (default)

  • Left-aligned

Mobile Image Thumbnails

Choose how to display carousel thumbnail images on Mobile.

  • Image Thumbnails

  • Dots

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.

Don't forget to click the "Save" button to save your work

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 on the Variants element (1) in the page builder to open the editing options in the sidebar (2):

Under the "Main" tab, click on the "Edit All Variants" button to choose the style you want used for each variant type:

  • Dropdown

  • Swatches

  • Text Label

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:

  • Font Name from the available dropdown menu

  • Font Color (Exact color hex code or use the color picker)

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

Did this answer your question?