Overview
The Product Page Upsell allows you to show additional products directly on your Shopify product pages, giving customers an easy way to add more items to their cart before checkout.
With support for both Product Add-ons and Cross-sell offers, you can choose how products are presented and how they’re added to the cart — whether they’re tied to the main product or added independently.
This offer is designed to increase average order value (AOV) by showing relevant add-ons or complementary products at the exact moment a customer is deciding to buy, without disrupting the shopping experience.
👉 The "OCU Upsells" app embed must be enabled in your Theme Editor to use this offer. You can enable it by clicking the link in the in-app notification banner or by following the steps in this help article:
Offer Types
Product Page Upsell supports two distinct offer types. While they share many settings, they behave differently on the storefront.
Product Add-ons
Product Add-ons let customers add extra products alongside the main product they’re viewing.
Works together with the main product
Products are added only after the shopper clicks Add to cart or Buy it now on the product page
Supports checkbox or button selection
Discounts may be removed later if trigger conditions are no longer met
Product Add-ons are ideal for upgrades, bundles, or related products that should be purchased together with the main product and added to the cart in a single action.
Cross-sell
Cross-sell offers allow customers to add products independently of the main product.
Does not require the main product to be added or purchased
Each click adds the product immediately to the cart
Button-based selection only (no checkboxes)
Each click increases quantity (items are never removed)
Quantity changes or removals must be done from the cart
Discounts are always kept once the product is added
Cross-sell is ideal for impulse add-ons, accessories, or complementary products that don’t depend on the main product.
Creating a Product Page Upsell
Follow the quick and easy steps below to create a new Product Page Upsell within an Upsell Funnel:
Below the "Product Page Upsell" in your OCU funnel, click the + Add Upsell Offer button:
Choose the offer type, then click the "Continue" button:
Product Add-ons
Cross-sell
Copy an existing offer
Make your offer product selection(s) in the "Add product(s)" popup, then click the "Add" button:
The offer will be created and added to your upsell funnel:
👉Important: Only one offer of each type can exist per funnel. Once one type is created, you can add the other type within the same funnel, if desired:
Once the new product page offer has been added to the funnel, you can:
Expand it to see the statistics for each offer product
Rearrange the position of each offer product via drag and drop
Add additional product(s) by clicking the "+ Add Product" button
Editing the Offer & Products
To open the offer editor and start customizing, 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 on Desktop and Mobile devices.
Click the "Go to Shopify Editor" button to open your Theme Editor where you can add or change the location of the offer on your product page template.
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 (Product Add-ons only) – Displays a checkbox for each offer product. The checkbox must be selected before clicking Add to Cart for the product to be added.
Button - Includes a button for each offer in the widget.
Product Add-ons: Products are added only after the customer clicks Add to cart or Buy it now on the product page
Cross-sell: Products are added immediately when the customer clicks the button
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:
Shared Builder Settings
Most builder settings are shared between both Product Page Upsell offer types. However, there are a few important differences in how product selection is handled.
Cross-sell
Includes button-only settings in the Buttons tab
Checkbox-based selection is not supported
Product Add-ons
Supports both checkbox and button selection
Merchants can customize either checkboxes or buttons, depending on the selected mode
Adding the Product Page Upsell in the Shopify Theme Editor
To display a Product Page Upsell on your storefront, you’ll need to add the corresponding app block to your product page template using 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 > Edit theme (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 and select either "Product Add-ons" or "Cross-sell" from the "App Blocks" list:
Product Add-ons: For best results, place it inside the buy box, so customers clearly see it as part of the purchase flow.
Cross-sell: For most stores, placing it below or after the buy box works best. Depending on your layout, it can also be placed inside the buy box.
📝 Only one copy of either app block should be added to the product page template. If multiple copies of the same app block are added, only one widget of that type will be rendered on the live product page.
Drag and drop the offer app block between the elements in the 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(s) can still be added to your product page template(s) manually using the codes below:
Product Add-ons:
<section id="ocu-widget"></section>(Deprecated) or<section data-ocu-widget="addons"></section>Cross-Sell:
<section data-ocu-widget="cross_sell"></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, Section or Snippet liquid file.
Consider the placement of where you want the Product page widget added and add the respective line of code to the file accordingly.
Split Testing
Product Page Upsell supports split testing within the same offer type only.
You can create split tests between:
Product Add-ons vs Product Add-ons
Cross-sell vs Cross-sell
Cross-type split tests (for example, Product Add-ons vs Cross-sell) are not supported. Each offer type has different behavior and cart logic, which prevents them from being tested against each other.
📝 If you want to test different strategies (such as add-ons versus cross-sells), you’ll need to run separate funnels and compare performance manually.
Statistics
Cross-sell conversions
A Cross-sell conversion is counted when both of the following are true:
The product was added to the cart via a Cross-sell offer, and
The product was successfully purchased
Trigger conditions are not re-checked at checkout for conversion calculations. If the product was added through a Cross-sell offer and later purchased, the conversion will be attributed to Cross-sell, even if conditions change after the product is added to the cart.
Product Add-ons conversions
For Product Add-ons, conversion is calculated as a percentage of accepted offers.
An add-on is considered accepted when:
The add-on product was selected on the product page (via checkbox or button), and
The add-on product was successfully purchased at checkout, and
The offer’s trigger conditions are met at the time of purchase
Trigger conditions depend on how the offer is configured (for example, a specific product trigger or an order total trigger). Because of this, the main product does not always need to be present in the final order for the add-on to count as a conversion.
📝 Trigger conditions may be re-evaluated at checkout, and discounts can be removed if conditions are no longer met.
Statistics for each type can be found in the tables at Statistics > Top Upsell Products and Statistics > Top Funnels within the OCU app:
Important Notes
The Product Page Upsell widgets don'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.