Product upsell widget | Legacy
Product Upsell is one of the most powerful widgets in ReConvert, allowing you to display a specific product to the customer, possibly with a special offer, on the thank you page.
The Product Upsell widget supports our "2-step checkout," which means that the customer will be redirected directly to the payment page in the checkout process, skipping the cart, customer information, and shipping method pages, but will have to enter credit card information again.
Open a template where you want to add the widget. Move to your Thank You Pages tab inside the app and click the Customize button next to the desired template. You can also open it from the app dashboard by scrolling down a bit.
Select the area where you want to display the widget. Choose Left Area for the left side or Right Area for the right side. After selecting the side, click the Add Section button. A list of all available widgets will appear. Select Product Upsell Widget and click Add.
The Product Upsell widget consists of five main elements, each with its own settings and options:
Title
Product Options
Discount
Timer
Buttons
After adding the Product Upsell widget in the page builder, the first step is to give this offer a name. This is an internal name that your customers will not see.
Here you can give your widget a specific name.
You can align the title position as needed:
Above the entire widget
Below the entire widget
You can select the color of the background by using the color picker or entering the RGBA code.
After naming the offer, you need to select which product to display. There are eight options available:
Most Expensive Product Purchased - dynamically displays the most expensive product purchased for each order
Wiser Recommendations - dynamically displays personalized product recommendations using Wiser's proprietary algorithm
Personalized Recommendations - dynamically displays personalized product recommendations using Personalized Recommendations' proprietary algorithm
Rebuy Intelligent Cross-Sell - dynamically displays personalized product recommendations using Rebuy's proprietary algorithm
Recomatic Recommendations - dynamically displays personalized product recommendations using Recomatic's proprietary algorithm
Shopify Product Recommendation - dynamically displays related products recommended by Shopify
Cheapest Product Purchased - dynamically displays the cheapest product purchased for each order
Specific Product - allows you to choose a specific product to display
> ⚠️ Warning: Wiser Recommendations, Personalized Recommendations, Rebuy Intelligent Cross-Sell, and Recomatic Recommendations will only work if you have these apps installed in your store.
> 📝 Note: For Wiser Recommendations, Personalized Recommendations, Rebuy Intelligent Cross-Sell, Recomatic Recommendations, and Shopify Recommendations, the available Loader Text option may take time to load. Use this text box to display a message while loading.
When selecting one of the eight available options, you can add exclusion tags to exclude certain products. If the product is tagged with an exclusion tag, you can choose to either hide the featured product or display an alternative product. If you choose to display an alternative product, you can select it manually.
Specific Product: This option allows you to choose a specific product from your store and display it on the thank you page. When selecting this option, a new button will show up, enabling you to select the desired product.
You can also choose what happens if the selected product was already purchased. You can choose to either hide the product, display it anyway, or display an alternative product. If you choose to display an alternative product, another box will open for you to select the alternative product.
> 📝 Note: If you select to display an alternative product but don't choose one, the widget will not be displayed if the specific product was in the original order.
Here you will select the size of the widget:
Large Size
Medium Size
Small Size
After selecting the product to display, configure the product title settings. You can either leave the text box empty (in which case the default product title will be displayed) or use the free text box to enter a custom title.
Below the product title text box, a drop-down will allow you to choose whether to display the product title above or below the product image.
> 📝 Note: Title position can be changed only in the Large Size widget.
Check the Display Product Description checkbox if you’d like the product description to be displayed. Uncheck it if you’d like it to be hidden (by default, the product description is hidden).
If you choose to display the product description, another free text box will appear. Keep it empty if you’d like to use the default product description (not recommended if you have long product descriptions). If you’d like to create a custom product description, write it in the free text box.
In the main product section, you can select one of two options:
Display Main Product Image
Display Custom Product Image
You can select one of three options for the secondary images:
Hide Secondary Images - only the main image will be displayed (when selecting a variant with a different image, the variant image will still be displayed).
Display Secondary Images Below the Main Image - three images will be shown at a time. If there are more than three images, the customer will be able to scroll between images.
Enable Slideshow - only the main image will be shown, but customers will be able to scroll left and right to see other product images.
> 📝 Note: Additional images are available only in the Large Size widget.
Display Quantity Picker - if checked, customers will be able to purchase multiple units of the featured product. When enabling the quantity option, a small window will open, enabling you to change the text for the quantity picker title.
> 📝 Note: The quantity picker is unavailable in the Small Size widget.
Enable Variant Selection - if checked, the customer will be able to choose variants from a drop-down menu for each variant type (color, size, etc.).
If unchecked, a drop-down menu will open with all the product variants, and you can select which product variant to display to the customer. The selected variant will be included in the product title so that the customer will know which variant they are purchasing.
Example:
Product title: Apple
Available Colors: Red / Green
Available Sizes: S / M / L
Let’s say you chose to disable variant selection and let the customers only purchase the "Seaside" variant because you have too many in stock. The title that will be displayed to the customer will be: "Seaside."
Display/Hide Vendor - here you can add the option to display or hide the product vendor.
> 📝 Note: The Display/Hide Vendor option is available only in the Large Size widget.
Star Reviews - here you can add the star review integration. Here’s a tutorial on How to display product reviews on your thank you page.
> ⚠️ Warning: To display review stars, you must have one of the following applications installed: Judge.me, Loox, Rivyo, Stamped.io, or Ali Reviews.
Here you can set the following settings:
Discount type
Discount value
The price at which the discount must be applied
Discount prefix
Apply or not free shipping to a new order
You can choose to attach a discount to the featured product to make it more attractive to customers. The discounts will automatically apply to the new order.
You can use a pre-made coupon you’ve created through your Shopify admin discounts page. Note that if you use a pre-made discount, the customer will be redirected to the customer information page and not to the payment page.
You can also use an automatic discount that ReConvert will generate for you. If you use an automatic discount, the customer will be redirected directly to the payment page in the checkout process (skipping the cart, customer information, and shipping method).
When selecting an automatic discount, you’ll choose one of four options:
Free Shipping
Percentage Discount - takes X% off the new order. When selecting this option, you’ll have to define the percentage amount to offer the customer (you can also apply free shipping if you'd like to add that to the featured product offer).
Fixed Amount Per Unit - takes $X off the new order for every unit ordered. When selecting this option, you’ll have to define the discount amount to offer the customer. If the customer purchases two units of the featured product, they will receive twice the discount (you can also apply free shipping if you'd like to add that to the featured product offer).
Fixed Amount Per Order - takes $X off the new order, no matter how many items the customer purchases. When selecting this option, you’ll have to define the discount amount to offer the customer. If the customer purchases two units of the featured product, the discount will be applied once for the entire order (you can also apply free shipping if you'd like to add that to the featured product offer).
> 📝 Note: The "Also apply free shipping" option will be available only if you select to create a new order in Settings --> General Settings --> Order Settings.
We've added the option to display any combination of three different price options, each of which allows you to control the price color and size. By default, only the lowest price won't have a strike-through:
Product Compare Price - displays the original compare-to price from your Shopify store.
Product Price - displays the original product price from your Shopify store.
Product Price Including Discount - displays the product price after applying the discount you set up in the previous section (only applies to automatic discounts).
> 💡 Tip: Example: You chose a discount of 20%, and the product costs $100 before the discount. On the thank you page, the customer will see a price of $80.
By default, when you add the Product Upsell widget, the timer is already enabled and set to 5 minutes. If you do not need a timer, you can turn it off at any time by unchecking "Add Timer."
You can write whatever you want here. For example: "The offer will expire" or "The time will expire."
There are three options:
On Every Impression - the timer will load every time the thank you page is loaded (can be multiple times per order).
Once Per Order - if the client accidentally reloads the thank you page, the timer will continue to count down where it left off. The same applies if the client leaves the thank you page before the timer finishes counting down but then returns—the timer will continue counting from where it left off. This will happen every time a customer places an order.
Once Per Customer - this is similar to "Once Per Order," with the only difference being that after the timer has expired, it will no longer appear for the client.
Choose how long your timer will last. There are four options: days, hours, minutes, and seconds.
> 📝 Note: Minutes & seconds will always be displayed. If days and hours are empty, they won't be displayed. If only days is empty, days won't be displayed.
You can choose from four different styles, each with its own settings and the ability to display text in a specific area. Here are the four styles:
Timer Positions and Text Positions
> 📝 Note: Text position cannot be changed in the fourth style due to the timer style. In the fourth style, only the position of the timer itself can be selected.
Here you can write, shorten, or translate into another language for days, hours, minutes, and seconds.
> 📝 Note: If you keep all text fields empty, we'll display a ":" sign between the days, hours, minutes, and seconds.
You have to decide what to do when your offer expires. You have several options:
Do Nothing - nothing will happen. The text you wrote will appear, and the timer will simply disappear, but the product will still be available with a discount.
Remove Discount - the discount will be removed, and the product will be displayed at the regular price.
Hide Widget - after the time expires, the widget will disappear.
Grey Out Widget - the widget will become slightly transparent and cannot be clicked on.
> 📝 Note: There is also a field for a message that your customers will see when the time expires. You can use the Preview Live/Expired Offer button to see the result.
You can easily control the buy button text, text color, and background color.
That's it! You're ready to go with a beautiful and powerful product upsell on your thank you page. Just don't forget to hit Save 😉
If this article did not solve your issue, our support team is available for you 24/7. Just hit the live chat button at the right corner of this page.
📢 Did you know we have a YouTube channel? Don’t forget to subscribe to the channel to keep in touch with us and our news and updates. |
🙏 If you find our app useful, help other merchants find it by leaving us an honest review on the Shopify app store! It means the world to us. |
The Product Upsell widget supports our "2-step checkout," which means that the customer will be redirected directly to the payment page in the checkout process, skipping the cart, customer information, and shipping method pages, but will have to enter credit card information again.
How to Add the Product Upsell Widget
Open a template where you want to add the widget. Move to your Thank You Pages tab inside the app and click the Customize button next to the desired template. You can also open it from the app dashboard by scrolling down a bit.
Select the area where you want to display the widget. Choose Left Area for the left side or Right Area for the right side. After selecting the side, click the Add Section button. A list of all available widgets will appear. Select Product Upsell Widget and click Add.
The Product Upsell widget consists of five main elements, each with its own settings and options:
Title
Product Options
Discount
Timer
Buttons
1. Title
Offer Name
After adding the Product Upsell widget in the page builder, the first step is to give this offer a name. This is an internal name that your customers will not see.
Widget Title
Here you can give your widget a specific name.
Display Offer Title
You can align the title position as needed:
Above the entire widget
Below the entire widget
Background of the Title
You can select the color of the background by using the color picker or entering the RGBA code.
2. Product Options
Select Product
After naming the offer, you need to select which product to display. There are eight options available:
Most Expensive Product Purchased - dynamically displays the most expensive product purchased for each order
Wiser Recommendations - dynamically displays personalized product recommendations using Wiser's proprietary algorithm
Personalized Recommendations - dynamically displays personalized product recommendations using Personalized Recommendations' proprietary algorithm
Rebuy Intelligent Cross-Sell - dynamically displays personalized product recommendations using Rebuy's proprietary algorithm
Recomatic Recommendations - dynamically displays personalized product recommendations using Recomatic's proprietary algorithm
Shopify Product Recommendation - dynamically displays related products recommended by Shopify
Cheapest Product Purchased - dynamically displays the cheapest product purchased for each order
Specific Product - allows you to choose a specific product to display
> ⚠️ Warning: Wiser Recommendations, Personalized Recommendations, Rebuy Intelligent Cross-Sell, and Recomatic Recommendations will only work if you have these apps installed in your store.
> 📝 Note: For Wiser Recommendations, Personalized Recommendations, Rebuy Intelligent Cross-Sell, Recomatic Recommendations, and Shopify Recommendations, the available Loader Text option may take time to load. Use this text box to display a message while loading.
When selecting one of the eight available options, you can add exclusion tags to exclude certain products. If the product is tagged with an exclusion tag, you can choose to either hide the featured product or display an alternative product. If you choose to display an alternative product, you can select it manually.
Specific Product: This option allows you to choose a specific product from your store and display it on the thank you page. When selecting this option, a new button will show up, enabling you to select the desired product.
You can also choose what happens if the selected product was already purchased. You can choose to either hide the product, display it anyway, or display an alternative product. If you choose to display an alternative product, another box will open for you to select the alternative product.
> 📝 Note: If you select to display an alternative product but don't choose one, the widget will not be displayed if the specific product was in the original order.
Layout
Here you will select the size of the widget:
Large Size
Medium Size
Small Size
Product Title
After selecting the product to display, configure the product title settings. You can either leave the text box empty (in which case the default product title will be displayed) or use the free text box to enter a custom title.
Below the product title text box, a drop-down will allow you to choose whether to display the product title above or below the product image.
> 📝 Note: Title position can be changed only in the Large Size widget.
Product Description
Check the Display Product Description checkbox if you’d like the product description to be displayed. Uncheck it if you’d like it to be hidden (by default, the product description is hidden).
If you choose to display the product description, another free text box will appear. Keep it empty if you’d like to use the default product description (not recommended if you have long product descriptions). If you’d like to create a custom product description, write it in the free text box.
Main and Secondary Images
In the main product section, you can select one of two options:
Display Main Product Image
Display Custom Product Image
You can select one of three options for the secondary images:
Hide Secondary Images - only the main image will be displayed (when selecting a variant with a different image, the variant image will still be displayed).
Display Secondary Images Below the Main Image - three images will be shown at a time. If there are more than three images, the customer will be able to scroll between images.
Enable Slideshow - only the main image will be shown, but customers will be able to scroll left and right to see other product images.
> 📝 Note: Additional images are available only in the Large Size widget.
Quantity and Variant Options
Display Quantity Picker - if checked, customers will be able to purchase multiple units of the featured product. When enabling the quantity option, a small window will open, enabling you to change the text for the quantity picker title.
> 📝 Note: The quantity picker is unavailable in the Small Size widget.
Enable Variant Selection - if checked, the customer will be able to choose variants from a drop-down menu for each variant type (color, size, etc.).
If unchecked, a drop-down menu will open with all the product variants, and you can select which product variant to display to the customer. The selected variant will be included in the product title so that the customer will know which variant they are purchasing.
Example:
Product title: Apple
Available Colors: Red / Green
Available Sizes: S / M / L
Let’s say you chose to disable variant selection and let the customers only purchase the "Seaside" variant because you have too many in stock. The title that will be displayed to the customer will be: "Seaside."
Display/Hide Vendor - here you can add the option to display or hide the product vendor.
> 📝 Note: The Display/Hide Vendor option is available only in the Large Size widget.
Star Reviews - here you can add the star review integration. Here’s a tutorial on How to display product reviews on your thank you page.
> ⚠️ Warning: To display review stars, you must have one of the following applications installed: Judge.me, Loox, Rivyo, Stamped.io, or Ali Reviews.
3. Discount
Discount Settings
Here you can set the following settings:
Discount type
Discount value
The price at which the discount must be applied
Discount prefix
Apply or not free shipping to a new order
You can choose to attach a discount to the featured product to make it more attractive to customers. The discounts will automatically apply to the new order.
You can use a pre-made coupon you’ve created through your Shopify admin discounts page. Note that if you use a pre-made discount, the customer will be redirected to the customer information page and not to the payment page.
You can also use an automatic discount that ReConvert will generate for you. If you use an automatic discount, the customer will be redirected directly to the payment page in the checkout process (skipping the cart, customer information, and shipping method).
When selecting an automatic discount, you’ll choose one of four options:
Free Shipping
Percentage Discount - takes X% off the new order. When selecting this option, you’ll have to define the percentage amount to offer the customer (you can also apply free shipping if you'd like to add that to the featured product offer).
Fixed Amount Per Unit - takes $X off the new order for every unit ordered. When selecting this option, you’ll have to define the discount amount to offer the customer. If the customer purchases two units of the featured product, they will receive twice the discount (you can also apply free shipping if you'd like to add that to the featured product offer).
Fixed Amount Per Order - takes $X off the new order, no matter how many items the customer purchases. When selecting this option, you’ll have to define the discount amount to offer the customer. If the customer purchases two units of the featured product, the discount will be applied once for the entire order (you can also apply free shipping if you'd like to add that to the featured product offer).
> 📝 Note: The "Also apply free shipping" option will be available only if you select to create a new order in Settings --> General Settings --> Order Settings.
Price Settings
We've added the option to display any combination of three different price options, each of which allows you to control the price color and size. By default, only the lowest price won't have a strike-through:
Product Compare Price - displays the original compare-to price from your Shopify store.
Product Price - displays the original product price from your Shopify store.
Product Price Including Discount - displays the product price after applying the discount you set up in the previous section (only applies to automatic discounts).
> 💡 Tip: Example: You chose a discount of 20%, and the product costs $100 before the discount. On the thank you page, the customer will see a price of $80.
4. Timer
Timer Settings
By default, when you add the Product Upsell widget, the timer is already enabled and set to 5 minutes. If you do not need a timer, you can turn it off at any time by unchecking "Add Timer."
Text Area
You can write whatever you want here. For example: "The offer will expire" or "The time will expire."
Display Timer
There are three options:
On Every Impression - the timer will load every time the thank you page is loaded (can be multiple times per order).
Once Per Order - if the client accidentally reloads the thank you page, the timer will continue to count down where it left off. The same applies if the client leaves the thank you page before the timer finishes counting down but then returns—the timer will continue counting from where it left off. This will happen every time a customer places an order.
Once Per Customer - this is similar to "Once Per Order," with the only difference being that after the timer has expired, it will no longer appear for the client.
Duration
Choose how long your timer will last. There are four options: days, hours, minutes, and seconds.
> 📝 Note: Minutes & seconds will always be displayed. If days and hours are empty, they won't be displayed. If only days is empty, days won't be displayed.
Timer Design & Position
You can choose from four different styles, each with its own settings and the ability to display text in a specific area. Here are the four styles:
Timer Positions and Text Positions
> 📝 Note: Text position cannot be changed in the fourth style due to the timer style. In the fourth style, only the position of the timer itself can be selected.
Text
Here you can write, shorten, or translate into another language for days, hours, minutes, and seconds.
> 📝 Note: If you keep all text fields empty, we'll display a ":" sign between the days, hours, minutes, and seconds.
Expiry Settings
You have to decide what to do when your offer expires. You have several options:
Do Nothing - nothing will happen. The text you wrote will appear, and the timer will simply disappear, but the product will still be available with a discount.
Remove Discount - the discount will be removed, and the product will be displayed at the regular price.
Hide Widget - after the time expires, the widget will disappear.
Grey Out Widget - the widget will become slightly transparent and cannot be clicked on.
> 📝 Note: There is also a field for a message that your customers will see when the time expires. You can use the Preview Live/Expired Offer button to see the result.
5. Buttons
Button Settings
You can easily control the buy button text, text color, and background color.
That's it! You're ready to go with a beautiful and powerful product upsell on your thank you page. Just don't forget to hit Save 😉
Well, That’s a Wrap!
If this article did not solve your issue, our support team is available for you 24/7. Just hit the live chat button at the right corner of this page.
📢 Did you know we have a YouTube channel? Don’t forget to subscribe to the channel to keep in touch with us and our news and updates. |
🙏 If you find our app useful, help other merchants find it by leaving us an honest review on the Shopify app store! It means the world to us. |
Updated on: 15/08/2024
Thank you!