Buy Together — Bundle Builder with Live Total

A “Frequently Bought Together” bundle builder with live totals: the current product is shown as the anchor (“This item”) alongside recommended add-ons, each with its own on/off toggle. Every toggle instantly updates the bundle total, the original crossed-out price, the green You save line, and the optional N of M items selected counter — then one click adds the whole selection to the cart.

How this template works

• Three layouts. The Layout setting switches between vertical (a stacked list with toggle switches — the default), horizontal (a product row joined by plus signs that sizes itself to its cards), and compact (a mini strip with small photos, names, and prices — social proof and info lines stay hidden there to save space, while the current product keeps its “This item” label). In the compact strip, Title Position (Strip Layout) places the heading either inline to the left of the products (the default) or on a full line above them. On narrow screens the horizontal row converts to a clean stacked list automatically.
• Style accents and look presets. One Style accent select (light, gold, bold, ocean) recolors toggles, buttons, totals, savings, and cards together. On top of that: Title Style Preset (plain, caps, serif, underline, boxed), Button preset (solid, pill, outline, dark, square), Font preset (system, serif, rounded, condensed), and Card Info Order (standard, price-first, info-top, name-first). Every color and font remains individually overridable in its own style field.
• Live totals engine. The footer shows the bundle total, the original total with a strikethrough when discounts apply, a You save line computed from the difference, and an optional selected-items counter. The total can pulse briefly on every change (Animate Total on Change, on by default).
• How many recommendations. The template asks for up to eight recommendations (Recommendations to show in the recommendation’s Output card; up to 12), but only Max Items Shown (default 2) are visible. The rest sit behind a + N more link; revealed items appear toggled off, so the total only ever includes products the visitor actually saw and chose. Clicking the link again (Show Less Text) collapses them back.
• Default selection. Choose whether the bundle starts with all items on, none of the recommendations, or only the anchor product selected. The include control’s style, position, color, and visibility are separate settings.
• Confirmation style. After adding to cart, the shopper sees a confirmation. Confirmation Style offers modern (a dark rounded toast with a check icon — the default), system (the built-in Personyze notification), or custom (run your own JavaScript from the On Success and On Error fields under Quick add to cart).
• Live demo mode. While designing, demo products appear automatically with working toggles and totals — site visitors never see them.

Bundle price and discount

Every price in the widget — each item, the bundle total, the crossed-out original total and the You save line — comes from your product catalog, through the price columns mapped in Catalog Fields. Personyze only displays the bundle; it does not change what your cart charges.

The add-ons themselves come from the recommendation’s algorithm — for example Cross-Sells (items bought together, learned automatically) or Managed Cross-Sells (pairs you upload yourself). See Recommendation Algorithms.

Best practices

• Offer one or two partners. One strong pairing usually beats a wall of choices — Max Items Shown already defaults to 2.
• Test the discount depth. A 10% bundle discount can earn more than 25% if it converts at a similar rate.
• Place it under the main product image. On the product page, close to the add-to-cart decision.
• Measure against a holdout. Give the widget less than 100% of the traffic, so the rest of your visitors see the Site original, and compare the two on the campaign’s Performance step — see A/B Testing.

Changing settings in the editor

Every setting lives in the sidebar on the left of the action editor, grouped by topic; click a group to expand it, and the preview updates instantly. Two examples:

(1) The How Many Recommendations group holds Max Items Shown (default 2) and the reveal-link texts. (2) Show More Link switches between revealing hidden items with a link or simply not rendering them. (3) The resulting + N more link in the vertical list — clicking it in the preview works exactly as it will on the site.

(1) The Layout select switches the whole widget between vertical, horizontal, and compact in one click. (2) Here the compact strip: title inline to the left (movable above the products via Title Position), uniform mini cards joined by plus signs, the + N more chip, and the total with the cart button — all on one line.

Badges, social proof, and product info

• Badges with sensible defaults. Discount percent (hidden when the discount is 0), NEW (products added in the last 14 days), Popular and Bestseller (top 5% by views or purchases), and low-stock, which shows the live remaining count followed by editable text like “left in stock” (triggers at 5 or fewer units) — each threshold, text, and style is editable.
• Social proof lines. Per-card “viewed today” and “bought today” counts, with a scope setting for all cards, only the anchor, or only recommendations.
• Product info lines. Extra catalog fields (brand, custom columns) under the product name, with the same scope control.

Loading, popups, and stability

• Loading skeleton. Shimmer placeholder rows (on by default) show until recommendations arrive, so the widget never pops in abruptly.
• Smooth Reveal. The widget stays invisible for a moment until its size and position settle, then fades in — no visible jumping while the page loads. On by default, with a safety fallback that always reveals within about three seconds.
• Stale-data protection. On navigation the product-view event and the recommendations request race each other; if the widget would render with the previous page’s product as “This item”, it hides itself for that pageview instead. The check is built in (Require Current-Page View, on by default): the current-product card must link to the page being viewed. This also keeps the widget off non-product pages automatically — no audience rule needed.
• Popup Hugs Widget. When the widget runs inside a popup much wider than itself, it shrinks the popup frame to fit. Turn this off for intentional full-width banner popups.

All settings

Every setting lives in the sidebar of the action editor, grouped exactly as below. Click a group to expand its list. Settings marked (CSS) take raw CSS; the rest are text, numbers, or simple selects.

Good to know

• The widget hides itself off product pages and on stale data. Require Current-Page View (on by default) keeps the bundle from ever showing the previous page’s product or appearing on the homepage. Prefer handling this yourself? Switch it off and add an audience rule targeting visitors whose last interaction is a product view.
• The savings line only appears when there is something to save. If no selected item has a discount, the strikethrough total and You save line hide themselves.
• Add bundle to cart sends all selected items in one call to your account’s Quick add to cart code, with any catalog fields you added there; until that code is saved, the button shows its error message. A secondary Save bundle for later button is off by default and can be enabled with one click; both are fully restylable.
• Central pricing. One Price Format select and one pair of currency-symbol fields apply everywhere prices appear, including totals and savings.
• Style-proof rendering. The template’s styles are engineered to survive aggressive site CSS, while per-element customizations made in the editor still take priority over the template’s defaults.
• Saved template cards freeze their code. If you keep your own copy in My Templates, actions created from it use the code as it was when saved — re-save the card after major updates.

Related

• Bought Together — Classic Strip — the same engine in the classic look: photo strip on top, total price box, checkbox list below.
• Quick Add to Cart Button — the code the Add bundle to cart button runs.
• Auto-Apply Coupon Code at Checkout — carry the bundle’s coupon to checkout.
• Vertical Product List — a list-style recommendations layout without bundle logic.
• Templates — the full template library overview.