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.
*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:
From the Dashboard screen (home), click into the "Funnels" section.
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.
In the Funnel Builder, either click on the pre-purchase offer card (1) or on the "edit offer" button (2)
You will then be launched into the pre-purchase offer popup editor to start editing your offer!
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, Backround, Selectors and Elements colors you want to be used for the popup
Incentive - 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. Text can be edited using the handy inline text editor:
📝Some text fields have limited editing options.
The following text variables can be used to dynamically output the product's title, product's description, discount amount, regular product price, and discounted product price in a respective text field:
- {{ product_title }}
- {{ product_description }}
- {{ discount }}
- {{ product_price_was }}
- {{ product_price_now }}
To make any text field located on the pre-purchase popup blank, remove all text, add and save the following code instead: <div style="display:none; padding:0px;"> blank </div>
General
In the General section you can configure the following options and styles:
The Font Family and Font Color you want to be used for text on your offer popup. It's an easy option to change the font and color of almost all text elements in one click (excluding the countdown timer and savings label):
📝The font type for a particular line on the popup is able to be changed from the default font family via the inline Text Editor if desired.
The Background Color of the entire popup.
The Selectors Color applies to borders and icons/buttons of variant and quantity selectors (as well as dropdowns in the subscription section, if any).
The Elements Color applies to the "X" close button, dividers, elements in the image carousel (image border and arrows) for the "Add to Order" (single) offer and arrows between images in the "Upgrade" offer, where applicable.
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.
Product Description: Click on the product description field to display the inline text editor. To import your product description from Shopify, click the "Import Product Description from Shopify" button:
📝To keep the product description text up-to-date automatically when the description is changed in Shopify, use the{{ product_description }}variable in the description field. When included, OCU will track any changes made to the product description in Shopify and dynamically update it for OCU offers.
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 to be 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 are 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.
📝 If this option is used, it will pull in and display your product's compare at price set in Shopify admin. Click here to learn more about discounts for your pre-purchase offersSavings Label: Enable this option make the savings information even more prevalent.
Hide Quantity Selector: Enable this option to hide the quantity selector, preventing customer interaction.
Predefined Quantity: Set a specific quantity for your offer. 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 how many items 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.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:
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.
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:
Best Practices
Consider a discount. Bundles count as a discount since they typically offer a better price.
Offer multiple products. We recommend offering lower-priced items with no discount.
Offer an additional product. No discount is required! Simply offer to add a different product to the cart.
Please reach out to us in chat if you have any questions at all!