The ability to Preview an offer page without actually making a purchase first is really helpful for seeing how the page will be presented to a customer. It can help to save a lot of time and unnecessary transactions during setup.
However, there are some subtle differences between what will be shown on the "Preview" of the offer page vs the actual "Live" offer page that is presented to a customer post-purchase.
This is why we always recommend the store owner to run through a live checkout test or two to see how the flow works and how the offer pages are presented live.
What are the differences between the "Preview" and "Live" offer pages?
So happy you asked 😃 !
We strive to make the Preview and Live offer pages match as closely as possible. Unfortunately, certain elements only function correctly on the Live offer page. This is due to the amount of extra server calls and even draft orders which would need to be made within Shopify to achieve complete parity between the two.
There are a few differences which are listed below:
1) The "default" product image will update based on the variant that is selected on the Live offer page only. This does not work on Preview mode.
When a variant is selected live, the pricing figures will also update accordingly. This does not work on offer page preview mode.
2) Taxes & Shipping (if applicable) and Total prices will only be shown correctly on the Live offer page. N/A will show on the Preview page for these figures
3) Changing the Quantity on the offer page Preview will not have the prices updated to reflect the quantity chosen. The prices will only update on the Live offer page if the quantity is changed.
4) Your store's currency configured at Settings > General > Store currency of your Shopify admin will show correctly on the Live offer page. Preview will show USD currency by default.
5) The "Add to my order" button and "No thanks" link are not clickable on the offer page Preview, they only work correctly on the Live offer page.
How do I see the Preview?
There are a few ways to see the offer page preview:
1. The Offer Page Editor provides a "preview window" that updates in real-time based on the edits applied:
2. 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
3. From the "Upsell Funnel" view, hover over the "more options" icon and then select "Preview on store":