Overview
The on-page Product Page offer widget presents customers with relevant additional products that complement their initial purchase. By enticing customers to add more items to their cart, it increases the average order value (AOV), leading to higher revenue and improved profitability!
With this offer type you can add an inline offer widget to your existing Product pages on your Online Store 2.0 Shopify Theme. This widget provides a visually appealing area where customers can easily add additional complementary product(s):
Adding a Product Page Widget
📝 The product page widget requires the OCU app embed be enabled in your Theme Editor. You can enable it by either clicking the link in the in-app notification banner or by following the steps in this help article:
To add a Product Page Widget to any Upsell Funnel, from the funnel details page click on the "+ Add Upsell Offer" button below the Product page widget section:
On the "Create Product Page Widget Offer" popup, choose the type of offer you want to make:
Create new offer: Select a specific list of product(s) to showcase in a carousel format. This option provides control over which products are highlighted. Up to 8 products can be selected.
Copy an existing offer: If you've already created a product page widget in a different upsell funnel, you can copy it to the current funnel using this option.
Make your selection(s) in the "Add product(s)" popup, then click the "Add" button:
The offer will be created and added to your upsell funnel:
📝Split Test and Traffic Distribution functionalities will be added at a later stage.
Once the new product page widget offer has been added to the funnel, you can expand it (1) to see the statistics for each offer product, you can rearrange the position (2) of each offer product via drag and drop and you can add additional product(s) by clicking the "+ Add Product" button (3):
Editing the Offer Widget & Products
To open the offer widget editor to start customizing it, either click directly on one of the products included in the offer (1) or click on the ✏ button (2):
In the editor, you will be presented with a preview of what the widget will look like in its default location of your product page. Note that the builder contains only the default placement of the widget and its actual appearance can differ depending on the Theme.
You can also:
Access the General, Buy Boxes and Buttons section in the sidebar where most of the customization to the widget and offer products is performed.
Edit the "You may also like" headline text of the offer widget.
See a preview of the offer widget on Desktop, Tablet and Mobile devices.
Click the "Full Screen" button to work with the editor in full-screen mode.
Click the "Go to Shopify Editor" button to open your Theme Editor where you can change the location of the widget on your product page.
Click the "Save" button to save your edits before exiting.
Click the "Save as Default" button to have the style edits applied be the new default for any future product page widgets added to upsell funnels.
General
In the General section, you can set the Font Family (1) used for text included on the widget and choose a Product alignment option (2) of either Horizontal or Vertical:
If "Horizontal" alignment is chosen, there will be a "Tile Size" setting where you can choose from S / M / L, depending on how you want the tiles displayed.
If "Vertical" alignment is chosen, there will be a "Type" setting where you can choose between Carousel or Stack, depending on how you want the widget displayed.
Buy Boxes
In the Buy Boxes section, you can access and edit each offer product included in the widget by clicking on a particular product:
In the offer product editor, you can set the Hero Section image (1), enable an Image Border (2), choose which Variant(s) (3) to use for the offer, enable the Hide Variant Selector (4) setting, set a Discount (5) for the offer product and a "Hide offer..." setting (6) to prevent the offer being shown on its own product page and when already added to cart:
In the Hero Section you can choose either "Shopify Image" which dynamically pulls the featured product image from your Shopify product listing or "Image Only" to upload a custom image from your computer:
In the Discount section you can choose from the following discount options:
None - No discount will be set or displayed for the offer product.
Percentage - Set a % based discount that applies to this offer only.
Fixed amount - Set a $ based discount that applies to this offer only.
Compare at price - Show the product's "compare at price" as the discount. If this option is used, it will pull in and display your product's compare at price set in Shopify admin.
📝 Percentage and Fixed amount discount types use Shopify "Draft Orders" to auto-apply the discount at checkout. More details
If any discount option other than "None" is used, an optional "Savings Label" can be enabled to make the savings information even more prevalent:
Clicking on the "Savings Label" element, you're able to edit the label text and apply additional font styles:
Buttons
In the Buttons section, you can edit the style of the Checkbox shown below each offer product. Choose the Checkbox Color (1) and Border Color (2) you'd like used:
The "Add to cart" text for each checkbox can be edited by clicking directly on the text element in the offer builder:
Adding the Offer and Choosing the Location in the Shopify Theme Editor
To add the offer widget and choose the location on your product pages, you must utilize the Shopify Theme Editor. To access the Theme Editor, either click on the "Go to Shopify Editor" button (1) located in the OCU offer editor or navigate to Sales channels > Online Store > Themes > Customize (2) in your Shopify admin:
In the Theme Editor, choose Products > Default product from the dropdown menu at top-center of the page:
📝If your product page uses a theme template other than "Default product", then choose that one from the dropdown menu instead.
Click the "+ Add block" button located in the "Product Information" section and select "Buy box widget - Zipify OCU" from the "App Blocks" list:
📝 Only one copy of the widget should be added to the "Product information" section. Adding it to a different location on the page can result in the widget not rendering correctly. If multiple copies of the widget are added, only one widget will be rendered on the live product pages.
Drag and drop your offer between the elements in the "Product information" section to preview the different offer placement options.
A dynamic preview of the widget will be shown in the Theme Editor, however it's best to check your live Product pages to see an exact view of the offer. Note that only saved edits in the OCU offer builder will be shown in the preview:
Click the "Save" button in the top-right corner of the Theme Editor.
Adding the Widget to a 1.0 Theme
If you're not using a 2.0 Theme with "Sections" functionality in the Theme Editor, the widget can still be added to your product page template(s) manually using the code below:
<section id="ocu-widget"></section>
On 1.0 Themes the code should generally be added to the
product-template.liquidfile.If it's a custom template, the code should be added to the relevant product template liquid file.
Consider the placement of the Product page widget in the buy box area of your template where you want to have the widget added and add this line of code accordingly.
Important Notes
The product page widget doesn't work with the "Product Variant" trigger type available for upsell funnels. A different trigger type must be used:
If a new 2.0 Theme is published, the product page widget must be re-added in the Theme Editor of the new theme.
The product page widget was designed for use on the "Default product" template in 2.0 Themes, but can also be used with other Theme templates which have the necessary structure and functionality. It is not compatible with product page templates created completely by 3rd party apps, such as "Full Customization" templates in Zipify Pages.