Product add-ons

Add-ons are other products the customer can add together with the one on the page: a gift wrap, an extended warranty, a case for a phone. They sit in the product’s add-to-cart form, and they go to the cart together with the product, as one line. This page covers the Shopify side, the five kinds of add-on picker, prices and quantity limits.

1. Choose the add-ons in Shopify

1. In Shopify, open the main product and fill its Add ons metafield with the products to offer. Any other product metafield that holds a list of products works too, such as one your store already uses for accessories.
2. In Settings > Custom data, check that the Add ons and Combinations product metafields and the Combinations metaobject have Storefront access. Smootify creates them with it, but a definition that already existed in the store keeps its own setting.

An add-on is an ordinary Shopify product, with its own price, variants and stock.

2. Add the add-ons to the form

Add-ons go inside the Form of the product’s smootify-add-to-cart. Only the fields inside the Form reach the cart.

1. Inside the Form, add a Custom element with the tag smootify-product. Give it data-id="metafields.custom.add_ons" and data-parent-id, bound to the Shopify ID field of the page’s product. Smootify repeats this element once per product in the Add ons metafield. For another metafield, write its namespace and key instead, such as data-id="metafields.custom.accessories": its type must be a list of products, and its definition needs Storefront access.
2. Inside it, put one add-on picker (next section) and whatever you want to show about the add-on: product="title", an image, a smootify-price.

To offer one fixed product instead of the metafield list, give the inner smootify-product that product’s id in data-id.

What is up to you: the layout of the list (a grid, a row of cards, a Dropdown), what each add-on shows, and which picker each one uses.

The fields of a picker take any Name. Webflow asks for a Name on every checkbox, select or quantity field: write what you like, such as addon. Smootify renames the picker’s fields itself, and they never reach the cart line as a property, not even when the customer adds to cart before the add-on has loaded.

3. Pick a picker

Each add-on needs one of these Custom elements inside its smootify-product:

single-addon-swatch on smootify-add-to-cart keeps only one swatch add-on chosen at a time. The swatch buttons of a product with one option take the swatch parts of the variant swatches (option="title", option="image", option="bg-color").

A smootify-price inside a swatch button shows the price of that button’s value. A checked checkbox gives its smootify-product the class is-checked.

4. Prices and quantities

The total. With add-ons chosen, data-prop="total" of the main smootify-price includes them. bundle="total", anywhere in smootify-add-to-cart, shows the same total: the product and its chosen add-ons. An Image with bundle="images" is copied once per chosen add-on, with that add-on’s picture, each copy stacked over the one before. Both stay hidden while the form has no add-on picker.

Quantity. An add-on without its own quantity field follows the quantity of the main product. To let the customer choose it, put a Custom element with the tag quantity-input inside the picker, with a Text field inside, as on the product page. In an addon-checkbox, the field starts at 0, and a quantity above 0 checks the box.

Limits for all the add-ons together. On the Text field of an add-on’s quantity-input, these custom attributes limit the sum of the add-on quantities, for each unit of the main product:

• global-min: at least this many add-ons;
• global-max: at most this many;
• global-total: exactly this many.

Put them on one add-on’s field only. While the add-ons are outside the limits, the add button is disabled and smootify-add-to-cart gets a class. Inside the form, condition="below-bundle-limits" and condition="above-bundle-limits" show a message only in that state, and bundle-limit shows the numbers. A box of chocolates with global-total="3" needs exactly 3 add-ons:

Add-ons and subscriptions. Add-ons are for one-time purchases. While the customer picks a subscription plan, each add-on picker takes the is-disabled class, its fields are disabled and the add-on stays out of the total and the cart. Switching back to one-time brings the choice back. On product pages that sell both, style .is-disabled as a combo class, for example with lower opacity or by hiding the block, or show a note such as “Gift wrap is for one-time orders”.

5. One line in the cart

When the customer adds the product with add-ons, they go to the cart together. With Magic Box turned on, the cart and checkout show them as one line, with the product and its add-ons inside. In the cart, a box-item inside the cart-item template lists them. The quantity of that line cannot be changed in the cart.

The line takes its title and image from the first of these that applies:

For a tablet with a pen and a keyboard as add-ons, three combinations cover every choice: the pen, the keyboard, and the pen with the keyboard.

6. Keep add-on products out of lists and search

An add-on such as a gift wrap is a product of its own, so it can show up wherever the store lists products. Keep it out in two places:

• Search and the CMS. In Shopify, give the add-on the metafield seo.hidden with the value 1. To set it in the admin, first add a product metafield definition with namespace seo, key hidden and type integer, with Storefronts access on. Shopify then leaves the product out of its search, and so do Smootify’s predictive search and search page. The change takes a few minutes. The CMS sync skips it too, so it gets no page and no item in your Collection lists; an item imported before goes with the next full sync from Smootify Studio (see CMS collections and sync). The add-on still loads by its id, so it keeps working on the product page.
• Collections and product lists. Keep the add-on out of your collections, including automated ones. A collection page lists only the products in it. A product list that runs a query of its own, such as best sellers, newest products or a custom query, can still show the add-on: the store’s best sellers (data-id="best-seller") come from the whole store. Use a custom query that leaves it out, such as data-query="-product_type:Add-on" with data-sort="BEST_SELLING", or pick the products by collection with data-id="specific-collection".

Before you publish