Build the cart

The cart is one element, smootify-cart, with a Webflow Form Block inside it. The same element makes a cart page or a mini cart that opens over the page: only what you wrap the form in changes. This guide builds the cart first, then shows the ways to open it.

Discount codes, notes and progress bars are in Discounts, notes and progress bars. Product suggestions are in Cart upsells.

How it fits together

What Smootify needs:

• a smootify-cart element;
• inside it, a Form Block. Its Form holds the line template (cart-item) and the checkout button.

What is up to you:

• where the cart lives: a page of its own, the navbar, or both;
• the layout, the order of the parts, the classes and the styles;
• which parts you show. A mini cart can show only the title and total of each line.

The smallest cart looks like this in the Navigator:

1. Add the cart and its form

1. Add a Custom element with the tag smootify-cart. For a mini cart, put it in the navbar (see Navbar). For a cart page, put it on a page of its own.
2. Inside it, add a Form Block.

Smootify uses the three parts of the Form Block this way:

Design the Success message as the empty cart, and leave a text element inside the Error message: Smootify writes each error into it, such as a quantity above the stock. A change that cannot reach Shopify, such as a quantity, a removal, a code, the note or the checkout while the visitor is offline, shows its error there too, and the line comes back from its loading state.

While the cart is empty, smootify-cart has the class is-empty-cart. You can style it as a combo class.

The cart uses the first form inside smootify-cart. A form inside a product card in the cart, such as an upsell, is left alone.

2. Design one line

Add a Custom element with the tag cart-item inside the Form. It is the template of a line: Smootify copies it once for each line in the cart. Design only one. Any other cart-item you add is removed.

Inside it, add a custom attribute to a Webflow element to fill it with a value of the line:

A Text link with cart-item="url" and only text inside also shows the product title. Every value is in cart line values.

Options and extra fields. A Div block with cart-item="options" is repeated once for each option of the variant. Inside it, option="name" shows the name (“Size”) and option="value" the value (“M”). The same template also lists the extra fields the visitor filled in the add-to-cart form, such as an engraving, and the name of the subscription plan.

Metafields. The product’s metafields work inside the line, with the same attributes as on the product page: see Metafields on the page.

While a line changes. A line shimmers and ignores clicks while its quantity changes or while it is removed. It has the class updating or removing during that time.

3. Quantity and remove

Quantity. Inside cart-item, add a Custom element with the tag quantity-input with a Text field named quantity inside it. The minus and plus buttons are optional: they are Custom elements with the tag button and data-action="minus" or data-action="plus".

• A change updates the line at once. Going down to 0 removes the line.
• Plus stops at the stock or at the product’s quantity rule. data-disable-max on quantity-input removes that limit.
• With both buttons, the field does not take clicks: the number changes through the buttons. Without buttons, the visitor types the number.
• Some lines cannot change quantity, such as a Magic Box. Their quantity field is removed.

Remove. Inside cart-item, add a Custom element with the tag button and data-action="remove". It removes the line, together with the other lines of its bundle.

4. Totals

Add a custom attribute to a text element anywhere inside smootify-cart, inside or outside the Form. Here, three items cost €150 at compare-at prices, €120 at their sale prices, and a discount code takes €12 off the order:

cart="savings" replaces what is inside it with the amount, and hides only itself. A label such as “You save” placed next to it stays visible when there is nothing to save.

Shipping. For a logged-in customer with an address, Shopify adds a shipping estimate to the total. cart="shipping" shows it, so that subtotal, shipping and taxes add up to the total. Without an estimate (no address yet, free shipping, or draft prices) the element is hidden. To show a text instead, such as “Calculated at checkout”, give it the custom attribute data-fallback with that text. data-fallback works the same on every cart value, and an empty one is ignored.

Taxes, and shipping without an address, are calculated at checkout, so the total in the cart is not always the final amount. The discount and gift card lists are in Discounts, notes and progress bars. Every value is in cart values.

skeleton="text" on a total shows a shimmer until the cart loads. See loading.

5. Checkout

The checkout button is the Form’s Form Button. A click sends the visitor to Shopify’s checkout. Before that, Smootify saves the cart note and the other fields of the cart form (see cart attributes). The Form Button’s Waiting text setting shows while this happens.

