We will cover key widgets and important considerations for their use:
Product Recommendation
The product recommendation widget can display up to 10 upsell products at a time.
Unlike the one-click upsell feature, product recommendations on the thank you page are fully compatible with all payment gateways and multi-currency stores. However, there are some additional factors to consider:
Customers will need to re-enter their payment details to complete the purchase of the offer. However, AfterSell will automatically apply their saved shipping information for a seamless checkout experience.
When a customer selects an offer, a new order will be created in Shopify, rather than modifying the existing order.
There is currently no way to merge these upsells to the original order.
Additional Settings
Offer description
This enables you to include a description of your offer or set a countdown timer for urgency
Quantity selection
Allows you to specify the number of offers to display and set quantity limits for the designated upsells.
Automatic discount
Enables you to apply a specific discount to an upsell, choosing between a percentage or a fixed dollar amount.
Additionally, you can enable free shipping for Thank You page upsells. By default, Shopify's shipping settings apply, but if you toggle the free shipping option here, customers will not be charged for shipping.
You can also configure the "Compare at" price setting in this section. Learn more about this feature here.
Timer settings
Enables you to define the duration of the offer timer and when it should begin. This timer creates a time-limited discount opportunity, and the offer will automatically be hidden once the timer expires.
Style settings
You can style the upsell by customizing elements such as:
Layout
Accept button text
Adding borders or applying an outline to the button.
General settings
Hide offer if purchased
If enabled, the offer will be hidden if the products in the Thank You page upsell are already included in the original order.
Hide out of stock variants
Ensures that only in-stock variants are displayed.
Price settings
The Compare, Discount, and Sale prices offer two color options:
You can apply colors from your Checkout branding, with the available options being:
Accent
Decorative
Info
Subdued
Note: Some of these settings can be modified through your Shopify checkout editor or by using other apps that offer this functionality.
Or, you can apply a custom preset colors:
Success- Green
Warning- Yellow
Critical- Red
This section also includes two settings that complement the Automatic Discount feature.:
1. Show compare at price
Enable this option to display the "Compare at" price with a strikethrough.
2. Show discount
Enable this option to display the discount on the upsell.
Display settings
This allows you to set when the upsells will show:
On every impression
Show this upsell to the customer even if they revisit the Thank You Page a second time.
Only on Thank you page
Show this only on the Thank You Page when an order is placed. It appears once, right after the order is completed.
Only on Order status page
Show this only on the Order Status Page. It appears starting from the second visit and every time the page is refreshed after that.
Only Once on order status page
Show this only once when someone returns to check their order after the first time.
FAQs
Adding a FAQ section to your thank you page provides immediate answers to common questions, improving the customer experience. Including a FAQ section enhances transparency, builds trust with future customers, and can help reduce post-purchase concerns. By addressing common questions, you provide clarity and reassurance, making potential buyers more confident in their decisions. A well-structured FAQ section can positively influence new visitors, leading to increased customer satisfaction and potentially higher sales.
Text
You can a text widget to your thank you page to share key information with customers after their purchase. This can help improve communication, build trust, and offer helpful guidance or reassurance. A well-placed text widget can foster future engagement, boost customer satisfaction, and even drive additional sales.
Custom Code
You can create your own custom widget in React using components and hooks from Shopify's Checkout UI Extension library.
Important:
This is recommended for advanced users only. Please ensure that your code must:
export defaultthe component you want to rendernot use DOM elements (div, p, etc.), use UI extension components instead
not import other code
If your custom code is not working, we recommend hiring a Shopify Expert to help implement this for you.
Important Information
Steps to add widgets to Shopify's Thank You page:
a. After creating the widgets, click on "Open Shopify Editor" to proceed.
b. Add the AfterSell TY widgets in your Shopify Editor in two locations:
Thank you page
Order status page
2. The branding settings automatically align with your Shopify checkout branding settings and cannot be customized within the AfterSell widgets.
3. These upsells will generate a second draft order, and currently, there is no option to merge them with the original order.
4. Shopify's checkout preview may not always display the widgets. We recommend placing a test order to confirm that your offers appear correctly on a live order.
5. Analytics for Thank You page upsell (extensions) are currently unavailable and are expected to be released in March 2025.