Personyze Wiki Personyze Wiki docs
Open Personyze
Actions & Content

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.…

Updated 14 hours ago 18 min read
A
by Admin

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.

Buy Together template — bundle builder with product toggles, plus signs, live bundle total, strikethrough original price, and You save line

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 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 Look (plain, caps, serif, underline, boxed), Buttons Look (solid, pill, outline, dark, square), Text Font (system, serif, rounded, condensed), and Item 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 by default).
  • How many recommendations. Up to eight recommendations are fetched 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, or only the anchor product selected. The include control’s color and visibility are separate settings.
  • Confirmation style. After adding to cart or saving to wishlist, 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 JS from the Success and Error Action fields). The toast is restylable via Confirmation Toast Style.
  • Live demo mode. While designing, realistic demo products appear automatically with working toggles and totals — site visitors never see them.

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:

Buy Together editor: the How Many Recommendations group with Max Items Shown and the Show More link settings, shown with the vertical layout in the preview

(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.

Buy Together editor: the Layout select open with vertical, horizontal, and compact options, with the compact strip shown in the preview

(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.

Style Accent — Color preset plus the overall arrangement.
  • Style accent — light = clean blue. gold = dark premium. bold = red. ocean = deep blue. Recolors toggles, buttons, totals, links, and cards together.
  • Text Font — system = clean sans-serif. serif = classic serif. rounded = friendly rounded sans. condensed = narrow space-saving sans.
  • Item Info Order — standard = label, name, price, details. price-first = price above the name. info-top = product details above the name. name-first = name above the small label.
  • Layout — vertical = stacked list with toggle switches. horizontal = product row with plus signs, Amazon style. compact = one-line mini strip for cart pages.
Catalog Fields — Which catalog columns feed the current product and the recommendations. Set once per site.

Maps your catalog columns to the template (product title, prices, image, URL, brand, inventory, and custom attributes).

Layout — Widget container, separators, and loading behavior.
  • Widget Outer Container Style (CSS) — Overall widget container: width, padding, margin, font and background.
  • Separator Character — The symbol shown between products in horizontal and compact layouts. Usually a plus sign.
  • Separator Style (CSS) — Extra CSS for the + separator: color, size, etc.
  • Loading Skeleton — Gray shimmering placeholder rows shown for a moment while the recommendations load, then replaced by the real cards. on by default.
  • Smooth Reveal — Keep the widget invisible for a moment until its size and position settle, then fade it in. Prevents visible jumping while the page loads.
  • Popup Hugs Widget — When the widget runs inside a popup that is much wider than the widget, shrink the popup frame to fit the widget. Turn off for full-width banner popups.
Title — The heading above the products.
  • Title Look — plain = as designed. caps = uppercase with letter spacing. serif = elegant serif. underline = accent underline. boxed = tinted pill behind the title.
  • Title Text — Heading shown above the card list, e.g. Complete the Bundle.
  • Title Position (Strip Layout) — Where the heading sits in the compact strip: side = inline to the left of the products, the current look. top = full line above the products.
  • Title Icon — none = no icon. library = pick a built-in icon. image = use your own uploaded image.
  • Icon (from library) — Pick an icon from the built-in library. Shown when Title Icon is set to library.
  • Library Icon Style (CSS) — Size, color and spacing of the library icon.
  • Icon Image — Your own image, shown when Title Icon is set to image.
  • Icon Image Style (CSS) — Size and spacing of the image icon.
  • Title Style (CSS) — Font size, weight and color of the title.
Product Cards — Look of each product card and its parts.
  • Recommended Item Label — Small label shown above each recommended product name, e.g. Add to bundle.
  • Open Product Links In — Where product name links open: same tab (_self) or new tab (_blank).
  • Card Style (CSS) — Padding, margin, background and border of each product card row.
  • Product Image Style (CSS) — Size, border and background of the product thumbnail inside each card.
  • Product Name Style (CSS) — Font, size and color of the product name.
  • Item Label Style (CSS) — Style of the small label above each name (This item / Add to bundle).
  • Price Style (CSS) — Font, size and color of the price.
  • Original Price Style (strikethrough) (CSS) — Style of the crossed-out original price.
How Many Recommendations — Cap visible recommendations, with the rest behind a Show More link.
  • Max Items Shown — How many recommended products are visible at first. Up to 8 are fetched; the rest hide behind the Show More link. Default 2.
  • Show More Link — on = hidden items can be revealed with a link like + 3 more. off = extra items are simply not shown at all.
  • Show More Text — Label of the reveal link. Write %N where the number of hidden items should appear.
  • Show Less Text — Label of the link after expanding, used to collapse the extra items again, e.g. Show less.
  • Show More Link Style (CSS) — Style of the reveal link.
Current Product (This Item) — The product the visitor is viewing, shown as the first card.
  • Current Product Label — Small label shown above the current product name, e.g. This item.
  • Require Current-Page View — on = the widget only shows when the current-product card links to the page being viewed; if the data still belongs to a previous page (or the visitor is not on a product page), the whole widget hides instead of showing a stale bundle. on by default; set off to always show whatever the datasource returns.
  • Emphasize Current Product — Make the current card stand out. off = no emphasis. tint = soft accent background. ring = accent border with glow. bar = accent stripe on the left. badge = little accent tag on top.
  • Current Product Badge Text — Text for the little tag when Emphasize is set to badge, e.g. Your item.
  • Current Product Card Style (CSS) — Extra CSS applied only to the current product card (on top of the normal card style).
  • Require Current-Page View — on by default: the widget only shows when the current-product card links to the page being viewed; on other pages, or when the data still belongs to the previous page, the whole widget hides instead of showing a stale bundle. Turn it off to always show whatever the datasource returns — for example if you prefer to control this at the audience level instead, by targeting visitors whose last interaction is a product view.
Selection & Toggles — How shoppers include or exclude items, and which start selected.
  • Default Selection — Which items start checked. all = every item selected (highest bundle value). anchor = only the current product. none = recommendations start off, only the current product is checked.
  • Show Include Toggle — Show the on/off control that lets shoppers include or exclude each item. Turn off to always include every shown item.
  • Include Control Style — switch = sliding toggle. checkbox = classic checkbox with a checkmark.
  • Include Control Position — Where the toggle/checkbox sits on each card: right (default), left, center, or outside-left (in the margin left of the card).
  • Toggle / Checkbox Color — Color of the control when an item is selected. Leave as is to follow the Style accent automatically, or pick a specific color to override it.
Prices — Price display, currency symbols, and number format.
  • Show Prices — Toggle price display on or off on each card.
  • Currency Symbol Before Price — Symbol shown before the price, e.g. $ or EUR.
  • Currency Symbol After Price — Symbol shown after the price, e.g. USD.
  • Number Format Locale — BCP 47 locale tag, e.g. en, de, fr, he-IL.
  • Decimal Places — Number of decimal places shown in prices, e.g. 2 for $9.99.
  • Label for Free Items — Text shown instead of a price when the product is free, e.g. FREE.
Total Price Display — The bundle total, savings line, and selected-items counter.
  • Total Label Text — Label shown above the total price, e.g. Bundle total:
  • Total Label Style (CSS) — Font size and color of the total label.
  • Total Amount Style (CSS) — Style of the total price amount.
  • Original Price Style (strikethrough) (CSS) — Style for the original total shown crossed-out when a discount applies.
  • Animate Total on Change — Subtle pop animation on the total amount each time an item is toggled on or off.
  • Show Savings Line — Show a savings line under the total, like: You save 401.00, whenever the selected bundle is cheaper than the original prices.
  • Savings Label — Text before the saved amount, e.g. You save.
  • Savings Line Style (CSS) — Font, size and color of the savings line. Green and bold by default.
  • Show Selected Counter — Show a line under the total like: 3 of 5 items selected. Off by default.
  • Counter Text — Counter wording. Write %N where the selected count goes and %M where the total shown items count goes.
  • Counter Style (CSS) — Font, size and color of the counter line.
Add to Cart Button — The main add-to-cart button and its behavior.
  • Buttons Look — solid = filled rectangle. pill = fully rounded. outline = transparent with accent border. dark = near-black fill. square = sharp corners.
  • Button Text — Label on the add-to-cart button, e.g. Add bundle to cart.
  • Extra add_to_cart Argument — Optional extra argument passed to your site add_to_cart_for_personyze() function.
  • Button Normal Style (CSS) — Default appearance of the button.
  • Button Hover Style (CSS) — Button appearance on mouse hover.
  • On Success (JS) – Advanced Override — Advanced: replace the entire success handler with custom JavaScript. Leave blank to use the default success message.
  • On Error (JS) – Advanced Override — Advanced: replace the entire error handler with custom JavaScript. Leave blank to use the default error message.
Cart Messages — The confirmation shown after adding to cart.
  • Confirmation Style — modern = dark rounded toast bubble with a check icon, matching the wishlist confirmation. system = the built-in Personyze notification. custom = run your own JS from the Success and Error Action fields.
  • Success Message Text — Shown after items are added to cart. Default: Bundle added to cart.
  • Success Message Style (CSS) — Style of the success banner.
  • Error Message Text — Shown when adding to cart fails. Default: Cannot add to cart.
  • Error Message Style (CSS) — Style of the error banner.
Product Info — Extra catalog attributes (brand or custom columns) on the cards.
  • Show Product Info On — Which cards show these attributes. all = current product and recommendations. main = only the current product. recommended = only the recommendations.
  • Show Brand — Show the product brand/manufacturer.
  • Brand Label — Optional text before the brand, e.g. "Brand: ". Leave blank for none.
  • Show Custom Attribute 1 — Show the first custom attribute (mapped in Catalog Fields).
  • Custom Attribute 1 Label — Optional text before attribute 1, e.g. "Color: ".
  • Show Custom Attribute 2 — Show the second custom attribute.
  • Custom Attribute 2 Label — Optional text before attribute 2.
  • Product Info Style (CSS) — Font size and color of the product-info line.
Social Proof Text — Live viewed / bought / low-stock lines under products.
  • Show Social Proof On — Which cards show the social-proof lines. all = current product and recommendations. main = only the current product. recommended = only the recommendations.
  • Timeframe — today = last 24 hours. week = last 7 days.
  • Show Views — Show how many people viewed the product.
  • Show Purchases — Show how many people bought the product.
  • Show Low Stock — Show a low-stock line when inventory is at or below the threshold (recommendations only; needs an inventory column).
  • Minimum Views to Show — Only show the views line when the count is at least this. Default 30.
  • Minimum Purchases to Show — Only show the purchases line when the count is at least this. Default 3.
  • Low Stock Threshold — Show the low-stock line when inventory is at or below this. Default 10.
  • Views Label (today) — Text after the view count, e.g. viewed today.
  • Views Label (week) — Text after the view count, e.g. viewed this week.
  • Purchases Label (today) — Text after the purchase count, e.g. bought today.
  • Purchases Label (week) — Text after the purchase count, e.g. bought this week.
  • Low Stock Text — Text after the stock number, e.g. left in stock.
  • Views Icon — Icon next to the views line.
  • Purchases Icon — Icon next to the purchases line.
  • Low Stock Icon — Icon next to the low-stock line.
  • Social Proof Text Style (CSS) — Font size and color of the social-proof lines.
  • Views Line Style (CSS) — Style for the views line specifically (overrides the shared style).
  • Purchases Line Style (CSS) — Style for the purchases line specifically.
  • Low Stock Line Style (CSS) — Style for the low-stock line specifically.
  • Views Icon Style (CSS) — Size and color of the views icon.
  • Purchases Icon Style (CSS) — Size and color of the purchases icon.
Popular Badge — A Popular badge on the most-viewed products.
  • Show Popular Badge — Toggle the Popular badge on or off.
  • Time Frame — Measure popularity over the past week or just today.
  • Threshold % (top N%) — Badge appears on products in the top N% most viewed. e.g. 5 = top 5%.
  • Badge Text — Label shown on the badge. Default: Popular
  • Badge Style (CSS) — Position, background color and shape of the Popular badge.
  • Badge Text Style (CSS) — Font size and weight of the Popular badge label.
Best Seller Badge — A Best Seller badge on the most-purchased products.
  • Show Best Seller Badge — Toggle the Best Seller badge on or off.
  • Time Frame — Measure sales over the past week or just today.
  • Threshold % (top N%) — Badge appears on products in the top N% by purchase count. e.g. 5 = top 5%.
  • Badge Text — Label shown on the badge. Default: Best Seller
  • Badge Style (CSS) — Position, background color and shape of the Best Seller badge.
  • Badge Text Style (CSS) — Font size and weight of the Best Seller badge label.
Discount Badge — A discount-percentage badge on discounted products.
  • Enable Discount Badge — Toggle the discount percentage badge on or off.
  • Min Discount % — Badge only appears when the discount is at least this percentage.
  • Badge Extra Label — Optional text appended after the percentage. e.g. OFF produces: 20% OFF
  • Badge Style (CSS) — Position, background and shape of the discount badge.
  • Badge Text Style (CSS) — Font size and weight of the discount percentage text.
New Badge — A New badge on recently added products.
  • Enable New Badge — Toggle the New badge on or off.
  • New Badge Threshold — Products added within this time period receive the badge.
  • Badge Text — Label shown on the badge. Default: NEW
  • Badge Style (CSS) — Position, background and shape of the New badge.
  • Badge Text Style (CSS) — Font size and weight of the New badge label.
Stock Badge — A low-stock warning badge.
  • Enable Stock Badge — Toggle the stock level badge on or off.
  • Stock Threshold — Badge appears when inventory is at or below this number.
  • Stock Badge Text Suffix — Text after the stock count. e.g. left produces: 3 left
  • Badge Style (CSS) — Position, background and shape of the stock badge.
  • Badge Text Style (CSS) — Font size and weight of the stock badge text.
Wishlist Button — The optional Save-for-later button (off by default).
  • Show Wishlist Button — Toggle the Save Bundle for Later button on or off.
  • Button Text — Label on the wishlist button, e.g. Save bundle for later.
  • Confirmation Message After Adding — Message shown after products are added to the wishlist.
  • Confirmation Toast Style (CSS) — Extra CSS for the dark confirmation bubble shown after saving to wishlist, e.g. background or font size.
  • Button Normal Style (CSS) — Default appearance of the wishlist button.
  • Button Hover Style (CSS) — Wishlist button appearance on mouse hover.
Close Button — The optional close/dismiss control.
  • Show Close Button — Toggle the close/dismiss button on or off.
  • Close Button Content — Label or icon for the close button.
  • Close Button Style (CSS) — Style of the close button element.
Editor Notes — Editor-only demo bundle and design note.
  • Demo Bundle (Preview Only) — Three sample products with working toggles and totals, shown only in the editor and preview links when no real data renders yet. Visitors never see them.
  • Show Editor Note
  • Editor Note Text
  • Guide Link URL

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 using your catalog’s add-to-cart columns; a secondary Save bundle for later wishlist button is off by default and can be enabled with one click and 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 Your templates, actions created from it use the code as it was when saved — re-save the card after major updates.

Related