Articles on: ReConvert for Shopify

Product upsell widget | Shopify

How to Use the Product Upsell Widget in Reconvert



The product upsell widget allows you to add one or more recommended products to your store using the ReConvert editor.

To learn how to use this widget, watch the following video:



Introduction



The product upsell widget in ReConvert allows you to add upsell products to any page in your store. This guide will walk you through the setup and customization of the product upsell widget using the ReConvert Flow Builder and Editor.

Getting Started



Accessing the Product Upsell Widget



Open the ReConvert Editor

In the navigation menu, locate the product upsell widget

Expand or collapse the widget to view its contents

Components of the Product Upsell Widget



By default, the product upsell widget contains three widgets:
Divider widget - a simple line that allows for more clarity
Text widget - a simple text box with styling that you can use to add explanation, title to the widget
Product widget - the main part of the product upsell widget will be explored in this article

Configuring the Product Widget



Selecting Products to Display



Select the product widget

In the Actions menu, choose the product display options:

Shopify Recommendations: This is the default. It is a dynamic product recommendation that uses Shopify's recommendation engine to recommend products that the customer is already interested in. You have the option within this setting of the following:-

Recommendation Intent: Choose between Related or Complementary Recommendations
Exclusion Tags: Exclude products with specific tags
Hide Cart Products: Avoid showing products already in the cart



The other widget blocks of image, product details and description will be covered later.

Most Expensive Product in Cart: Displays the priciest item in the cart - (we have found that this can work the best for customers at certain points of the sales flow, but we would not recommend using this at pre-purchase in the checkout, but it could work well for post-purchase upsells)

Cheapest Product in Cart: Displays the least expensive item in the cart

Third-Party Integrations: Use apps like Wiser, Personalized Recommendations, Rebuy, and Recomatic

Specific Products: Manually select a product from your store

Customizing Product Display Blocks



Image Settings



Select the image block

Choose to contain or cover the image

Decide whether to display the main product image or a specific variant image by selecting or deselecting the checkbox at the bottom of this block

Product Details



Set the product title (default is the product name)

Choose a subtitle (variant name, vendor, type, custom text, or none)

Save changes frequently to avoid losing progress

Product Description



Decide whether to display the product description

Choose between showing the default or an alternative description

Make the description collapsible if necessary (often descriptions can be lengthy, so it may make sense to collapse the description)

Price and Discounts



Select the product prices to display (at least one)
Compare-to-Price - this is the most expensive price of the product listed in the Shopify inventory
Original Price - this is the price once any non-discount codes have been selected, (i.e. the discounted price that you've manually reduced the compare-to-price to)
Product Price including Discount - this is the Original Price minus any coupon codes or other discount you've used within ReConvert

Top Tip:- We recommend either: a) showing all 3 prices; or omitting the Compare-to-Price and just leaving the Original Price and Product Price including Discount
If you choose to display all of these prices and one does not exist, Shopify will simply not show anything in its place

Select the size of each of the selected prices

Set up discounts:

You have three options when it comes to applying the discount. You can:-

Apply a percentage discount
Apply a fixed monetary value discount per item
Apply a fixed monetary value discount per order

You also have the option to limit the application of discounts to only those orders above a certain value

Save changes after configuring

Shipping Options



These options are now available on the Post Purchase pages, Thank You page, and Order Status page.

The new shipping options include:

Free Shipping
Fixed Price Shipping
Managed by Shopify (not currently available on Post Purchase page)

Please do not that the "Managed by Shopify" shipping option will be available on Post Purchase pages in a future update and it may be that it now exists when you are reading this!

Buttons



Choose button type (primary, secondary, or plain)

On Checkout page we would recommend using the Secondary button type to keep 'Buy' as the only primary button. On other pages, we recommend using the Primary button type

Customize the button text if needed

Save changes before proceeding

While button colors cannot be changed here, they can be changed by following the steps contained within this helpdesk article

Variant Picker



Decide whether to display the variant picker

Customize the variant picker text

Save changes

Quantity Selector



Choose to display or hide the quantity selector

If displaying the quantity selector, you can change quantity selector label text

Set default, minimum, and maximum quantities

If you are choosing to use a minimum quantity that is greater than 1, please note that the default quantity will need to match or exceed the minimum quantity

Save changes

Success and Error Banner



Success Banner



Customize the success message and banner type

Choose whether the banner is dismissible

Choose to display or hide the undo button to allow customers to remove the upsold item from their order

Error Banner



Customize the error message and banner type

Dynamic Error Banner Text, if selected, will display the actual error in this this space for the customer (in English). Alternatively, you can type in your own catch-all error text here or in a language other than English if your store's language is not in English

Choose whether the banner is dismissible

It is recommended to show the customer success and error banners to keep the customer informed of the status, even if it is just a one line standard text

Advanced Customizations



You are able to drag and drop product upsell widgets as well as hide / display / delete them





Conclusion



The product upsell widget in ReConvert is a powerful tool to enhance your store's functionality and increase sales. By following the steps outlined in this guide, you can customize and optimize the widget to suit your needs. For further assistance, feel free to reach out to our support team. Happy upselling!

Well, that’s a wrap!



If this article did not solve your issue, our support team is available for you 24/7, just click the live chat button at the bottom-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.
📧 Please let us know if you spot any typos, mistakes or omissions via care@stilyoapps.com|

Updated on: 09/09/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!