On this page

Overview

The Pre-purchase Offer Popup Editor is where you configure the settings for the product(s) you want 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 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) for Shopify Themes. The customer will be redirected to the Checkout page after interacting with the pre-purchase popup on the Cart Page.

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 remain on the product page after interacting with the pre-purchase popup.

This location is not currently compatible with "ZP Layout" product pages created in the Zipify Pages app or product pages created using any other 3rd party app. Only compatible with "ATC" buttons located on Theme product pages.


*Pro Tip: when using this option, it's recommended to also enable the "Skip Cart" setting located in Settings > General. That way your customers will be redirected to Checkout after interacting with the pre-purchase popup on the Product page, instead of remaining on the Product page which is a less intuitive customer flow.

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 used for the default text in the popup

  • 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:

  • Using the "Code View" option you can add custom HTML/CSS code to the offer popup.

  • 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 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:

Timer

In the Timer 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 either "Shopify Image" to have your featured product image used or "Image Only" to upload a custom image from your computer.
    Note: If "Shopify Image" is used, the image will update based on the variant selected.

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

  • Variants: All variants are selected by default. If desired, choose specific product variant(s) you want 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.

  • 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 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.

  • 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.

  • 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 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 Draft Orders limitations.
    Therefore, for stores with subscription products from native apps, we recommend using the "compare at price" discount for pre-purchase offers. This way there will be no conflict between subscription products and our pre-purchase offers.

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?