On this page

Overview

The Pre-purchase Offer Popup Editor is where you configure the settings for the product(s) you want to be used as the pre-purchase upsell offer(s), any discounts you'd like used for your offers as well as the overall content and appearance of the pre-purchase offer popup that is presented to your customers.

The pre-purchase popup for a funnel can be shown in one of two locations:

1. On the Cart Page (/cart) after the customer clicks the "Checkout" button from there. It will also show after clicking the "Checkout" button included in AJAX Carts (drawer/slider/popup/etc.) for Shopify Themes. The customer will be redirected to the Checkout page after interacting with the pre-purchase popup on the Cart Page.
📝Not compatible with "accelerated checkout buttons" (PayPal / ShopPay / Amazon Pay, etc) included on the Cart Page or AJAX Carts.

2. On the Product Page (/products) after clicking the "Add to Cart" button there. Choose this option if you want the pre-purchase popup to be triggered earlier on in the purchase cycle. The customer will be redirected to the Cart Page (or your AJAX Cart) after interacting with the pre-purchase popup.
📝Not compatible with "dynamic checkout buttons" (PayPal / ShopPay / Amazon Pay, etc) included on product pages.
📝The OCU pre-purchase discount can be shown on your Cart Page. Reach out via support chat for help with implementation.

The "Product page" location type is also not currently compatible product pages created in 3rd party apps. Only compatible with "Add To Cart" buttons located on Theme product pages.

If you are using the Zipify Pages page builder app along with OneClickUpsell, we recommend you enable the integration between the apps in the Settings > Integrations section of the Zipify Pages app. Enabling this integration will ensure that your OCU pre-purchase offers will be shown on your "ZP Layout" Product pages and ZP dynamic discounts will be passed to checkout.

To change where you want the pre-purchase popup to be shown, click on the "Change Location" button below the Trigger Products section at the top of the funnel builder:

📝Not compatible with "accelerated checkout" buttons (PayPal / Apple Pay / G-Pay etc.) on Product and/or Cart Pages, the Dynamic checkout button on product pages, or with the Shopify "Buy Button".

*A preview of how the pre-purchase upsell offer popup will be shown on Mobile (left) and Desktop (right):

Accessing the Pre-Purchase Offer Popup Editor

To access the popup editor for a pre-purchase offer you've added to a funnel:

  1. From the Dashboard screen (home), click into the "Funnels" section.

  2. Click on the name of the funnel that contains your offer that you'd like to edit, which will take you to the Funnel Builder.

  3. In the Funnel Builder, click on the pre-purchase offer card.

  4. You will then be launched into the pre-purchase offer popup editor to start editing your offer!

📝A pre-purchase offer can also be a Trigger Product for a different funnel.

⚠️ If the customer adds a pre-purchase offer to their order that is a trigger for a different funnel with a higher priority, then the funnel with the higher priority will be used for the order instead of the original funnel.

Similarly, if the "Upgrade Order" pre-purchase offer is accepted which replaces the original trigger product, and that new product isn't a trigger for a funnel that has post-purchase offers, no post-purchase offers will be shown for the order.

Working with the Editor

The pre-purchase offer popup editor is designed to be intuitive and easy to use!

📝If you're creating a multi-product pre-purchase offer, please see this help article as well.

The pre-purchase popup editor for "single product" offer types is comprised of the following 4 Sections:

  • General - configure the Font Family you want to be used for the default text in the popup

  • Incentive (formerly "Timer") - enable/disable the Timer, set the Time Limit and background-color

  • Buy Box - configure the Product Title, Image section, Variants, Discount and set the "Hide Offer" condition (optional)

  • Buttons - configure the "Add/Decline" button colors and hover-state colors

To edit text content, hover over elements in the builder view. When you see the blue highlight simply click to edit that specific element.

Notes:

  • The following shortcodes can be used to dynamically output the product's title, discount amount, regular product price, and discounted product price in any text field respectively:
    - {{ product_title }}
    - {{ discount }}
    - {{ product_price_was }}
    - {{ product_price_now }}

