⚠️ There are now 2 versions of OneClickUpsell. If the app was installed from the Shopify App store, you’re using the OneClickUpsell Native version which has a blue/orange color scheme. For the OCU Native knowledge base click here.
The OneClickUpsell app is a checkout replacement app. With the app enabled, you will have 2 checkout processes for your store, depending on which items have been added to the cart.
The way that the app works is that if you have a store product with an active upsell tag assigned to it (a trigger product) and that product is in the cart, then the OCU checkout will initiate once the "Checkout" button is clicked.
Any carts that do not have an OCU trigger product added will continue to be processed by your standard Shopify checkout and the payment options you've configured for Shopify checkout.
On this page
- How does the OCU Checkout work?
- Checkout Logo
- Checkout Discounts
- Taxes for the Checkout and Offer Pages
- Shipping for the OCU Checkout and Offer Pages
- Configuring the OCU Checkout Page
- Form Options
- Preview Window and URL
How does the OCU Checkout Work?
By default, the OCU checkout is designed to mimic the look and functionality of the standard Shopify checkout as closely as possible so it's a seamless experience for your customers.
The OCU checkout localizes the language for checkout that you've set in your Shopify admin at Settings > Checkout > Checkout language. The OCU checkout also pulls the checkout labels from your Shopify store's settings. You can update these labels (Email, Phone, etc.) by clicking the Manage checkout language button there. Labels can be edited in the Checkout & system tab:
Shopify uses the logo, banner and other attributes from your store's theme at Online Store -> Themes -> Customize theme -> Checkout of your Shopify admin. OCU does the same to mimic Shopify's behavior. If you don't see your logo or banner on your OCU checkout and pages, just add your logo there in your Theme Settings.
The Logo size and position can also be adjusted there and those adjustments will port over to the OCU checkout, offer pages and thank you page.
The OCU app's checkout works with discount codes created in the Shopify Discounts section. Discount codes entered during checkout apply to the initial checkout order items only.
- The Buy X Get Y discount type is supported, but only for the "Minimum quantity of items" parameter. We are not currently integrated with BXGY discount for "Minimum purchase amount".
- Shopify Gift Cards are not a supported payment method on the OneClickUpsell checkout.
You can add a discount for your upsell/downsell offer pages within the OCU app's Offer Page Editor.
OCU also supports Shopify "shareable discount links" which auto-apply at OCU checkout.
Where "code" is the name of your Shopify discount code.
Where "code" is the name of your Shopify discount code and then include "?redirect=" followed by the page handle of the page you want to direct the customer to with the discount included (like a ZP page for example).
Taxes for the Checkout and Offer Pages
The OCU checkout and offer pages calculates taxes by using Shopify's latest API, so they'll be 100% correct for all customers.
Note: Taxes only show correctly on the Live versions of the OneClickUpsell Checkout and Offer Pages. N/A will be shown in Preview mode for those pages.
Shipping for the OCU checkout and Offer Pages
The OCU checkout will pull in your Shopify shipping settings, methods and rates that you've setup at Settings > Shipping of your Shopify admin.
For the post-purchase upsell / downsell offer pages, you can choose either free shipping or charge for shipping.
If you charge for shipping, then in order to calculate the shipping cost for each post-purchase upsell /downsell offer, OCU uses the following flow:
Once a customer gets to the offer page, it creates a new cart which contains the initial purchase + upsell purchase and asks Shopify about the shipping cost for this new cart based on the shipping method selected for the initial order.
Then the shipping cost for the upsell product equals the difference between the shipping costs for the combined cart and initial cart.
If the initial order's shipping cost is $10 and combined cart's shipping price is $15, then the shipping cost for the upsell product itself is $5. This is the price we're using for the offer page to show the final price of the upsell product and then add into the order.
*Note: The offer page first looks for the same shipping rate name that was chosen at Checkout. If this rate satisfies shipping for the combined cart then it will be used.
If this rate doesn't satisfy the combined cart, then the next available rate will be used, even if the shipping method is different than what was chosen at Checkout.
Your shipping methods and rates will only show correctly on the Live OneClickUpsell Checkout and not in Preview mode.
Configuring the OCU Checkout Page
To configure the available options for the OCU checkout page within the app, click on the "Settings" button from the left-side navigation menu. Then select "Page Defaults" and click the "Customize" button below "Checkout Page":
Here is where you can modify and preview the OCU checkout page using the available Appearance and Form Options sections:
In the Appearance section, you can configure the following:
Default Country - This setting allows you to configure the Default Country selection logic for the Countries list of the Checkout. Customers will still be able to set their country manually as well when on the checkout page.
Available options are:
- Country of Main Store - Will auto-select the country of your Shopify store.
- Auto-locate Customer 's Country - Will automatically define the customer' s country based on their IP address and populate into the Country field. It will leave the Country field empty if the customer's country isn't in the list of your store's supported countries.
- Use Specified Country - Set the desired country as the default one (using the drop-down menu with all of the countries listed which are supported by your store).
Checkout Background - Choose any color you'd like for the "Checkout Background". Use it to match your Shopify checkout if desired. Use the color picker or enter in your color Hex Code.
Order Summary Background - Choose any color you'd like for the "Order Summary Background". Use it to match your Shopify checkout if desired. Use the color picker or enter in your color Hex Code.
Expand Order Summary on Mobile - "Enabled" by default which means the Order Summary section will be expanded on mobile automatically so that your customers can enter their Discount code immediately after entering the checkout. Click the switcher to "Disable" this setting so that it functions like the standard Shopify checkout where the customer has to either tap to expand the Order Summary section to reveal the "Discount" field or enter their Discount code at the last step of checkout on mobile.
Custom Content Sections
There are three "Custom Content Sections" available where you can add additional customization to the OCU checkout page using the available "What You See Is What You Get" (WYSIWYG) editors:
- Right-Hand Side-Panel - Shows below the "Order Summary" section.
- Shipping Notification - Shows on the "Shipping method" step of checkout only.
- Footer - Shows in the Footer of the checkout page.
Note: Recommended image size for the Right-Hand Side-Panel is 420 x 355 px and for the Footer is 580 x 105 px. Anywhere within those general image dimension ranges should also work well in those sections.
The WYSIWYG editor has many tools available such as:
Font Styles, Fonts, Font Size, Font Colors, Bold, Italicize, Underline, Remove Font Styles, Unordered List, Ordered List, Paragraph Spacing, Image, Link, Video, Line Height and Code View.
*Useful Tip: Using the "Code View" option you can add custom HTML/CSS code to the checkout page.
Codes added there may not show correctly in the "preview window", but will be included on the page when you click the "Preview on Store" button and when presented live to your customers:
Remaining settings in the Appearance section include the following:
- GDPR Checkbox
- GDPR Accepts Checkbox Label
- Address Autocomplete
- Accept Marketing
- Offer Product Label
This checkbox is set to Required by default. You can hide this checkbox and message by clicking the switcher to disable it, but it is strongly recommended to have it be required for your EU and EEA customers.
Note: If set to Required, this checkbox will only show for customers which are detected as being from countries belonging to the European Union (EU) or the European Economic Area (EEA) based on IP address.
GDPR Accepts Checkbox Label
Default text is provided. Use this field to add your own text for the GDPR checkbox label if desired. Find more information about OCU and GDPR here!
To help decrease checkout abandonment and increase purchase conversion rates, OneClickUpsell supports checkout address autocomplete through the Google Places API. Simply follow the steps in this article to obtain your Google API Key to enable this on your store.
Note: the Google Places API is a paid service and subject to Google's terms and conditions. Please see additional details at the end of the article linked above.
This section contains the setting which is needed to specify the way you want the promotions sign-up checkbox to be handled by default. The three available options are:
- Customer agrees to receive promotional emails by default.
- Customer doesn't agree to receive promotional emails by default.
- Disable and hide this field.
It's recommended to have it configured the same exact way as it is for your Shopify checkout.
Offer Product Label
This Special offer section will show on the checkout page only when a pre-purchase offer has been added to the cart. Modify this label as needed:
This section contains the "Form Options" settings for the "Customer information" fields of the OCU Checkout Page. It's important to have these fields configured for the OCU checkout the same way as they are in the Settings > Checkout > Form options section of your Shopify admin.
Preview Window and URL
The Checkout preview window allows you to see your edits applied to the Checkout updated in real-time! You can switch between Desktop and Mobile views by clicking the desired device icon.
The "Checkout Breadcrumbs" also work when clicked to bring you to the specified section of the checkout in the preview window.
Click the "Preview on Store" button to see the OCU checkout page "preview" opened up in a new browser window. You can share this preview URL with your designer or anyone else you'd like so they can view the preview and give editing tips and suggestions for improvement. The preview URL will look like this for example: https://yourstore.myshopify.com/apps/secure-checkout/previews/checkout
*Note: The "preview window" and "preview URL" are just previews. They are not an accurate representation of how the "live" OCU checkout will appear on your store. For example, your Checkout Language (if other than English) will not be shown in preview mode, Discount codes won't work in preview mode, etc. To see the actual live OCU checkout on your store, you will need to initiate the OCU checkout live by adding an active OCU trigger product to the Cart and clicking the "Checkout" button from your Cart page.
If OCU checkout initiates successfully, you will see "/apps/secure-checkout..." in the browser window's URL bar. If you don't see that included, then you are on Shopify's checkout or some other 3rd party checkout like ReCharge Checkout for example.
Once you have everything configured to your liking, click the "Save" button to save your changes!