Before you begin
This article walks through the One-Click Upsell Page Customizer. Use it to control the page customers see after checkout, including the layout, product content, buttons, images, timer, and follow-up offer pages.
Before customizing the page, make sure you have:
Requirement | Why it matters |
A One-Click Upsell strategy | The Page Customizer is opened from the strategy editor. |
The One-Click Upsell placement selected | The Page Customizer only appears when the strategy includes the One-Click Upsell placement. |
At least one product module configured | The preview uses your offer product to show a realistic page layout. |
Order Editing selected as your post-purchase app in Shopify | Shopify only shows One-Click Upsells when Order Editing is selected for the Post-Purchase Page. |
ℹ️ Note: If you have not set up the One-Click Upsell yet, start with Setting Up the One-Click Upsell.
Open the Page Customizer
- In Order Editing, go to Upsell Strategies.
- Open the One-Click Upsell strategy you want to edit.
- Confirm the strategy includes the One-Click Upsell placement.
- Find the Page Customizer card.
- Click Customize Page.
The Page Customizer opens in a full-screen editor. The left panel controls sections and settings. The right panel shows a live preview of the customer page.
⚠️ Important: Closing the Page Customizer does not discard your changes. Your edits stay on the strategy until you click Save Changes or Discard Changes on the strategy page.
Choose Which Page to Customize
One-Click Upsell can have more than one page in the customer flow. Use the page selector at the top of the Page Customizer to choose which page you are editing.
Page | When customers see it | When to customize it |
Primary Offer | The first offer shown after checkout. | Always review this page. It is the main One-Click Upsell page. |
If Accepted | The follow-up page shown after the customer accepts the first offer. | Use it when your strategy has an accept follow-up offer. |
If Declined | The follow-up page shown after the customer declines the first offer. | Use it when your strategy has a declined offer or downsell. |
The If Accepted and If Declined pages are locked until the strategy has matching follow-up offers. Add the follow-up offer first, then return to the Page Customizer.
Understand the Editor Layout
The Page Customizer is section-based. You can edit the page by choosing a section, changing its settings, then checking the preview.
Area | What it controls | Typical content |
Header | Content shown above the product offer. | Progress bar, heading, offer text, timer. |
Template | The main offer layout and product content. | Product image, title, reviews, price, description, variants, quantity, buy button, decline button. |
Footer | Content shown below the offer. | Guarantees, shipping messages, urgency copy, dividers, extra text. |
Control | What it does |
Add section | Adds a new content section to the Header, Template, or Footer. |
Drag handle | Reorders sections within the same area. |
Show or hide section | Temporarily hides a section without deleting its settings. |
Inspector | Lets you click a preview element to open its settings. |
Undo and redo | Moves backward or forward through recent Page Customizer changes. |
Desktop, mobile, and fullscreen preview | Shows how the page looks across different preview modes. |
Change the Page Layout
Use the layout buttons beside Template to choose how the product offer is arranged.
Layout | What it does | Recommended use |
Single column | Stacks the product image, copy, price, variants, and buttons vertically. | Use for simple offers or long product descriptions. |
Two columns | Places the image and product details side by side on desktop. | Use for a focused offer with one main product. |
Product grid | Shows multiple products in a grid-style layout. | Use when the strategy should offer several clear choices. |
ℹ️ Note: Product grid is available for the Primary Offer page. Follow-up pages use a single-product style layout.
Customize Product Sections
Product sections control the offer product itself. These sections help customers understand what they are buying before they accept the offer.
Section | What you can customize | Recommendation |
Product Image | Show or hide image gallery thumbnails. | Keep the image large and clear. Use gallery thumbnails when variants need visual context. |
Title | Text size, bold styling, subdued styling, and status color. | Keep the title easy to scan. Avoid making it compete with the offer heading. |
Reviews | Shows the product review rating and count when review data is available. | Use reviews when social proof helps the offer feel safer. |
Price | Compare-at price, savings, savings style, spacing, text size, alignment, bold styling, strikethrough, and price variables. | Show the current price clearly. Use savings when the discount is meaningful. |
Description | Maximum lines, rich text formatting, compact spacing, and list marker style. | Keep descriptions short. Use rich text when product bullets help the decision. |
Variants & Quantity | Variant selector, quantity selector, and selector layout. | Show only the choices customers need. Too many choices can slow the decision. |
Products Grid | Maximum products, whether to include the highlighted product, and whether grid cards use product sections only. | Use a tight product limit so the offer stays easy to compare. |
Customize Buttons and Price Behaviour
The buy and decline actions are grouped as Pay Now Buttons in the Template section. Click that row to edit the button settings.
Setting | Options | Recommended approach |
Buy now button text | Preset labels such as Take the deal, Buy now, Buy product, Include in my order, Claim offer, Yes, I want this, Upgrade my order, and Grab the deal. | Choose direct wording that matches the offer. Use action-led copy for simple offers. |
Decline text | No thanks, Decline offer, Decline this offer, Decline, Skip this offer, or Not interested. | Keep the decline action clear so customers know how to continue. |
Decline style | Button or link. Button style can also be subdued. | Use a link for a lighter decline action. Use a button when the layout needs balance. |
Decline type | Group decline or per product. | Use group decline for product grids. Use per product when each item needs its own decline action. |
Price breakdown | Show subtotal, taxes, and total above the pay button. | Enable this when customers need a clearer total before accepting the offer. |
ℹ️ Note: Button labels use preset options. They are not free-text fields.
Add Content Sections
Content sections help explain the offer, add urgency, or build trust around the purchase. Click Add section in Header, Template, or Footer to add one.
Section | What it controls | Best use |
Progress Bar | A preset progress-style image shown near the top of the offer. | Use it to make the post-purchase step feel clear and branded. |
Heading | Heading text, size, and alignment. | Use one clear benefit-led message above the product. |
Text | Body copy, size, alignment, bold styling, strikethrough, and status color. | Use it for short offer context. Avoid long sales copy. |
Image | Desktop image, optional mobile image, alignment, image size, top padding, and bottom padding. | Use for banners, badges, or product education that supports the offer. |
Timer | Offer duration, color, text before the timer, and text after the timer. | Use honest urgency. Keep the timer long enough for customers to decide. |
Badge | Badge category and color. | Use for simple labels like bestseller, lowest price, or ships free. |
Divider | Separator thickness. | Use it to separate dense sections, not as decoration. |
Blank Space | Vertical spacing between sections. | Use it when sections feel crowded. |
Shipping Info | Shipping message and optional icon. | Use when shipping is part of the offer value. |
Urgency Message | Urgency text and tone. | Use only when the urgency is true for the offer. |
Guarantee | Title, description, and icon. | Use to reduce risk for higher-priced offers. |
Customize Images for Desktop and Mobile
The Image section supports separate desktop and mobile images. This helps keep banners and visual content readable on small screens.
Image setting | What it controls | Recommendation |
Image | The main image used on desktop and mobile unless a mobile image is added. | Use JPG, PNG, or WEBP images with readable text. |
Mobile image | An optional image shown on small screens. | Add a mobile image when the desktop image has small text or a wide banner layout. |
Alignment | Left, center, or right alignment. | Use center for full-width images. Use left or right for smaller supporting graphics. |
Image size | The image width as a percentage when aligned left or right. | Keep supporting images smaller than the main product image. |
Top and bottom padding | Spacing above and below the image. | Use padding to separate images from text or buttons. |
Preview and Save Your Changes
Use the preview before saving. Check desktop and mobile, then test the page in a real order flow before making the strategy Active.
Preview check | What to confirm |
Desktop preview | The layout is balanced and the product content is easy to scan. |
Mobile preview | Text, images, selectors, and buttons are readable on a narrow screen. |
Primary Offer page | The first offer has a clear headline, product image, price, and decision path. |
If Accepted page | The follow-up offer makes sense after the first product is accepted. |
If Declined page | The downsell or alternate offer is simpler than the first offer. |
Save bar | Click Save Changes on the strategy page when you are ready to keep the layout. |
💡 Tip: If you are still designing the page, keep the strategy in Draft. Set it to Active only after you have tested the full accept and decline flow.
Best Practices
A good One-Click Upsell page should feel fast, clear, and low-friction. Customers have already paid, so the page should help them make one simple decision.
Goal | Recommended approach |
Keep the offer clear | Use one strong heading, one clear product image, and direct button text. |
Reduce decision friction | Limit extra sections. Keep the product description short. |
Make the discount visible | Show savings when the discount is meaningful. Avoid clutter when there is no discount. |
Use follow-up pages carefully | Only add accepted or declined offers when the next product naturally follows the first choice. |
Check mobile first | Most post-purchase decisions happen quickly. Make sure the mobile page is easy to read. |
Keep urgency honest | Use timers and urgency messages only when they match the offer experience. |
FAQ
Do Page Customizer changes save automatically?
Page Customizer changes are held on the strategy until you save them. After closing the Page Customizer, click Save Changes on the strategy page to keep your edits.
Why are the If Accepted or If Declined pages locked?
The If Accepted and If Declined pages are locked until the strategy has matching follow-up offers. Add an accept follow-up or declined offer first, then open the Page Customizer again.
Can I write custom button text?
Button text uses preset options. Choose the preset that best matches the offer, such as Buy now, Claim offer, or Upgrade my order.
Why does the product grid option disappear on follow-up pages?
Product grid is intended for the Primary Offer page. Follow-up pages use a focused layout so the accepted or declined offer stays simple.
Why does the preview show a price breakdown even when I did not enable it?
The preview can show a price breakdown when the offer total needs extra clarity, such as when a discount changes the pay-now amount. This helps match what customers may see on the live page.
