2.0 Beta

Smootify 2.0 is in public beta. Your 1.x store keeps working. Move when you want.

What changed

Fixed bundles (Shopify Bundles)

Sell the fixed bundles and multipacks made with the Shopify Bundles app, and list what each bundle holds on the product page and in the cart.

v2.0 beta
Open .md
On this page
  1. Fixed bundle, Magic Box or add-ons
  2. 1. Build the bundle’s page
  3. 2. List what the bundle holds
  4. 3. In the cart
  5. Before you publish

A fixed bundle is a product made of other products, always the same ones: a starter kit, a pack of three, a gift set. You create it in Shopify with the Shopify Bundles app. For Smootify it is an ordinary product: it syncs to the CMS, it has a product page, and it goes to the cart with the usual add-to-cart form. This page shows how to list what the bundle holds.

Note

The bundles come from the Shopify Bundles app, installed on the Shopify store. There is nothing to turn on in Smootify.

Fixed bundle, Magic Box or add-ons

There are three ways to sell products together. Pick the one that matches who decides what goes in:

This page

A fixed bundle

The customer
Buys a set you decided.
Set up in
The Shopify Bundles app.
Magic Box

A box to fill

The customer
Fills a box with products they choose.
Set up in
Webflow and a Magic Box entry.
Add-ons

Extras on one product

The customer
Adds extras to one product.
Set up in
The product's Add ons metafield.

1. Build the bundle’s page

The bundle has its product page like any other product: see build the product page. Its price, options and stock come from Shopify. With the Shopify Bundles app, the stock follows the stock of the products inside.

2. List what the bundle holds

Add variant="components" to an element inside smootify-product. Smootify makes one copy of it for each product in the bundle of the selected variant. Inside the copy, these attributes show that product:

  • component="title": its name;
  • component="variant": its variant, such as “Red / M”. Empty for a product without variants;
  • component="quantity": how many of it the bundle holds;
  • component="image" on an Image: its picture;
  • component="url" on a link: its product page, on that variant.
Example structure of the Navigator
Div Block
Div Blockvariant=components
Imagecomponent=image
Div Block
Text Span“1”component=quantity
Text“×”
Text Span“Product”component=title
Text Block“Variant”component=variant
Text Link“View”component=url

A copy without any component element inside shows a plain text such as “2× Travel mug”. When the selected variant is not a bundle, there is no copy. The list follows the variant: pick another option and it shows that variant’s contents.

What is up to you: which parts you show, and the layout of the list. See bundle component values.

3. In the cart

The bundle is one line in the cart, with the bundle’s name. In the cart, a box-item inside the cart-item template repeats once per product in the bundle, with the cart line values such as box-item="title" and box-item="quantity":

Example structure of the Navigator
cart-itemCustom Element
Text Block“Product”cart-item=title
box-itemCustom Element
Text Span“1”box-item=quantity
Text“×”
Text Span“Item”box-item=title

On a line that is not a bundle, the box-item is removed.

Quotes and custom prices. When the cart becomes a Shopify draft order (a quote, or a cart with a price set by name your price or the product configurator), the bundle keeps its products, and the order’s additional details list them for the merchant under “Bundle (1)”.

Buy again. The buy-again button of the order pages leaves bundles out: an order does not say which bundle its products came from.

Before you publish

Check these first

  • The list of contents is empty. The selected variant is not a bundle in Shopify, or the element with variant="components" is outside smootify-product.
  • Each copy shows only “2× Name”. The copy has no component element inside. Add the ones you need.
  • The bundle has no contents in the cart. The cart-item template has no box-item inside.

    ↑ ↓ to moveEnter to openEsc to close