Articles on: Upsell/Cross Sell

How to set up upsell/cross-sell on the product page?

This is step-by-step guide on how you can configure product recommendations or upsell/cross sell within your theme's product page by using Monk's Product page Cross-Sell funnel. This funnel can be configured across a variety of rules and eligibility criteria and works seamlessly with all theme's product pages. This funnel can be particularly used to highlight your bestselling products to nudge customers to add more items to their order hence increasing your average order value (AOV) and boosting product discovery.


Please note, upsell/cross-sell can be set up at 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


We provide the flexibility to showcase cross-sell offer using a variety of layout options, allowing you to choose the layout that best aligns with your website. Here are a few examples-




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



Under Cross sell, you'll find a variety of templates to choose from. If your offer structure aligns with one of these templates, you can proceed with it. If not, you also have the option to custom build your offer as shown below -


Please select Display page for the offer as 'Product page' under 'Embedded' section and then click on Next to set the 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 sandbox/testing/development stores



Advanced Configuration


Under Step 2, you have the following settings with respect to displaying the 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.


  • Display the variant picker - If this setting is enabled, the customer will have the option to choose a variant (such as size, color, etc.) of the product page 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 product page 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.


  • Click on 'add' button to -


With this setting, If 'Redirect to product page' is selected, 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 itself. If 'Redirect to cart' is selected, they can be redirected to cart upon clicking on the offer product from the cross sell widget. If 'Stay on the same page' is selected, the customer will not be redirected to any page even upon clicking on the add to cart button of the offer 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.


Example, if sale price of offer product is set to $3,500, and compare at price is $4,000 then the discount will be displayed on the compare at price with this setting enabled. In this example, the discount set through Shopify product section is 12.5% (12.5% discount on $4000 = $3500).


When this setting is enabled, the price of the cross-sell offer product must not exceed the current selling price of the main product after a discount has been applied via the Monk funnel (which is $3,500 in this example). Since the discount is applied to the original price of $4,000, the cross-sell discount must be greater than 12.5%. If the discount is less than 12.5%, the resulting price would exceed $3,500, which would violate this rule.



  • 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 from the product page cross sell widget 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.


Please note, in order to display a Product page cross sell, a 'cross-sell' app block needs to be added to your theme's product page. Please refer to this article for more information on the same : https://monkcommerce.crisp.help/en/article/how-to-customize-locationposition-of-monks-widgets-jc9jyl/


Content and Display


Step 3 of the funnel setup is where you can change and/or translate the text of the product page 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 -



For Checkbox layout, we provide the Advanced display setting of-


-Show a separate ‘Add’ button inside the widget - There will be a separate 'Add to Cart' button inside in the widget when this setting is enabled. If disabled, Monk will use your theme's native 'Add to Cart' button. We recommend enabling this setting only if you're positioning the widget below the main product page add to cart.



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.


The app also have a separate setting to enable/disable carousal for the cross sell offer. If disabled, the products will show up as a list of products, one below the other.



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 product page 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 cross sell, 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) Is there a way to give away free products on the product page?


Yes, this can be done using the free gift selection funnel offer on the product page. You can refer to this document on how to set it up.


3) Why is the customer not redirected to cart after clicking on Add to cart button of the cross sell offer?


That is because the redirection setting is set to 'Stay on the same page'. You can go to step 2 of the funnel set up > Advanced Configuration > Redirection > Click on 'Add' button to > Redirect to cart. With this setting selected, the customers can be redirected to cart upon as soon as they add the offer product from the cross sell widget.




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.




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: 23/06/2025