Products (cross-sell and upsell)

9 min

The Products element shows products from your store inside a widget, with price, variant picker and an add-to-cart button. Use it for cross-sells ("Complete the look"), post-add-to-cart upsells ("Upgrade to the bigger size"), recommendations and recently viewed products. Clicks and add-to-carts are tracked and count toward the widget's revenue.

Available on: Shopify (Online Store and Hydrogen) and Wix. On Wix, the Manual and Rules sources and the Add, Buy now and Go to product CTAs are available.

How it works

The widget's trigger fires. Before showing the widget, Personizely works out which products to display from the element's Source.

Products are filtered. Duplicates are removed. Depending on your settings, sold-out products, products already in the cart, or (for Replace) variants that aren't more expensive than the reference item are removed.

The widget shows only if there are enough products. The element has a fixed number of product slots. If fewer products are found than slots, the whole widget doesn't show on that occasion. See Not enough products.

The visitor clicks the CTA. The product is added to the cart (or the visitor goes to checkout or the product page), the click is recorded with the product, and the element's action and automations run.

Sources

Source	Shows	Slots	Platforms
Manual	Products and variants you pick	One per picked product	Shopify, Wix
Rules	Products from a Rule set, matched against the Reference	Products nr.	Shopify, Wix
Added to cart item	The product the visitor just added	1	Shopify; only when Adding to cart is the widget's only trigger
Last viewed products	Products this visitor viewed most recently in this browser (up to 10, newest first), excluding the product on the current page	Products nr.	Shopify
Cart items	Products in the visitor's cart	Products nr.	Shopify
Recommended products	Shopify's product recommendations for the Reference product, with Intent Related or Complementary	Products nr.	Shopify

Rule sets and reference

A rule set is a reusable list of rules, each saying: when the visitor's cart contains / the visitor adds / the visitor is on the product page of any of these products (or, on Shopify, collections), then include these products. Create and edit rule sets from the Rule set picker. Products from every matching rule are combined.

The Reference decides what the rules (or recommendations) are compared with:

Reference	Compares against	Notes
Items in cart	Every product in the cart, plus the just-added product if the widget opened on add to cart	Rules only
Just added item	The product the visitor just added	Needs Adding to cart as the widget's only trigger
Current page product	The product of the product page the visitor is on	Shows nothing on other pages

Complementary recommendations come from the complementary products you set up in Shopify (Search & Discovery app). Related recommendations are generated by Shopify automatically.

CTAs

CTA	What the button does	Action and automations
Add	Adds the selected variant and quantity to the cart and stays on the page	Action + automations run after the item is added
Buy now	Sends the visitor straight to checkout with only that product. Other items in the visitor's cart aren't included. On Shopify, an auto-applied coupon code is passed along	Automations only
Go to product	Opens the product page	Automations only
Replace	Swaps the reference item in the cart for the chosen product (an upsell). Only variants priced higher than the reference item are offered	Action + automations. Shopify only. Not available with Recommended products, Cart items, or Rules with Current page product
Pre-order	Adds the product with its pre-order selling plan. Only products with a selling plan are shown	Action + automations. Requires the PreProduct integration

Changing the CTA updates the button label ("Add to cart", "Buy now", "View product", "Replace", "Pre-order"). You can edit it afterwards.

Configuration

Settings tab:

Option	What it does	Values / default
Source	Where products come from	Manual (default) and the sources above
Product picker	Products and variants to show (Manual)	Pick specific variants to limit the picker
Rule set, Reference	See above	Reference Items in cart by default
Intent	Kind of Shopify recommendation	Related (default), Complementary
Products nr.	Number of product slots	1 by default
Excl. in-cart	Leaves out products the visitor already has in the cart	On by default. Applies to Rules and the other automatic sources, not to Manual
Excl. sold out	Leaves out products with no available variant	Off by default. Shopify, Manual and Rules sources
Shuffle	Randomizes product order on each display	Off by default. Manual, Rules and Recommended
Swiper: Enabled, Slides nr.	Shows products as a swipeable carousel, with N products visible	Vertical layout only. On by default when a vertical element has several products; 1 slide on mobile
Properties	Adds text inputs saved as line-item properties (label and key), for example an engraving	None by default

Interaction tab: CTA, then Action and Conditional actions (for Add, Replace and Pre-order), then Automation. New Products elements get Track widget conversion.

Style tab: background, border, size, gap between products, spacing and position (relative or absolute).

Components

Product (card layout: Vertical, Horizontal or Two columns), Image, Title, Pricing with Price and Compare (compare-at price, shown only when higher than the price), Variant picker, Quantity (off by default), Properties and Button. All except Product can be turned off.

Behavior details and limitations

The number of slots is fixed: the number of picked products for Manual, or Products nr. for other sources. If fewer products are found, the widget doesn't show at all, rather than showing empty slots. Common causes:

Products nr. is 3 but the rule set or Shopify only returns 2 products.

Excl. sold out is on and one of the manually picked products sold out.

Excl. in-cart removed products the visitor already has.

Current page product reference on a page that isn't a product page, or Just added item when the widget didn't open from an add to cart.

Replace found no variant more expensive than the reference item.

Set Products nr. to the minimum you're sure to have, and add enough products to each rule.

Other details

The variant picker is shown only when at least one product has more than one variant and the CTA isn't Go to product. Unavailable variants are disabled; a product with no available variant has a disabled button.

Prices are shown in your store's money format. Product images are resized automatically for the slot on Shopify.

Excl. in-cart applies to products offered by rules. Recommended products aren't filtered by cart contents.

Theme cart updates. After an add, Personizely notifies the theme that the cart changed. Most themes refresh their cart drawer or count; some need a page reload. On Wix, the cart updates through Wix's own cart.

Revenue credit. A click on a product records the product. If the visitor later buys it within the attribution window, the order is credited to the widget even without a goal conversion. See Goals.

Add-to-cart errors. If the store rejects the add (for example the variant just sold out), the visitor sees "Oops! The item you are trying to add is not available."

Examples

Post-add-to-cart cross-sell (Shopify): popup with trigger Adding to cart only; Products with Source: Rules, Reference: Just added item, a rule set mapping cameras to memory cards and cases; Products nr. 2; CTA Add; action Close widget.

Size upgrade upsell: same trigger; Source: Added to cart item; CTA Replace, so only pricier variants of the item are offered.

"You recently viewed" on the cart page: embedded widget on /cart with Last viewed products, Products nr. 4, horizontal cards in a swiper.

Complete the look on product pages: Recommended products, Reference: Current page product, Intent: Complementary.

Troubleshooting

The widget never shows → fewer products are found than slots. Lower Products nr., turn off Excl. sold out / Excl. in-cart to test, and check the reference matches the page or trigger.