How to display product recommendations/upsell/cross sell in cart?
This is step-by-step guide on how you can configure product recommendations or upsells/cross sells within your theme's native cart by using Monk's Cart Cross-Sell funnel. This funnel can be configured across a variety of rules and eligibility criteria and works seamlessly with types of themes and carts (cart drawer, cart popup or cart page). This funnel can be particularly used to highlight your bestselling products to nudge customers to add more items to their cart and hence increase your average order value (AOV).
Please note, a cross-sell offer can be set up on checkout, however, this is only exclusive for stores on Shopify Plus. Please refer to this article to configure it at checkout.
Funnel Creation
Eligibility and Display
Product and Display
Advanced Configuration
Content and Display
FAQ
Here is an example of what it will look like live on your cart -
Go to Create New Funnel on the top right of the funnel section in Monk > Create New Funnel > Cross-sell & product groups > Cross-sell > Embedded > Cart page > Set offer name
On step 1 of the funnel setup, select the eligibility rule as per your convenience. Please refer to this document for a detailed guide on eligibility rules
You can also schedule the funnel for a specific date range from Step 1 of the funnel set up, using this setting below -
On Step 2, select the product(s) that you want to display inside the cross-sell offer. You can also add a discount to the offer products which can be shown either as % off or flat off.
Additionally, if you don't want to manually select the cross-sell offer products, you can enable 'Auto recommendation' instead and select the number of products you wish to display within the widget. Monk uses Shopify's AI algorithm to suggest products based on your store’s best-sellers and previous customer purchases. We recommend using this feature when your store processes over 10,000 orders per month, as this feature works best with larger data sets, ensuring more accurate and effective recommendations.
The auto recommendation feature does not work for sanbox/testing/development stores
Under Step 2 , you have the following settings with respect to displaying the Cart Cross-Sell funnel -
Display Settings
- Display products in offer that are presently in the cart - With this setting enabled, if the customer has already added a cross-sell offer product to cart, it will still show in the offer widget. If this setting is disabled, those products will be hidden away.
Example : Let’s say you’re cross-selling a phone case (offer product) with a phone. If the setting is enabled, the phone case will continue to appear in the widget even when the customer already has this product in their cart. If the setting is disabled, the phone case will disappear from the widget.
- After addition, hide the product from the widget - When this setting is enabled, any product from the cart cross-sell widget will be hidden once the customer adds it to their cart. If it is disabled, the widget will show the added products as well.
Example : If you're cross-selling a laptop bag (offer product) alongside a laptop, enabling this setting means the bag will disappear from the widget once it's added to the cart. Disabling the setting means the bag will remain visible in the widget, even if it’s already in the cart.
- Display the variant picker - If this setting is enabled, the customer will have the option to choose a variant (such as size, color, etc.) for the cart cross-sell offer product. If disabled, the customer will receive the default variant of the product. The default variant is taken from Shopify’s product section, where the variant listed at the top of the list is considered the default.
Redirection
- Hyperlink image and product name to the offer product page - When this setting is enabled, customers can click on the image or product name in the cart cross-sell widget to view the product page of the offer product. If disabled, the image/product of the offer product will not be clickable, and customers won't be able to access the product page directly.
- After clicking on 'Add', the customer will be redirected to the product page - When this setting is enabled, customers will be redirected to the product page of the offer product upon clicking 'Add to Cart', where they can add the product from the product page. If disabled, the cross-sell product is added to the cart immediately when the customer clicks 'Add to Cart'. If you wish to enable this setting, we recommend re-wording the 'Add to Cart' button to 'View Product'
Price and Discounts
- Apply discounts on compare price of the product in the offer - If this setting is enabled, the discount will be applied on the compare at price of the offer product (this can be edited from 'pricing' setting under the offer product from 'Product' section in Shopify). If disabled, it will be applied to the original/sale price of the product. For example, if sale price of offer product is set to $ 3,500, and compare at price is $ 4,000 (with discount set at 20%) then the discount will be displayed on the compare at price with this setting enabled.
- Offer a discount on only a limited amount of products - This setting gives an option to offer a discount on limited quantity of cross-sell offer products. If this setting is disabled, the discount will be applied on all the quantities of the offer product.
Example : If there are 3 cross-sell products but you want the customers to get a discount on only 1 of them, you can set the ‘Total number of products to be discounted’ as 1 and ‘Items Per Product (Quantity)’ as 1. This would mean a maximum of 1 discounted products can be added to cart with a maximum 1 of each discounted product only.
The discounted value and the price of the offer product can also be displayed as rounded up. rounded down or exactly as set-up.
Example : If the offer product's price is $14.98, and the 'Display the product price' setting is set to rounded up, it will display on the widget as $15. Similarly, if after discount, the amount is showing as $11.25, and the 'Display the discount value' setting is set to rounded down, then the discounted price will display as $11.
Please note, discounts cannot be set up if auto recommendation setting for cross-sell products is enabled. This is unfortunately a Shopify limitation.
Auto Remove and cart refresh
- Automatically refresh the page once the product is added - If this setting is enabled, the app will automatically refresh the entire page to show the updated cart when an offer product is added or removed. However, if you do not want the entire page to refresh and still show the updated cart please check with your team/theme support whether your theme has a cart listener or not. Alternatively, you can contact us via live chat/email support and we will add it in for you. Once you have the cart listener, this setting can be disabled and the offer product will automatically appear in the cart without having to refresh the whole page. Please refer to this article for further details.
Step 3 of the funnel setup is where you can change and/or translate the text of the cart cross-sell widget as per your requirements.
The app also provides different layouts for the cross-sell widget. You can explore this under the design section. By default, the same layout is used across both desktop and mobile but if you wish to show a different layout for mobile - you can enable the setting 'Select a different layout for mobile' under 'Advanced display settings' as shown -
Clicking on 'Edit Display and Design' will open the global editing options of the widget including elements like font, colors, spacing of the widget for both mobile and desktop view. You can also edit the exact offer offer body configurations like the text styles, currency, price and discount. After making the changes, you can click on Save changes > Save and Activate to display the funnel on your store.
You can also add further customizations to the display and design by adding Custom CSS. Please refer to this: https://monkcommerce.crisp.help/en/article/how-to-add-custom-css-jm1c3g/
The app detects a visual element in your Shopify theme and accordingly positions it's widget. If you want to change the position of the progress bar, please refer to this article on how to do it. The app does not add, remove or alter any of your theme's code.
If multiple cart cross-sell offers are set up and a customer qualifies for several, the offer from the funnel positioned higher on the Funnels dashboard will be shown. Please refer to this article for details on how funnel priority is determined.
If you wish to display all the eligible funnels to your customers, you will need to enable the Combination setting on step 2 of the funnel set up. Please refer to this article for more information.
The page refreshes because the setting 'Automatically refresh the page once the product is added' is enabled. For instant cart refresh, you can add a cart listener to your theme. Please refer to this document for more details. If you have a developer who can add the same, kindly do so. If you want the Monk team to add the cart listener, please reach out to us via live chat/email support and we will get it added to your theme.
Monk app offers the auto recommendation feature using Shopify's AI algorithm to suggest products based on your store’s best-sellers and previous customer purchases. Since these recommendations are coming from Shopify itself, products cannot be excluded while setting up the offer.
Please go to your Shopify Product section --> Open the offer product and ensure the following:
- The product is in Stock
- The product is in Active Status
- The product is given availability for sales in 'Online Store'
- If in case it is still not visible, please click on 'Sync Now' situated on top right corner in the Funnel page and wait for 10-15 minutes. Post that, you can test the funnel in a fresh incognito window (to view the offer product), to avoid any cache issues. If it's still not visible, please contact us via live chat/email and we'll help debug.
Yes, the colors of the arrow or carousel can be changed, you can either contact us via live chat/email support and we will change it in for you or it can be changed using custom CSS. Please refer to this article for further information.
If you have any other questions or queries please reach out to us via chat support or write to us at support@monkcommerce.com
Please note, a cross-sell offer can be set up on checkout, however, this is only exclusive for stores on Shopify Plus. Please refer to this article to configure it at checkout.
How to set it up?
Funnel Creation
Eligibility and Display
Product and Display
Advanced Configuration
Content and Display
FAQ
Here is an example of what it will look like live on your cart -
Funnel Creation
Go to Create New Funnel on the top right of the funnel section in Monk > Create New Funnel > Cross-sell & product groups > Cross-sell > Embedded > Cart page > Set offer name
Eligibility and Display
On step 1 of the funnel setup, select the eligibility rule as per your convenience. Please refer to this document for a detailed guide on eligibility rules
You can also schedule the funnel for a specific date range from Step 1 of the funnel set up, using this setting below -
Product and Display
On Step 2, select the product(s) that you want to display inside the cross-sell offer. You can also add a discount to the offer products which can be shown either as % off or flat off.
Additionally, if you don't want to manually select the cross-sell offer products, you can enable 'Auto recommendation' instead and select the number of products you wish to display within the widget. Monk uses Shopify's AI algorithm to suggest products based on your store’s best-sellers and previous customer purchases. We recommend using this feature when your store processes over 10,000 orders per month, as this feature works best with larger data sets, ensuring more accurate and effective recommendations.
The auto recommendation feature does not work for sanbox/testing/development stores
Advanced Configuration
Under Step 2 , you have the following settings with respect to displaying the Cart Cross-Sell funnel -
Display Settings
- Display products in offer that are presently in the cart - With this setting enabled, if the customer has already added a cross-sell offer product to cart, it will still show in the offer widget. If this setting is disabled, those products will be hidden away.
Example : Let’s say you’re cross-selling a phone case (offer product) with a phone. If the setting is enabled, the phone case will continue to appear in the widget even when the customer already has this product in their cart. If the setting is disabled, the phone case will disappear from the widget.
- After addition, hide the product from the widget - When this setting is enabled, any product from the cart cross-sell widget will be hidden once the customer adds it to their cart. If it is disabled, the widget will show the added products as well.
Example : If you're cross-selling a laptop bag (offer product) alongside a laptop, enabling this setting means the bag will disappear from the widget once it's added to the cart. Disabling the setting means the bag will remain visible in the widget, even if it’s already in the cart.
- Display the variant picker - If this setting is enabled, the customer will have the option to choose a variant (such as size, color, etc.) for the cart cross-sell offer product. If disabled, the customer will receive the default variant of the product. The default variant is taken from Shopify’s product section, where the variant listed at the top of the list is considered the default.
Redirection
- Hyperlink image and product name to the offer product page - When this setting is enabled, customers can click on the image or product name in the cart cross-sell widget to view the product page of the offer product. If disabled, the image/product of the offer product will not be clickable, and customers won't be able to access the product page directly.
- After clicking on 'Add', the customer will be redirected to the product page - When this setting is enabled, customers will be redirected to the product page of the offer product upon clicking 'Add to Cart', where they can add the product from the product page. If disabled, the cross-sell product is added to the cart immediately when the customer clicks 'Add to Cart'. If you wish to enable this setting, we recommend re-wording the 'Add to Cart' button to 'View Product'
Price and Discounts
- Apply discounts on compare price of the product in the offer - If this setting is enabled, the discount will be applied on the compare at price of the offer product (this can be edited from 'pricing' setting under the offer product from 'Product' section in Shopify). If disabled, it will be applied to the original/sale price of the product. For example, if sale price of offer product is set to $ 3,500, and compare at price is $ 4,000 (with discount set at 20%) then the discount will be displayed on the compare at price with this setting enabled.
- Offer a discount on only a limited amount of products - This setting gives an option to offer a discount on limited quantity of cross-sell offer products. If this setting is disabled, the discount will be applied on all the quantities of the offer product.
Example : If there are 3 cross-sell products but you want the customers to get a discount on only 1 of them, you can set the ‘Total number of products to be discounted’ as 1 and ‘Items Per Product (Quantity)’ as 1. This would mean a maximum of 1 discounted products can be added to cart with a maximum 1 of each discounted product only.
The discounted value and the price of the offer product can also be displayed as rounded up. rounded down or exactly as set-up.
Example : If the offer product's price is $14.98, and the 'Display the product price' setting is set to rounded up, it will display on the widget as $15. Similarly, if after discount, the amount is showing as $11.25, and the 'Display the discount value' setting is set to rounded down, then the discounted price will display as $11.
Please note, discounts cannot be set up if auto recommendation setting for cross-sell products is enabled. This is unfortunately a Shopify limitation.
Auto Remove and cart refresh
- Automatically refresh the page once the product is added - If this setting is enabled, the app will automatically refresh the entire page to show the updated cart when an offer product is added or removed. However, if you do not want the entire page to refresh and still show the updated cart please check with your team/theme support whether your theme has a cart listener or not. Alternatively, you can contact us via live chat/email support and we will add it in for you. Once you have the cart listener, this setting can be disabled and the offer product will automatically appear in the cart without having to refresh the whole page. Please refer to this article for further details.
Content and Display
Step 3 of the funnel setup is where you can change and/or translate the text of the cart cross-sell widget as per your requirements.
The app also provides different layouts for the cross-sell widget. You can explore this under the design section. By default, the same layout is used across both desktop and mobile but if you wish to show a different layout for mobile - you can enable the setting 'Select a different layout for mobile' under 'Advanced display settings' as shown -
Clicking on 'Edit Display and Design' will open the global editing options of the widget including elements like font, colors, spacing of the widget for both mobile and desktop view. You can also edit the exact offer offer body configurations like the text styles, currency, price and discount. After making the changes, you can click on Save changes > Save and Activate to display the funnel on your store.
You can also add further customizations to the display and design by adding Custom CSS. Please refer to this: https://monkcommerce.crisp.help/en/article/how-to-add-custom-css-jm1c3g/
Frequently Asked Questions
1) How does the app decide where the cart cross sell will display inside the cart and how can I alter the position?
The app detects a visual element in your Shopify theme and accordingly positions it's widget. If you want to change the position of the progress bar, please refer to this article on how to do it. The app does not add, remove or alter any of your theme's code.
2) If a customer qualifies for multiple cart cross-sell offers, how does the app choose which one to show?
If multiple cart cross-sell offers are set up and a customer qualifies for several, the offer from the funnel positioned higher on the Funnels dashboard will be shown. Please refer to this article for details on how funnel priority is determined.
If you wish to display all the eligible funnels to your customers, you will need to enable the Combination setting on step 2 of the funnel set up. Please refer to this article for more information.
3) Why does the page refresh when cart cross-sell product is added?
The page refreshes because the setting 'Automatically refresh the page once the product is added' is enabled. For instant cart refresh, you can add a cart listener to your theme. Please refer to this document for more details. If you have a developer who can add the same, kindly do so. If you want the Monk team to add the cart listener, please reach out to us via live chat/email support and we will get it added to your theme.
4) Can I set up exclusions for AI recommended offer products?
Monk app offers the auto recommendation feature using Shopify's AI algorithm to suggest products based on your store’s best-sellers and previous customer purchases. Since these recommendations are coming from Shopify itself, products cannot be excluded while setting up the offer.
5) Why are my cross-sell offer products not visible?
Please go to your Shopify Product section --> Open the offer product and ensure the following:
- The product is in Stock
- The product is in Active Status
- The product is given availability for sales in 'Online Store'
- If in case it is still not visible, please click on 'Sync Now' situated on top right corner in the Funnel page and wait for 10-15 minutes. Post that, you can test the funnel in a fresh incognito window (to view the offer product), to avoid any cache issues. If it's still not visible, please contact us via live chat/email and we'll help debug.
6) How to edit the color of the arrows and carousel bar? Can I use custom CSS?
Yes, the colors of the arrow or carousel can be changed, you can either contact us via live chat/email support and we will change it in for you or it can be changed using custom CSS. Please refer to this article for further information.
If you have any other questions or queries please reach out to us via chat support or write to us at support@monkcommerce.com
Updated on: 29/04/2025