General

In the General section, you only decide on the "Font Family" you want to be used for your offer popup. "Arial" is the default, but can be changed via your selection from the fonts menu:

*Note: The font type for a particular line on the popup is able to be changed from the default font family via the Text Editor if desired:

Incentive

In the Incentive section, the following options are available:

  • Show Timer: either enable or disable the offer popup timer from showing.

  • Time Limit: set the time limit for the timer. Choose between 3, 5, and 10 minutes.

  • Background Color: set the background color of the timer section.

Buy Box

In the Buy Box section, you configure all things related to the offer being made.

  • Product Title: The product's regular title will be used by default. Use the field available to make any needed edits to the title for the offer popup.

  • Hero Section: Choose from the available options.
    - Single Image to have your featured product image used
    - Custom Image to upload a custom image from your computer
    - Image Carousel to feature a carousel of images + a video (optional) from your Shopify product listing
    📝If "Single Image" or "Image Carousel" is used, the featured image will also update based on the variant selected.

    Click on the "Media Gallery" button to select the product image(s) and video you want used in the carousel:

    A "Refresh Media" button is also available in the media gallery popup to synchronize new images/videos from the Shopify product page, if any were added after the initial offer creation:

    📝If you change the product variant image(s) to new one(s) in the "Products" section of your Shopify admin, then you should unselect the old image(s) on the “Media Gallery” popup, in order to show only relevant product variant image(s).

  • Image Size: S/M/L sizes available for Single Image and Custom Image options.

  • Image Border: Enable or disable a border around the "Hero Section" image.

  • Variants: All variants are selected by default. If desired, choose the specific product variant(s) you want to be offered instead.
    📝If you only select one variant for the offer, then the "Hide Variant Selector" toggle will also become available.

  • Discount: Set a discount (if any) that you want to offer for the product in your pre-purchase popup. There are 4 options available:
    1. None - No discount will be set or displayed for the offer product.
    2. Percentage - Set a % based discount that applies to this offer only.
    3. Fixed amount - Set a $ based discount that applies to this offer only.
    4. Compare at price - Show the product's "compare at price" as the discount.
    Note: If this option is used, it will pull in and display your product's compare at price set in Shopify admin.

    An optional "Savings Label" can be enabled as well to make the savings information even more prevalent!

  • The option to "Hide offer if the cart already contains the upsell product".
    Enable this setting if you don't want to show the pre-purchase popup offer if the customer has already added the same product to their cart.
    📝This setting is Product-specific and not Variant-specific I.e. it applies to the Product including all variants for that product.

Buttons

In the Buttons section, you configure the "Add to Order" and "Decline" button colors and hover-state colors. Just make your selections from the available color pickers for each button type and setting to apply an update:

