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
- 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.
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).
Important Notes about Discounts at checkout:
- The Shipping Options won't update after a discount is applied for the initial order. If the customer meets the free shipping requirement for your store upon entering the checkout, it won't be removed once a discount code is added that may bring their order total below the free shipping threshold.
- Shopify "Automatic Discounts" are not currently supported via API, so we can't use them on OCU Checkout. If an OCU trigger product is included in your "automatic discount" configuration, the OCU checkout will still be used, but the "automatic discount" will not be shown in the order.
Note: The automatic discount is still applied, but isn't shown in the order. Therefore, the store owner will see a discrepancy between the paid by customer and total price figures. Additionally, the buyer can apply a simple discount at OCU checkout even when an automatic discount is already enabled. So two discounts will be applied.
For these reasons, we don't recommend to use "Automatic Discounts" together with OCU checkout.
Only basic support for the Buy X Get Y discount type is available, meaning the discount will only be applied once even if the order qualifies for two or more.
I.e. If a customer adds 3 to the checkout they buy 2 and get 1 free. For Shopify checkout, if a customer adds 6 to cart they get 2 free. In OCU checkout, if a customer adds 6 to the checkout, they only get 1 free and not the second one.
Taxes for the Checkout and Offer Pages
The OCU app calculates taxes by using Shopify's taxes calculations, so they'll be 100% correct for all customers. It does this by creating a Draft Order in your Shopify account and gets the tax information from there. The Draft Order is then automatically deleted after 45 minutes.
The draft order amount will always be greater than the actual order amount when a customer declines an offer item because the draft order contains an amount for the initial order items + offer item, but only the initial order items are actually bought by the customer.
OCU never converts draft orders to actual orders, it only uses them to get the correct tax amounts for the items in the order.
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. The correct way to add code is to switch to "Code View" -> add code -> switch back to text view -> Save changes. Otherwise (not switching back to text view first) it will not save the code changes.
Codes added there won't 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
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.
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!