Skip to main content

Cart Overview

When a customer configures a product and adds it to the cart, the cart line shows a price with nothing explaining it. Shopify renders the bundle parent, and the parent carries only the machine attributes 3D Bits needs - not the readable choices the customer made.

The Cart Overview card fills that gap. It sits under the cart line, collapsed, showing how many options were configured. Opening it reveals the choices with their swatches, images and prices, the price breakdown, a picture of the configured product, and a link back to the configurator.

It is available on every plan, and it is on by default.

Where the card gets its information

Nothing extra is published for it. The card reads the product's own published scene - the same file the product page renders from - and the customer's choices, which travel on the cart line itself.

That has two consequences worth knowing:

  • Editing the card takes effect on the next publish, like any other scene change.
  • A product that has never been published shows no card, because there is no scene to read.

What the table shows

SettingWhat it does
Draw the summary cardTurn the whole card off and leave the cart line exactly as your theme renders it.
Open the table on loadShow the options expanded instead of waiting for a click.
Image or colour swatchThe small cell before each option, showing that option's image, or its swatch colours when it has no image.
What each option addsThe price difference beside each choice.
Header rowA row naming each column. Off by default - a short table of choices usually reads better without one.

When the header row is on you can retitle each column. Leave a box empty to keep the built-in wording, which is translatable like every other built-in string.

Money rows

The card can print the parts of the price that are not attached to a single option, so the lines add up to the total the customer sees:

  • Base price - the starting price before any choices.
  • Price formulas - anything computed from the configuration, such as a length or an area.
  • Priced parts - the individual parts a configuration is made of.
  • Total - the sum.
Leave the base price on

Without it, the listed options will not add up to the total, and a customer who checks the arithmetic will think something is wrong.

These rows only appear when pricing is switched on for the project.

Colours

Every colour is optional. Left blank, the card follows your GUI theme, so a configurator you have already styled produces a matching cart card with no extra work.

  • Accent - the expand button and the back-to-configurator link. Follows the theme's accent.
  • Outline and dividers - the table border and the hairlines between rows. Follows the theme's border colour.
  • Alternating row - the tint on every second row. Derived from the outline colour by default.
  • Table background - transparent by default, so the cart row shows through.
  • Text - deliberately not taken from the theme.
Why text colour is different

A configurator panel that floats over a dark 3D scene usually has light text. A cart page is not a 3D scene. Left blank, the card inherits the text colour your store theme already uses for that row, which is readable on both light and dark themes. Set it only if you have a specific reason.

If you use theme variants, Take defaults from theme variant picks which one the card follows.

Shape and size

Borders, corner rounding, text size and row density. Two of these are worth explaining:

Row density switches between comfortable padding, which matches the option panel, and compact, which suits carts with many lines.

Stacks below is the width at which each row stops being a table and starts stacking its label over its value. It is measured on the card itself, not on the browser window. That matters: a cart drawer is often only 400 pixels wide on a full-size desktop screen, and a card that asked the window would try to fit four columns into it. Because the card asks its own width, a narrow drawer stacks exactly the way a phone does.

The card can show the captured picture of the configured product, and a link that reopens the exact configuration in your configurator.

The reopen link is worth keeping on. 3D Bits also rewrites the theme's own product link on the cart line, but that depends on recognising your theme's markup. The button inside the card is drawn by 3D Bits, so no theme can defeat it.

Translations

The card's own words - the summary line, the back-to-configurator label, and the built-in column headers - appear in the translations dialog under cart.builtIn, alongside every other string.

Column titles you type yourself in this tab are used as-is, ahead of any translation.