On this page

Overview

The Pre-purchase Offer Popup Editor is where you configure the settings for the product you want used as the pre-purchase upsell offer, any discount (compare at price) you'd like shown for your offer as well as the overall content and appearance of the pre-purchase offer popup that is presented to your customers on the Cart Page.

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

Working with the Editor

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

It is comprised of the following 5 Sections:

  • Product - configure the Product Title, Hero section and Variants
  • Offer - apply a Discount and set the "Hide Offer" condition (optional)
  • Content - configure the Popup Title, Popup Headline and Offer Description
  • Appearance - set the Popup Font Family, Timer Text and Timer Style
  • Buttons - configure the Text and Style of the "Add to Order" and "Decline" buttons

Product

In the Product section, you configure the following:

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

Offer

In the Offer section, you configure the following:

  • Discount: Set a discount (if any) that you want to offer for the product in your pre-purchase popup. There are currently* two options available:
    1. None - No discount will be set or displayed for the offer product.
    2. 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.
    *More options coming soon!
  • 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.

Content

In the Content section, you configure the following:

  • Popup Title - Set the Title for the offer popup.
  • Popup Headline - Set the Headline/Subtitle for the offer popup.
    Note: The variables {{ product_title }} and {{ discount }} can be used to dynamically output the product's title and discount amount you've set.
  • Offer Description - Add your compelling offer description using the tools available in the provided WYSIWYG editor.
    Note: Using the "Code View" option you can add custom HTML/CSS code to the offer popup.

Appearance

In the Appearance section, you configure the following:

  • Page Font Family - Set the font type you'd like used for the general text included in the offer popup.
  • The Timer settings, text and colors.
    - 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.
    - Timer Text: Set the text you want used for the timer.
    - Text Color: Set the color for the timer text.
    - Timer Color: Set the color for the timer numbers.
    - Background Color: Set the background color of the timer section.

Purchase Buttons

In the Purchase Buttons section, you configure the following:

  • Add to Order button styles
    - Add To Order Button text: Set the text for the "Add To Order" button.
    - Text Color: Set the button text color.
    - Button Color: Set the button color.
    - Hover State Color: Set the "hover state" button color.
  • Decline button styles
    - Decline Button text: Set the text for the "Decline" button.
    - Text Color: Set the button text color.
    - Button Color: Set the button color.
    - Hover State Color: Set the "hover state" button color.

Previewing your Offer Popup

Built-in previews are available for both Desktop and Mobile:

πŸ“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.

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 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?