Overview
The "In-Checkout Offer" allows for additional offer(s) to be shown directly on the Shopify Checkout page during the checkout process. You can add up to 8 products to an offer.
It can also be shown on the Shop App checkout for qualifying merchants. Using the checkout page as an opportunity to upsell or cross-sell a complementary product can increase your store's average order value significantly!
After this offer type has been added to an upsell funnel, you can add it to your Shopify Checkout and choose the location you'd like it shown using Shopify's "Checkout Editor" available through the new checkout extensibility feature.
📝This offer type is available for Shopify Plus merchants only. Checkout extensibility is not compatible with checkout.liquid.
Adding an In-Checkout Offer
To add an In-Checkout Offer to an upsell funnel, follow the quick and easy steps below:
1. From the "Funnels" section, open an upsell funnel (1) or create a new one (2):
2. On the funnel edit screen, locate the "In checkout" offer section and click the "+ Add Upsell Offer" button:
3. Choose either "Create new offer" (1) to create a new in-checkout offer or "Copy an existing offer" (2) to copy an in-checkout offer you've already created in a different funnel. Click the "Continue" button:
4. Select the product(s) or variant(s) from the "Add Product" popup and click the "Add" button. Up to 8 products can be added:
5. The in-checkout offer will be added to the funnel and will be ready for editing:
Click the dropdown arrow (1) to expand the offer and see individual offer stats
You can drag and drop the offers (2) into different positions
📝 The funnel needs to be in an Unpublished state to reorder the productsAccess the "More actions" menu (3) for each offer product to Change or Remove the product
Add additional product(s) by clicking the "+ Add Product" button (4)
Click the ✏️ button to open the Offer Editor (5)
Create an A/B Split Test (6) for the In-Checkout offer
Download Statistics (7)
The Offer Editor
The Offer Editor is where you make edits to the In-Checkout Offer being presented to your customers.
To access the editor for the in-checkout offer, either click directly on the offer card (1) or on the "Edit Offer" button (2):
General
Within the General section of the editor, you can:
Set the "Products Alignment" setting to Vertical or Horizontal
If Vertical is used, choose the Type of alignment between:
Carousel - shows the offer product in a vertical carousel with scroll arrows
Stack - shows the offer products stacked on-top of each other
If Carousel type is chosen, set the number of Items to Show at a time from 1 - 4
Buy Boxes
Within the Buy Boxes section of the editor, you can access the following for each offer product:
Enable the Star Rating element (1)
When enabled, a Value field and Star Rating Text element becomes available
Select Product Variant(s) to use for the offer (2)
If only one product variant is selected, an optional "Hide Variant Selector" setting becomes available.
Set the offer product's Discount option (3):
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. This option will pull in and display your product's compare at price set in Shopify admin.
An optional "Savings Label" (recommended) can be enabled as well to make the savings information even more prevalent!
If percentage or fixed amount options are used, a Discount Title field will appear:
Once the In-Checkout offer has been accepted and added to cart, the discount title will appear in the Order Summary section:
Enable/disable the Quantity Selector (4)
Enable and set a Predefined Quantity (5) 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/disable an Offer Description (6)
Enable/disable the "Hide offer..." setting (7), which prevents the offer from showing at checkout if the customer has already added it.
This setting is Product-specific and not Variant-specific I.e. it applies to the Product including all variants of that product.
Buttons
Within the Buttons section of the editor, you can set the Button Type for the "Add" button included for each offer:
Primary - Sets the button style with default color used on the Checkout page.
Secondary - Inverts the colors of the default button for a contrasting look.
📝Blue button color will be used in the editor by default. Use the "Checkout Editor" to view and set your button color.
Editing Text Content
To edit the text copy for Offer Title, Product Title, Add button and Description simply click on a particular text element in the editor and use the handy inline text editor to edit as needed:
Previewing the Offer
Preview your in-checkout offer on Desktop, Tablet and Mobile devices the in-app using the available preview options:
The placement of the offer will show in the default position (above the items in the order summary) in the editor, however, it can be shown in a different location on Shopify Checkout using the "Checkout Editor".
Don't forget to click the "Save" button in the top-right corner to save your changes after you're finished editing the offer:
AI Writing Component
An "AI Writing" functionality is available in the inline text editor for the Product Description field:
This is an advanced feature that harnesses the power of AI to generate compelling and engaging product description and content copy for your offers. With the AI Writing functionality, you can effortlessly produce high-quality copy that resonates with your audience, effectively captures their attention, and motivates them to buy.
Just click on the "AI Writing" button to open the generator where you can choose the Tone (1), enter a Prompt (2) and then click the "Generate" button (3) to generate the copy:
📝 You can also check the "Reference Content" checkbox if you'd like the generated copy to reference the page content when generating the response. A maximum of 1,000 characters can be entered into the prompt field at a time.
After the initial response has been generated, you can ask the AI to:
Rewrite it, Shorten it, make it Longer or Simplify (1) using the available options.
Change the Tone (2) of the response from the options available in the dropdown menu.
Start a New Prompt.
Insert the generated copy if you're happy with it.
Rate the generated response (5) to help train the AI to your preferences.
Working with the Shopify Checkout Editor
Using the Shopify Checkout Editor, you can add the OCU in-checkout offer to your Shopify Checkout and choose the location you'd like it shown.
The offer must be added to your Shopify Checkout using the checkout editor before it can be shown to customers. Follow the quick and easy steps below:
1. Click the "Go to Checkout Editor" button in the offer editor:
2. Click the "+ Add app" button located in the bottom-left corner of the Checkout Editor:
3. Click the One Click Upsell - Zipify OCU app on the next screen:
4. Your in-checkout offer should show in the default position, above the items in the order summary (1). The offer can be moved to a different position via the drag and drop action (2). The " 🗑️ Remove app from checkout" button (3) can be clicked to remove the in-checkout offer from your Shopify Checkout:
5. To adjust the position of the offer at checkout to a different desired location, left-click and hold on the "Upsell" app and drag and drop it into the new position.
Click the "Save" button to save your changes:
📝The offer can be added to multiple locations at checkout if desired, by repeating steps 2-5 above.
Showing the Offer on Shop app
Due to a new partnership between Shop and Zipify, the In-Checkout Offer can also be shown directly in the Shop app available for iOS and Android for mobile devices!
Customers can use the Shop app to discover new stores and products, engage with your brand, make purchases using Shop Pay, and track packages to delivery. If your store meets the eligibility requirements outlined in the Shop Merchant Guidelines, then your store and products will automatically be listed in the Shop app and the Shop sales channel will appear in your Shopify admin.
Just follow the steps above to add the In-Checkout offer within your OCU app and to your checkout page using the Checkout Editor in Shopify admin.
Next, click on the "Upsell" app in the Checkout Editor, check the box next to "Include app in Shop Pay" and Save:
The offer will start to show to customers who check out on Shop app as well:
Viewing Stats on the Funnel details page
Shopify Plus merchant have an ability to view In-Checkout offer stats on the Funnel details page (1) and the Funnels List (2). Stats for Online Store and Shop sales channels are displayed separately:
Views | The number of times the offer was shown and the checkout was completed. |
Conversion | The total amount of sold offers divided by the number of offer views. Offer conversion rate = times offer was sold / offer views |
Revenue | A sum of all accepted offer products revenue. |
Rev. / Visit | 'Total Revenue' divided by the number of 'Views". |
📝Views for In-Checkout offers are only counted for completed checkouts. As with pre-purchase offers, abandoned checkouts are not counted towards In-Checkout views.
Important Notes
The In-Checkout offer won’t be shown for customers if:
OCU isn't added on the Shopify "Checkout Editor" page.
On a "Draft Order" Checkout, like one that is used if an OCU Pre-purchase offer with a discount is added by the customer.
The OCU app is disabled.
The Funnel with an In-Checkout offer is not published.
Shopify Plus Merchant can duplicate one In-checkout offer by adding the OCU app several times using the Shopify "Checkout Editor". All of the offers can be shown to customers, but once the customer accepts one of the duplicates of this In-checkout offer, all other will disappears from the Checkout page.
There's no ability to use a "subscription only" product as In-Checkout offer.
On multi-currency checkouts, the offer will be shown in the default store currency, but if accepted it will be shown in the buyer's currency.
For Percentage and Fixed amount discount types:
a. Upon creating your first discount for an In-Checkout offer, an OCU Discount rule will appear in your Shopify admin panel.b. Deleting discounts manually in Shopify's admin may affect In-Checkout offer performance as the discount will not work until the corresponding offer is enabled or disabled.
c. Avoid creating duplicate products with identical options for a single order. If duplicates exist, the discount will be divided and not applied to each product individually.
d. If the same product as an In-Checkout offer is already in the customer's cart, the discount will not be applied when the offer is added.
FAQS
Will the In-Checkout offer be compatible with Shopify's one-page checkout?
Will the In-Checkout offer be compatible with Shopify's one-page checkout?
Absolutely! The one-page checkout will function just the same. You don't need to take any action when switching from the three-page checkout to the one-page checkout. If you happen to experience any issues, please try removing the OCU In-Checkout app block in your checkout editor and then re-add it by following the steps in this help article.
Is it possible to preview my In-Checkout offer on the actual checkout page?
Is it possible to preview my In-Checkout offer on the actual checkout page?
Yes! You have the option to preview the offer on your Shopify Checkout page by creating an alternate checkout to test it out. To do this, simply navigate to your Shopify checkout settings and duplicate your live checkout profile. Once you've done that, you can add the app block to your duplicate checkout for testing purposes.