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. By selecting the checkbox or clicking the button for each supplementary product within the widget, customers can include these additional items along with the main product when they click the "Add to Cart" button.
Adding a Product Page Widget
📝 The product page widget requires the "OCU Upsells" 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:
📝Traffic Distribution functionality 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 using the inline text editor.
See a preview of the offer widget on Desktop, Tablet and Mobile devices.
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:
Choose and set the Font Family used for text included on the widget.
Choose a Product alignment option 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.
Toggle on/off the Product Information setting. When toggled on, clicking either the product title or product image for a product page widget offer will open a pop-up showing an image / image carousel and product description:
📝If Hero Section = Custom Image, only the custom image configured for the product in the offer will be shown in the pop-up.
If Hero Section = Shopify Image, all images configured for the product in Shopify will be shown in the pop-up. The featured product image is displayed first by default
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
Show or hide the Quantity Selector (6)
Enable and set a Predefined Quantity (7) for the offer product
When enabled, the quantity selector remains visible but is inactive. It's recommended to use predefined quantity along with displaying the quantity selector, so customers can see the quantity they're adding.
If there's a percentage or fixed amount discount AND predefined quantity enabled, if the customer manually changes the offer product quantity later in the cart, the discount will be removed unless the predefined quantity of the product is restored.
Enable the "Hide product on own page..." setting (8) to prevent the offer being shown on its own product page and when already added to cart
This setting is Product-specific and not Variant-specific I.e. it applies to the Product including all variants of that product.
In the Hero Section you can choose either "Shopify Image" which dynamically pulls the featured product image from your Shopify product listing or "Custom Image" 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 for users who are not using the new OCU "Automatic Discount" method.
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 using the inline text editor:
Buttons
In the Buttons section, you can choose between two different button types:
Checkbox - Includes a checkbox for each offer in the widget, which must be checked prior to clicking the "Add to Cart" button in order for the offer(s) to be added.
Button - Includes a button for each offer in the widget, which must be clicked prior to clicking the "Add to Cart" button in order for the offer(s) to be added.
Checkbox
If the "Checkbox" button style is chosen, 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 using the handy inline text editor by clicking directly on the text element in the offer builder:
Button
If the "Button" button style is chosen, you can choose between Primary or Secondary button types (1), edit the Button Color (2), Button Hover State color (3) and the Corner Radius (4) of the buttons:
The "Add" text for each button can be edited using the handy inline text editor 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 can 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 product page template from an OS 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.liquidSnippet file.If it's a custom product page 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:
It's not recommended to use the "Items quantity greater than 1" trigger condition or the OR operator in the setup of your Funnel Trigger conditions for this offer type. Doing so will cause the product page widget to not show on trigger product page(s), as these conditions return as False when viewing the product page and the offer can't be shown.
If a new Theme is published, the product page widget must be re-added in the Theme Editor or via code addition to 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. In Zipify Pages for example, it can be added to a product page using the Shopify App Block element or via the HTML element using the section code above.