Configure Recommended Products Block
Show product recommendations in the cart or cart drawer, using product metafields and field-by-field styling controls.
Use Recommended Products when you want to upsell extra items while the shopper reviews their cart.
It shows a product carousel inside the cart surface your store uses.
That can be the cart page or the cart drawer.
What this feature does
Recommended Products shows suggested products based on a product metafield.
You choose how many products can appear, where the recommendations are sourced from, and how the block looks.
Use it when you want to:
suggest complementary products before checkout
keep upsells inside the cart flow
hide the block once a shopper reaches a target cart value
Where to find it
Go to Cart & Checkout.
On the Cart Features tab, find Recommended Products and select Configure.
Before you configure it
Decide these four things first:
which product metafield will hold the recommended products
whether recommendations should use the last added product or all products in the cart
how many products should show at once
whether the block should hide once the cart reaches a spend threshold
Set the recommendation logic
Hide the block at a threshold
Use Hide on Threshold when the upsell should stop once the shopper reaches a target.
This works well when the next goal is already handled elsewhere, such as free shipping or a Gift with Purchase threshold.
Set the content & outer container
Use the panel to control the heading shown above the carousel.
You can configure:
title text
title size
title colour
title font weight
background colour
border colour
border style
border thickness
This is the outer frame around the whole recommendation area.
Style each product card
Product image
Use Product Image to control how the image appears.
You can configure:
image size
border radius
image shape
Larger images push the product info section to the right.
Inner section
Use Inner Section to style the product card itself.
You can configure:
background colour
background radius
inner border on or off
border colour
border thickness
product title colour, size, and weight
product price colour, size, and weight
This controls the card that wraps the image, title, price, variant selector, and button.
Configure the variant selector
Use Variant Selector when recommended products have selectable variants.
You can configure:
minimum width
background colour
text colour
border colour
border radius
Increase the minimum width only when variant names need more room.
Configure the button & Pagination
Use Button to style the add-to-cart action inside the product card.
You can configure:
button text
button colour
button text colour
button border colour
error button colour
error button text colour
text size
border radius
font weight
button location
Use a short label.
Add to Cart is the usual choice.
Use Pagination when more than one recommendation can appear in the carousel.
You can configure:
show arrows
show indicators
arrow colour
indicator primary colour
indicator secondary colour
Turn off arrows or indicators only if the card count is low and the layout stays obvious.
Adjust spacing
Use Spacing to tune how tightly the block fits inside your cart layout.
You can configure:
container outer vertical and horizontal spacing
product card inner vertical and horizontal spacing
outer margins for top, bottom, left, and right
You can also turn on preview-only spacing indicators while you fine-tune the layout.
These indicators do not show on the live storefront.
Use the preview simulator
The preview updates as you edit the settings.
Use Simulate Cart to test the block at different cart values.
If threshold hiding is enabled, test both below and above the threshold.
If you use country-specific thresholds, switch the country in the simulator and test each market.
Actual appearance may vary based on your store's cart drawer or cart page layout.
Optional custom CSS
Use Custom CSS only when the built-in controls do not cover the design change you need.
This editor targets the widget with ::part(...) selectors.
Example areas include:
headingproduct-offerproduct-image
Use custom CSS carefully.
Aggressive overrides can make future styling changes harder to manage.
Save and test
Select Save when you are done.
If the block is not already placed, select Add to Cart Page to add it to your theme via the editor.
Then test on the live storefront.
Check these cases before launch:
a cart with no qualifying recommendations
a cart below the threshold
a cart above the threshold
Also test desktop and mobile.
Troubleshooting
Use these checks in order.
The block is empty
Check the metafield key first.
Then confirm the source products have recommended products saved in that metafield.
If you use All products in cart, check each eligible cart item.
The block shows for some countries but not others
Review the Per country threshold setup.
If a country has no specific entry, Rest of World applies.
If no threshold applies to that market, the block keeps showing.
The block hides sooner than expected
Check whether the cart subtotal is already above the configured threshold.
Then confirm the simulator country matches the threshold entry you want to test.
Retest with a lower simulated cart value.
The live layout looks different from the preview
The preview uses sample data.
Your live theme, cart width, product titles, variant names, and custom CSS can all change the final layout.
Retest on both desktop and mobile after saving.
Best practices
keep the title short
start with three products or fewer
use the last added product when the cart usually centers on one hero item
use per-country thresholds if your free-shipping goals differ by market
test long product names and long variant names before going live
Related guides
Last updated