Cart Page Widget
The Cart Page Widget shows product recommendations directly in the cart. It helps increase average order value by suggesting related items, add-ons, or reminders before checkout.
✅ What this widget does
The Cart Page Widget displays recommendations inside the cart page, while customers are reviewing their items.
You can use it to:
Suggest related products
Offer simple add-ons
Show inline upsells
Remind customers of recently viewed products
ℹ️ Available Cart Widget Layouts
When creating a widget, choose Placement: Cart Page, then select one of the layouts below:
Cart Related
Shows related products based on what’s already in the cart.
Best for: cross-selling similar or complementary items.
Example:
Cart contains: Running Shoes
Widget shows: Socks, Shoe Cleaner
Cart Add-on
Shows small add-ons that can be added with one click.
Best for: warranties, accessories, or low-price extras.
Example:
Cart contains: Laptop
Widget shows: Extended Warranty, Laptop Sleeve
Cart Inline Offer
Displays an upsell between cart items (inline placement).
Best for: high-visibility upsells without leaving the cart flow.
Cart Recently Viewed Products
Reminds shoppers of products they viewed earlier.
Best for: bringing customers back to items they hesitated on.
Example:
Customer previously viewed: Wireless Headphones
Widget shows those headphones in the cart
⚙️ How to Set Up a Cart Page Widget
Step 1: Create a Widget
Open the app > go to the Widgets tab > click the Add widget button in the top right corner.
For Placement, choose Cart page
Select the one of layouts you want. Example: Related layout
Click Next to go to the configuration page and begin setting up your widget
Fill in your widget details
Title: What else do you need?
Subtitle (optional8/.
Select Target product
Specific tags: Rings
⇒ This means the widget will only appear on products tagged with “Rings”.
Choose Recommended Products
Recommendation rule: Same Tag ⇒ The widget shows other products that share the same tag as the current product.
Click Save
Step 2: Configure widget style
In the widget detail > click Customize > it directs to app Settings > Design
Choose where it is shown: find Position
Choose one:
Use app block in theme editor (recommended) Use Shopify Theme Editor to drag & drop the widget.
Before / After a HTML element (manual placement) Use this if you’re adding the widget via shortcode and need full control.
Configure the color and design of each widget you want
Save settings
Use the Preview panel on the right to see real-time changes.
Step 3: Display widget on Cart page
Copy shortcode of the widget
Return to the Widgets list
Locate your widget and click Copy under the Shortcode column
Add widget block in theme editor
Go to store backend > go to Online stores > Theme > Edit theme
On Themes Editor page > go to Cart page template
Click Add Block > select Apps > select Tipo Related Products
Paste the widget’s shortcode into the block settings and save the theme editor
Click Save
Step 4: Enable app embed
In theme editor, toggle on the app embed of Tipo Related Products. Learn more
What customers see
When a customer views a Ring product:
The widget appears below the product
It displays other ring-related items (same tag)
Customers can quickly discover matching or complementary products
Last updated