Overview
The Product Box / Product Box with Cross-sell sections are excellent choices to showcase a single-product offer! The Cross-sell feature helps to sell more relevant and related products in-addition to the main product.
Find the Product Box and Product Box with Cross-sell sections in the "Products" category of the Section Library:
Adding a Product
Product Boxes are comprised of both Basic and Product elements to achieve the desired layout and functionality. To add a product to the Product Box, first click on the "Product" section and then on the "Add Product" button in the sidebar:
Then choose your product from the popup. Once a product is selected and added, in the "Product" tab of the sidebar you can also:
Click the "Change Product" button to select a different product.
📝Changing the product will automatically replace existing copy for the Product Title, Product Description and Pricing elements.Click the "Choose Variants" button choose specific variant(s) to use.
📝All variants are selected by default. Click on the Variant Selector element to edit variant styles.Set a "Product Discount" type from the dropdown menu. There are 6 Discount options available:
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.
📝Only one "Dynamic" discount can be applied to an order at a time. If your page includes products with multiple dynamic discounts, the most recently applied discount will take precedence.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. No discount auto-applies at Checkout.
Fixed (Static) - Show a $ based discount. No discount auto-applies at Checkout.
Set the "Default Product Quantity" you'd like used for the product.
Additional Product Section Settings
Column
A maximum of 2 columns can be included in the "Product" section. In the "Column" tab of the sidebar you can:
Rearrange the columns via drag & drop using the ⋮⋮ button
Click the ✏️ button to edit the Column settings
Click the 🗑️ button to delete a Column
Sold Out View
In the "Sold Out View" tab, you can enable the Sold Out View setting which will automatically replace the Product Box with a different section of your choosing, if the product featured in the Product Box becomes sold out.
Just toggle on the setting (1) and then select the section (2) you want used from the dropdown menu to replace the Product Box.
📝Make sure to include the replacement section directly above or below the Product Box in the page builder, so when the Product Box is hidden, the replacement section will be located in the same location on the page.
This feature was designed to have the Product 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 to everyone on that list to notify them and when they visit the page, the Product Box will be automatically shown again as long as the product has stock in your Shopify admin.
Only works for a product with no variants, or if all variant(s) are sold out.
The section selected as the replacement will be hidden on the published page if the Product Box product is in stock. It will automatically be shown and replace the Product Box on the published page if/when the product becomes sold out.
Layout
In the "Layout" tab you can set the Vertical Alignment (Top/Middle/Bottom) of elements included in the columns and choose between two different Layout options for the columns: Side-by-side or Stacked
The "Cross-Sell" Section
Cross-selling helps to sell more relevant and related products in-addition to the main product. It not only helps your customer's easily add and purchase additional products they're interested in, but also helps you increase your store's Average Order Value (AOV).
If you've added the "Product Box with Cross-sell" section then the Product Box will include the Cross-Sell product element automatically:
To add the Cross-Sell element to the Product Box section (or any other Product section) click on an existing element (1), click the + button above or below the existing element (2) depending on where you want to add the cross sell, then select "Cross Sell" (3) from the Product elements popup:
On the published page, if the checkbox is checked 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 (depending on the Product Button click action).
Product Elements
By default, the Product Box / Product Box with Cross-sell sections include the following Product Elements. Refer to the help sections below for additional details about each element:
Within a Product section, you can add, remove, and effortlessly rearrange product (and basic) elements as needed:
Important Notes - Discounts
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 Product button click action that can work with this type is "Checkout".
Dynamic discount applies to each unit of the product I.e. if you pre-set the Product 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 Product Box, a unique Shopify Discount code is auto-generated in the "Discounts" section of your Shopify admin.