• Shop Pay. A Custom element with the tag smootify-shop-pay inside smootify-cart shows Shopify’s Shop Pay button for the cart. Inside smootify-product it shows the button for the chosen variant. Shopify draws the button, and it always fills the element: for a narrower button, give the element a width, not a background or a centred layout.
• Checkout domain. Where the checkout opens depends on your domains: see Domains and checkout.
• A quote instead of checkout. See Quotes and B2B.

A link to Shopify’s own cart. Some Shopify apps work only on the cart page of Shopify’s online store, such as pickup and delivery schedulers like Pickeasy. For them, add the custom attribute shopify-link="cart" to a Text link or a Link block, on any page. Smootify points the link to the online store’s cart, on your store’s myshopify.com address, with the visitor’s lines and their extra fields, and updates it every time the cart changes. When more than one line has extra fields or is a bundle, the link opens the visitor’s cart itself instead. Any other value is a path of the store’s address: shopify-link="account" opens /account there.

6. A page or a mini cart

A smootify-cart with nothing around its form is a cart page: it shows in the page. To make a mini cart, wrap the Form Block in one of these, inside smootify-cart:

You don’t tell Smootify which one you use. It looks inside smootify-cart, in this order, for a popover, a dialog, a details and a Dropdown. The first it finds decides how the cart opens. Use only one.

Open and close buttons. A Custom element with the tag button and data-action="open-cart" opens the cart; data-action="close-cart" closes it (open and close also work). Both must be inside the same smootify-cart. Keep them outside the Form, or give them type="button": inside the Form, a button without it also submits the cart and goes to checkout.

Open after an add. Add data-open="on-add" to smootify-cart. The mini cart then opens each time a product is added, except with Buy now, which goes straight to checkout. On a page that has another smootify-cart with no Dropdown and no popover inside it, such as your cart page, data-open does nothing.

For developers, openCart and closeCart open and close it from code, and the cart_opened and cart_closed events tell when it happens.

In a Webflow Dropdown

The toggle holds the cart icon and the count. The Dropdown list holds the Form Block.

A click inside the list does not close it, and Smootify opens it again when the lines change. A Dropdown can still close while the visitor types in the cart’s fields. A popover stays open.

In a dialog

A dialog is a panel over the page, such as a drawer. Put a Custom element with the tag dialog inside smootify-cart. Its first child is the panel: design it as you like, such as a column fixed to the right. Everything around the panel is the backdrop.

• A click on the backdrop and the Escape key close it.
• The panel fades and scales in. A developer can change the animation: see Options.
• The backdrop is 80% black. The CSS variable --smootify-backdrop-color changes it: see CSS.
• A dialog is hidden in the Designer. To design it, add the custom attribute open with the value true while you work, and remove it before you publish: a dialog with open shows when the page loads.

In a details element

Put a Custom element with the tag details inside smootify-cart. Inside it, a Custom element with the tag summary is the trigger, and can hold the count. The element after it is the panel.

A click on the summary opens and closes the cart, and a click outside the details closes it. A close button goes inside the panel.

In a popover

A popover opens above the page. Escape and a click outside close it, and the browser handles the focus. Use Webflow’s Popover element where your site has it, or a Div block with the custom attribute popover.

• Webflow’s Popover element comes with its own trigger, which works as it is. With the custom attribute, open it with a data-action="open-cart" button as above, or with a button whose popovertarget is the panel’s ID.
• The popover stays open while the visitor types in the cart’s fields and while the lines change.
• Smootify does not animate a popover: it keeps the transitions you design.
• Unless the cart is in a dialog or a details, a popover anywhere inside smootify-cart, even in a line, makes Smootify open the cart as a popover. Keep other popovers out of the cart.

More in Popovers.

With your own interaction

When none of the above is inside smootify-cart, you can build the panel with Webflow interactions. Give one element data-trigger="open" and another data-trigger="close", and make interactions that show and hide the panel when they are clicked. When Smootify needs to open or close the cart, for example after an add, it clicks them.

Before you publish

On your .webflow.io address, Smootify shows a debugger button. Its panel lists the elements that are out of place on the page.

Coming from 1.x

• In 1.x, the open and close buttons worked only with a dialog or a details. In 2.0 they work with every way, and a popover is a new way.
• cart="compare-at-total" now adds up every line, including the lines at full price, so the crossed-out total is correct.