A Product Cross-sell Popup Widget is a great way to display offers to customers on add to cart, which asks if they would like to add more complementing items!
A cross-sell is NOT an upsell (switching to a higher value alternative) but just asks them to add additional items. Use an upsell pop-up if you're looking to have the original item get replaced by the offer. For more insight on upselling vs cross-selling, check out this article.
Creating our Widget:
From the Rebuy admin, navigate to the Merchandising Widgets tab. From here you can see the most popular locations you can upgrade your online store as well as a list of all created widgets. Select "Product Page".
If you haven't already created some product page widgets, you'll see a menu with some prebuilt configurations, select "Create New" on the "Add to Cart Cross-sell (Pop-up)" card. Otherwise, select "New Widget" on the top right-hand side of your screen to see the list of pre-configured options.
This quick start to this widget will start with 8 items to show and trigger when the customer clicks add to cart. The trigger sometimes varies from theme to theme so play with the widget settings!
The Data Source is set to return AI recommendations. From here you'll just need to determine what you want the language of the widget to say, and what the offers(s) will be if you don't want to use the AI. To learn more about creating product page rules for your new widget, check out this article. If you need help placing it after creation, use some dynamic placement!
If you would like to add more styling to the widget that is not available in the widget editor check out this article.
Now that you've created your widget and set up your rules in the Data Source, go test it out! There is a "Live Mode" toggle in the widget settings, just make sure it's off, then you're ready to install and test, if it's working as expected, enable Live Mode and you're set!
The pop-up widget can be installed similarly to a standard cross-sell widget, either through App Blocks for 2.0 themes or manually for 1.0 themes. While both methods are supported, we generally recommend the manual installation approach. In our experience, App Blocks may sometimes face issues with widget placement or triggering reliability.
Why is my widget not showing up after it is installed and products should be recommended?
Some themes are a bit tricky to work with and the popup may not work as expected. We've found that manually installing the widget just before the closing </body> tag in the theme.liquid file may help!
Remove the initial app block where the widget is installed.
Find your theme, open the menu, click edit code to go to the theme files.
Find and open the theme.liquid file and scroll down until you see </body>.
Copy the code below and paste it into the file just above the closing </body> tag.
{% if product %} <div data-rebuy-id="XXXXX" data-rebuy-shopify-product-ids="{{ product.id }}"></div> {% endif %}Be sure to replace the "XXXXX" with the correct widget ID, and remove the initial Rebuy widget from the app block. Click save!
