The Offer Page Editor is where you configure the settings for the Product you want used as the upsell/downsell offer, the Offer itself such as adding a discount, the Content as well as the overall Appearance of the offer page that is presented to your customers. 

On this page

To edit an offer page, simply click on the product in the funnel or hover over the "more options" menu and select "Edit Offer Page":

You'll then be taken to the Offer Page Editor where you can edit all of the available Product, Offer, Content and Appearance settings for the particular offer. 

Product

In the Product section, you can edit the Title of the product, the Hero Shot section for the product and select the Variants of the product you want included with the offer. 

Product Title:

When editing the Product Title field, you will see the updates applied in real-time within the offer page preview window on the right-hand-side:

Hero Section:

The Hero Section is where you choose the product image or video you want used for that section of the offer page. There are 3 options available:

  1. Default - Pulls in the default "featured image" for the product from your Shopify admin Products section. This option will change the image based on the variant selected (live offer page only). 
  2. Image - Upload a custom image from your computer by clicking the "Choose Image" button. Static image I.e. won't change based on a variant selected
  3. Video - Use a video instead by pasting in the Video's URL or Embed Code into the provided field. There is also an option to toggle "Auto-play" for the video (unavailable on mobile).
    Supported Services:
    YouTube, Vimeo, DailyMotion or Wistia

Variants:

The Variants section allows you to choose which variants for your product you want used. Just click the "Edit Variants" button, make your selections and click Save:

Offer

In the Offer section, you configure the settings for the offer you'd like to make such as Quantity, Discount and Shipping

Predefined Quantity:

By default, a Quantity selector is included on the offer page. Use the "Predefined Quantity" setting to pre-set the quantity you'd like offered instead. If enabled, the customer won't be able to change the quantity on the offer page.
*Useful for making bundle/multi-pack offers. 

Hide quantity field if pre-set quantity is selected:

Enable this setting if you're using a Predefined Quantity for the page and also want to hide the quantity selector completely:

Discount:

Set the discount for the offer page. You can either choose a "Percentage" or a "Fixed amount" discount type. If you choose "Percentage", then enter in the % off you'd like to offer the product at. If you choose "Fixed amount" then enter the $ amount off you'd like to offer the product at:

Shipping:

Choose whether to "Charge for Shipping" or give "Free Shipping" for the offer.
If you choose "Charge for Shipping" then in order to calculate the shipping cost for the upsell product(s), OCU uses the following flow/logic:

Once a customer gets to the offer page, it creates a new cart which contains the initial purchase + offer purchase and asks Shopify about the shipping cost for this new cart based on the shipping method selected for the initial order. Then the shipping cost for the offer product equals the difference between the shipping costs for the combined cart and initial cart. 

For example: if the initial order's shipping cost is $10 and the combined cart's shipping cost is $15, then the shipping cost for the offer product itself is $5. This is the price we're using for the offer page to show the total price of the offer product and then add into the order.

Hide offer if upsell product is purchased at Checkout:

Enable this setting if you don't want this offer product shown to your customer if they've already purchased it in the initial checkout order. In that case, this offer will be skipped from being presented and the next available one in the funnel will be shown instead. 

Content

In the Content section, you configure the main content for the Offer Page that you'd like presented to the customer. This includes things like the Page Headline, Offer Headline, Offer Description and Product Details to name a few.

*Useful Tip: If you don't want the Page Headline, Offer Headline, Offer Subheadline or Order Now text sections used, enter {{}} into those fields. The brackets may show in the offer page editor window, so click the "Preview on Store" button instead to see the changes applied.

  • Page Headline - Text shown at the very top of the page.
  • Background Color - select the color for the Headline Background at the top of the offer page. Use the color picker or enter in your color Hex Code.
  • Offer Headline - A special message to get your customer's attention!
  • Offer Subheadline - The subheadline text for the offer. Includes discount information if a discount is applied to the offer page. 
  • Offer Description - The text and content shown to the right of the Hero Section. Use the WYSIWYG editor to add in a description and other content about the offer product and special offer being made.
  • Order Now Text - Create more urgency with the "Order Now" text. Includes discount information if a discount is applied to the offer page. 
  • Highlight Banner Text - text used for the Banner at the bottom of the offer page. This section also has the same WYSIWYG editor available as the "Product Description" field to add additional customization if desired. 
  • Background Color - select the color for the Banner Background at the bottom of the offer page. Use the color picker or enter in your color Hex Code.
  • Product Details - This field is left blank by default. Add additional product details to the bottom of the offer page if desired. We provide a "What You See Is What You Get" (WYSIWYG) editor with 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 code to the offer page.

  • Pull Product Description from Shopify - This setting allows you to pull in the product's description from your Shopify admin and then edit it from there if desired. Simply click the "Pull" button and then select "Yes" on the confirmation popup:

Appearance

In the Appearance section, you configure everything else about the offer page! This includes the Add to Order button, offer Decline Links, Timer appearance and the offer page Labels text. 

"Add to order" button

Configure the button text, text color and button color for the "CTA" button. 

Decline Link

Configure the "offer decline" link text. When this link is clicked, the offer will be declined and the next available offer will be shown next. If a downsell offer is declined, the customer will be taken to the Thank You page.

*Note:
It's required to have the Decline Links added to the page so that your customers have the option to decline the offer(s) if desired. 

Timer 

  • Timer Text - text shown for the 2 countdown timers on the page. The timer counts down from 10 minutes for the entire post-purchase offer page sequence. 
  • Text color - set the timer text color for the timers on the offer page. Use the color picker or enter in your color Hex Code.
  • Timer color - select the color for the countdown timers on the offer page. Use the color picker or enter in your color Hex Code.
  • Background color - select the Background Color for the countdown timers on the offer page. Use the color picker or enter in your color Hex Code.
  • Hide Top Countdown Timer on Mobile - By default, a countdown timer is shown above the Hero Section on mobile devices. Enable this setting to hide this top countdown timer instead:

Labels

  • "Was" Price Label - the product's original Price. 
  • "Now" Price Label - the product's price after the Discount is applied. 
  • "Now" Price Color - the color shown for the price after discount. Use the color picker or enter in your color Hex Code.
  • Save Label - how much is saved due to the Discount applied. 
  • Please Select Variant Label - the default text that shows for the variant selectors.

Taxes and Shipping Labels

Based on the Taxes and Shipping configuration for the offer page, 1 of 4 labels will be shown on Mobile

  • + Tax (Includes Shipping!) - Shown if taxes are charged for the offer, but free shipping is given.
  • + Tax & Shipping - Shown if both taxes and shipping are charged for the offer.
  • Includes Shipping - Shown if no taxes are charged and free shipping is given. 
  • + Shipping - Shown if no taxes are charged, but shipping is charged. 

These labels are hard-coded in English. If your store's checkout languages is other than English, you will be able to edit these fields to localize the language for these labels.

Offer Page Preview

  • Preview the offer page editor window in either Desktop or Mobile view by using the available options:
  • Click the "Save as Default" button to save the particular offer page's settings as the "default" layout so it will be used for subsequent new offer pages you create as the baseline. 
  • Click the "Save" button once you have everything configured to your liking so that it stores your changes.
  • Click the "Preview on Store" button to see the offer page "preview" opened 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/offer?id=123

> View Next Article

Did this answer your question?