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, Appearance and Purchase Buttons 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, video or image carousel you want used for that section of the offer page. There are 4 options available:

  1. Image Carousel - Add an Image Carousel to your offer page to show off multiple product images at once. Your product images from Shopify admin will automatically be pulled-in and available for use. You can use up to 10 images or 9 images and 1 video. Images can be dragged and dropped into the desired carousel positions as needed.
  2. Shopify Image - 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). 
  3. Image Only - Upload a custom image from your computer by clicking the "Choose Image" button. This will be a static image I.e. won't change based on a variant selected. OCU works with jpg, png, jpeg and gif file formats. Image sizes should be less than 5 Mb.
  4. Video Only - 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 (muted on Desktop, sound can be enabled by clicking on the video. Unavailable on Mobile).
    Supported Services:
    YouTube, Vimeo, DailyMotion or Wistia

Border: 

Choose whether or not you want a border around the Hero Section. Simply click the switcher to enable or disable the Border. 

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.

*Note: The offer page first looks for the same shipping rate name that was chosen at checkout. If this rate satisfies shipping for the combined cart then it will be used. If this rate doesn't satisfy the combined cart, then the next available rate will be taken, even if it differs from the shipping method that was chosen at checkout.

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. A "What You See Is What You Get" (WYSIWYG) editor is provided 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/CSS code to the offer page. The correct way to add code is to switch to "Code View" -> add code -> switch back to text view -> Save changes. Otherwise (not switching back to text view first) it will not save the code changes. 

Codes added there won't show correctly in the "preview window", but will be included on the page when you click the "Preview on Store" button and when presented live to your customers: 

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

Note: If any content is added to the "Product Details" field, a second set of add to order / decline link and countdown timer will be added to the page. 

Appearance

In the Appearance section, you configure the Page Font Family, Timer appearance and the offer page Labels text. 

Page Font Family

This setting allows setting one of 21 available fonts for all labels on the Offer Page that can't be modified in WYSIWYG editors.

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 the Live and Offer Page Preview Pages (doesn't show in the editor preview window):

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

Translations for these labels will auto-apply and show in your store's checkout language on the "live" offer page for the following:
Japanese, Danish, Dutch, French, German, Italian, Portuguese (Brazil), Portuguese (Portugal) and Spanish languages

Purchase Buttons

"Add to order" button

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

Show Button Subtitle

Enable this setting to add subtitle text to your "Add To Order" button. Default text is provided, but you can add your own custom text in the "Button Subtitle" field. 

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

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. You can also edit your default offer page template at Settings > Page Defaults > Offer Page.
  • Click the "Reset to Default" button to restore the offer page to the Default template state. If you haven't saved an offer page as the default template yet using the "Save as Default" button, it will use the original template when the app was first installed. 
  • 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?