Notes on the Percentage and Fixed amount Discounts

  • OCU generates a "Draft Order" when a pre-purchase discount uses either “Percentage” or “Fixed amount” and the customer adds the offer to their cart.
    If you use the discount progress bar and/or free shipping bar for the "Multi-product Pre-purchase" upsell and the customer adds the upsell to the cart, OCU also generates a Draft Order.

  • In your Shopify admin, all completed orders that contain a pre-purchase offer with “percentage” or “fixed amount” discounts are marked as "from One Click Upsell - Zipify OCU (via import)"

  • Such orders will also be listed in the "Zipify OneClickUpsell" sales channel in your Shopify admin. Orders that contain pre-purchase offers, but without a discount, or those that contain post-purchase offers only are marked as "Online Store" and are included in that sales channel. Please refer to OCU in-app Statistics for upsell stats because it is incomplete for the Zipify OneClickUpsell channel in your Shopify admin.

  • The "Discount code" field will be removed from Shopify Checkout if a pre-purchase offer that uses a percentage or fixed amount is added by the customer for their order. Only one discount can be applied per order.

  • OCU generates a draft order to apply the fixed amount or percentage discount to the Shopify Checkout. This means that regular discount codes and automatic discounts won’t be applied on a checkout that contains an OCU pre-purchase with a discount. There is also a Shopify limitation which only allows applying one discount code per checkout.

  • The OCU discount can't be passed to Checkout if the customer adds the offer product to the cart, then logs in to PayPal (or another digital wallet like ShopPay / Amazon Pay, etc) from the Cart Page. It’s technically not possible because we can’t add our script to the PayPal login popup iframe.
    To ensure the OCU discount is passed to checkout reliably, it's recommended to remove "accelerated checkout" buttons from your Cart Page so only the actual "Checkout" button is included there. See details below:
    1. Go to Online Store > Themes > Edit code
    2. In the "Sections" folder find the cart-template.liquid file OR in the "Templates" folder find the cart.liquid file.
    3. Within the file, comment or remove the condition below:
    {% if additional_checkout_buttons %}
    *To comment it, add comment tags around the condition like the example below:
    {% comment %} {% if additional_checkout_buttons %}{% endcomment %}

  • There will be conflicts with other apps which use "Draft Orders" to auto-apply their discount on Shopify Checkout. The script from the app that runs first will define which app will work with the order.

  • The discount can't be applied to a Shopify Gift Card product.

  • Shopify's Abandoned Cart email isn't automatically sent for an order generated via a Draft Order. The abandoned cart restore link is still generated, but will need to be sent manually to the customer by clicking the "Contact customer" button in the Orders > Abandoned checkouts section of your Shopify admin.

  • If a pre-purchase upsell with a discount is added by the customer and their order completed, then the "Session details" will be lost and are not able to be shown in the Conversion summary of the order.

  • For legacy subscription apps (Bold, Recharge, etc) that use a 3rd party Checkout:
    When there's a subscription product in the cart (whether it's an OCU trigger product or not) a pre-purchase offer will not be shown in order to prevent an incompatibility issue with Draft Orders and the Bold/ReCharge Checkout. Switch to the new ReCharge/Bold app that uses Shopify Checkout if you want the pre-purchase popup to be shown for subscription products.

  • For native subscription apps that use Shopify Checkout (Bold, Recharge, etc):
    When there’s a subscription product in the cart, the pre-purchase offer with a “fixed amount” or “percentage” discount will be shown. However, if the customer accepts such an offer and goes to checkout, then the subscription product will be added as a regular one-time purchase product instead. This is due to Shopify Draft Order limitations.
    Therefore, for stores with subscription products from native apps, we recommend using the "none" or "compare at price" discount for pre-purchase offers. This way there will be no conflict between subscription products and pre-purchase offers.

  • For the Geolocation app by Shopify:
    The pre-purchase offer with a “fixed amount” or “percentage” discount will be shown in the buyer’s currency, but if it’s accepted the checkout will be shown in the default store currency. The Shopify draft order API has limitations and doesn’t work with the Geolocation app, so we aren’t able to create a draft order in the buyer’s currency.
    Therefore, for stores who use the Geolocation app by Shopify, we recommend using pre-purchase with the discount set to "none" or "compare at price" and you won’t experience this issue.

Previewing your Offer Popup

Built-in previews are available for Desktop, Tablet, and Mobile views:

Click the "< Back to editor" link to exit preview mode and return to the editor.

📝There is no preview URL for the pre-purchase offer popup. To view the actual pre-purchase popup on your store, add the Trigger Product from the Funnel to the Cart Page and click the "Checkout" button from the Cart Page or from your AJAX Cart on your Product Page.

Saving your Offer Popup

Once you've completed editing your offer and the popup to your liking, don't forget to click the "Save" button in the top-right corner of the editor to save your changes:

If this button is not clicked before exiting the editing session (or refreshing the page) then your work will not be saved and you will need to re-do it.

If you really like the offer popup you've just created and want to have it be the default for NEW offer popups you add to funnels, click the "Save as Default" button and the current popup will be the new default:

Please reach out to us in chat if you have any questions at all!

Did this answer your question?