Quotes and B2B

With quotes, the cart does not go to checkout: it sends a request. You receive a draft order in Shopify, with the lines, variants and quantities the customer chose. You set your price, send the invoice, and the customer pays it in Shopify’s checkout. This page builds the quote cart and covers what Smootify shows to business (B2B) customers.

How it fits together

A quote is a cart. You build it as in Build the cart, then choose one of two ways:

What Smootify needs:

• a smootify-cart with its Form Block, as for any cart;
• a Text field whose Name setting is email, so the draft order has an address to send the invoice to.

What is up to you: the layout, the other fields you ask for, and the texts. Write them as a request, not as an order.

1. Build a quote cart

In a quote cart, the parts of the Form Block change meaning: the Success message is not the empty cart here. Two conditions work inside smootify-cart, cart-condition="items-in-quote" and cart-condition="no-items-in-quote". The cart’s four states:

2. Or add a quote button to a normal cart

In a cart without data-draft, add a Custom element with the tag button, the custom attribute type="submit" and the custom attribute name="draft-order", inside the Form next to the checkout button. The email field goes in the same Form.

A Webflow Button cannot do this: it publishes a link, and a link does not submit the form.

3. What the draft order holds

Each field of the form has its place in the draft order:

• The lines keep their properties, such as an engraving or an uploaded file. A Magic Box arrives as the products inside it. A Shopify bundle arrives as its components, with a “Bundle” detail listing them.
• The customer is the Shopify customer with the email in the form. If there is none, Shopify creates one with that email. Without an email field, a logged-in customer’s account is used.

Subscription lines are left out: a draft order does not carry the selling plan. See Subscriptions.

4. Send the quote from Shopify

In your Shopify admin, the request is under Orders > Drafts, with the discount codes the customer had applied to the cart. Change the prices or add a discount, then send the invoice. The customer gets an email with a link to Shopify’s checkout, at the price you set. Discount codes can still be used there.

To get an email for each new request, import the ready-made Quote request notification workflow in the free Shopify Flow app. It reacts when a draft order is created: after importing it, replace the default email with the address that should receive the requests.

5. Business customers (B2B)

Shopify’s B2B features, with companies, catalogs and quantity rules, are on every paid Shopify plan. Outside Shopify Plus, a store can have at most 3 active B2B catalogs, and it needs Shopify’s new Markets: see Shopify’s B2B plans. When a customer who belongs to a company logs in with customer accounts, Smootify asks Shopify for products and the cart as that company’s buyer, using the company’s first location. The prices and quantity rules Shopify sets for that company then apply on the site.

Show the company. company="name" shows the name of the customer’s company, anywhere on the page. company-metafield="…" shows a metafield of the company, such as a customer code or the name of their sales contact, and if-company-metafield shows an element only when that metafield has a value. For a customer without a company, these elements are removed, and so are the if-company-metafield elements for a visitor who is not logged in. unless-company-metafield does the opposite: it shows its element when the company has no value for that metafield, and to guests, who have no company. Use it for the guest’s Add to cart next to the company’s Add to quote list. See customer attributes.

Show the quantity rules. Inside smootify-product:

• variant="quantity-min": the smallest quantity that can be ordered;
• variant="quantity-max": the largest, hidden when there is no maximum;
• variant="quantity-increment": the pack size the quantity must be a multiple of.

Buy for some, quote for others. Put the quote button inside an element with customer-tagged="wholesale" (use your own tag). Only logged-in customers with that tag see it. Everyone else keeps the checkout button.

To order the same list again later, customers can use Buy again on a past order: see Orders and buy again. A minimum order value needs a developer: see Filters.

Coming from 1.x

window._filterDraftOrderData still works but is deprecated. The draft_order_data filter replaces it and applies to every draft order, not only quotes: see Filters.

Before you publish

On your .webflow.io address, press Alt+⇧ Shift+D (⌥ Option+⇧ Shift+D on a Mac) to turn on Smootify’s debugger, then send a test request and open it in Shopify.