Discounts, notes and progress bars

This page adds parts to the cart you built in Build the cart: fields for discount codes and gift cards, the list of discounts, a note and other fields saved with the order, a free shipping progress bar and a countdown. Each part is optional. Add only the ones your store needs.

What the visitor types goes in fields of the cart’s <form>, and Smootify reads each field by its name:

1. Discount codes

The field and its button go inside the cart’s <form>.

1. Add an <input name="coupon">.
2. Add a <button data-action="coupon">. A click applies the code. Pressing Enter in the field does the same.
3. Optional: inside the button, an element with the attribute data-wait="Applying…" shows that text while the code is applied.

If the field is empty, the browser asks the visitor to fill it. Once the code is applied, the field is emptied.

A code in the link. A link to any page of your site with ?discount= and a code, such as /boxes?discount=WELCOME10, adds that code to the visitor’s cart when the page opens, with no cart element needed on the page: nobody has to type it. Use it in newsletters, ads and referral programs. The code is saved on the Shopify cart, so it stays on every page and visit until it is removed or the order is placed. You can send the link to a visitor whose cart is empty or under the code’s minimum: the code waits on the cart, also while other codes are typed or removed, and applies by itself once the cart qualifies. It shows in the cart="discount" list only from then. Removing it, or a new cart after an order, forgets it. A code that does not exist shows nowhere and does no harm at checkout.

Shopify’s discount links. The Shopify admin shares a link for each discount code, such as /discount/WELCOME10?redirect=/boxes, and Shopify Collabs gives its creators the same kind of link. On your site they work like ?discount=: Smootify puts the code in the cart, then takes the visitor to the page in redirect (or return_to). That page must be on your site, such as /boxes. Without it, or with an address on another site, the visitor goes to the home page. The other parameters of the link, such as utm_source, go along. A language prefix works too: without redirect, /it/discount/WELCOME10 ends on the Italian home page. On your site’s domain these links open your 404 page for a moment, so the site needs a 404 page of its own, src/pages/404.astro, that loads Smootify like every other page. Nothing else is needed: any page that loads Smootify reads the link.

A cart paid on an invoice. A cart with a chosen price (name your price, the product configurator) or sent as a quote becomes a Shopify draft order. The codes that apply to the cart go with it: the invoice opens with them already applied. Its own field still takes a gift card or another code.

Show the discounts. An element with cart="discount", anywhere inside smootify-cart, is a template, repeated once for each code that applies and once for each automatic discount on the order, such as “10% off orders over $100”. Inside it:

• discount="title": the code, or the name of the automatic discount;
• discount="amount": the amount, such as ”-$10.00”;
• a <button data-action="remove">: removes the code. An automatic discount cannot be removed, so Smootify removes its button.

<div>
  <input name="coupon" />
  <button data-action="coupon"><span data-wait="Applying…">Apply</span></button>
</div>
<div cart="discount">
  <span discount="title">CODE</span>
  <span discount="amount">-$0.00</span>
  <button data-action="remove">Remove</button>
</div>

Smootify gives the remove buttons of the discount and gift card lists type="button", so removing a code does not submit the cart form.

A discount shows in one of two places, depending on what it lowers:

Discounts on products. A code or automatic discount that lowers the price of products shows on the lines, not in this list: cart="subtotal" already has it off. To show it on a line, add an element with cart-item="discount" inside cart-item, with discount="title" and discount="amount" inside it. It is repeated once for each discount on that line.

2. Gift cards

Gift cards work the same way as codes, inside the cart’s <form>:

• an <input name="gift-card">;
• a <button data-action="gift-card">, which applies it. Pressing Enter in the gift card field does the same;
• an element with cart="gift-card": a template repeated once for each gift card applied. Inside it, gift-card="code" shows the end of the code, such as ”•••• 4F2A”, and gift-card="amount" the amount used, removed when the card covers nothing. A button with data-action="remove" removes the card.

A second gift card is added next to the first: it does not replace it.

To let visitors check what is left on a card, see Gift card balance.

3. A note and other fields

Every field in the cart’s <form> is saved with the order when the visitor checks out. In Shopify, you find them on the order, under its additional details.

• The note. Add a textarea, or an input for a short note, with name="note". Its text becomes the order note. When the cart already has a note, the field shows it.
• Other fields. Add any input, select, checkbox or radio button, such as a delivery day or a gift wrap option. Give it a data-name: that name is the name of the value saved on the order. These values are called cart attributes.

<textarea name="note" placeholder="A note for your order"></textarea>
<select name="delivery-day" data-name="Delivery day"><option value="Monday">Monday</option><option value="Friday">Friday</option></select>
<label><input type="checkbox" name="gift-wrap" data-name="Gift wrap"> Gift wrap</label>

How the fields behave:

• Saved at checkout. Smootify saves the note and the fields when the visitor clicks the checkout button, not while they type.
• Empty fields are not saved. A checkbox saves on when it is ticked. A select that allows several choices saves them in one value, separated by commas.
• Shown again. When the cart renders, text inputs, textareas, selects, checkboxes and radio buttons show the value already saved in the cart.
• Required fields. A field with the required attribute must be filled before the visitor can check out. The buttons that apply a code or a gift card skip that check.
• Attributes set by apps stay. At checkout the form saves only the attributes it has fields for. Cart attributes that an app or a script set, under other names, are kept. A field of the form, even empty, replaces the attribute with its name.
• Names Smootify keeps for itself. Fields named coupon, note, gift-card or quantity are never saved as cart attributes.

Files. With the Server plan, a file-input in the cart’s <form> uploads a file to Shopify and saves it with the order. See File uploads.

For developers, updateCartNote and updateCartAttributes do the same from code. The cart attributes Smootify writes itself are listed in cart attributes.

4. Free shipping progress bar

Add a free-shipping-bar element. It follows the cart wherever it is: in the mini cart, on the cart page or on a product page.

Give it one attribute:

• data-amount="100": free shipping from that amount, in every currency. Smootify compares it with the cart total after discounts.
• data-amount="EUR 100, USD 120, CHF 110": one amount per currency, for a store that sells in several markets. The currency code goes before or after the amount, with a dot for decimals and no thousands separator. A number without a code is the amount for the other currencies: EUR 100, USD 120, 150.
• data-quantity="3": free shipping from that number of items.

Inside it:

• data-prop="left" on a text element: what is still missing, as an amount or a number of items;
• data-prop="progress-width" on an element: Smootify sets its width to the share of the goal reached, from 0% to 100%;
• free-shipping-condition="needs-more" and free-shipping-condition="free-shipping": an element shown before and after the goal is reached.

<free-shipping-bar data-amount="100">
  <div free-shipping-condition="needs-more">Add <span data-prop="left">$0.00</span> for free shipping</div>
  <div free-shipping-condition="free-shipping">You get free shipping</div>
  <div><div data-prop="progress-width"></div></div>
</free-shipping-bar>

With data-amount="100", a cart of €65 and one of €120:

• The bar is hidden until the cart loads. Once the goal is reached, it has the class is-free.
• Past the goal, the width keeps growing above 100%. Give the parent of the bar overflow: hidden.
• With one number, data-amount is the same in every currency: 100 means $100 for one visitor and €100 for another. Write one amount per currency when they differ.
• When the visitor changes market, the bar follows the cart’s new currency.
• A currency with no amount in the list keeps the bar hidden, rather than showing a wrong goal.
• The bar only shows progress. The free shipping itself is a shipping rate or a discount you set up in Shopify, with the same amount.

5. Countdown

Add an urgent-cart-countdown element, with data-time set to the number of minutes, such as data-time="15". Inside it, data-prop="minutes" and data-prop="seconds" show the time left.

<urgent-cart-countdown data-time="15" data-on-end="clear">
  <div>Your cart is saved for <span data-prop="minutes">15</span> min <span data-prop="seconds">0</span> s</div>
</urgent-cart-countdown>

• When it starts. When the cart has items, the countdown starts and its end time is saved in the cart. It keeps running across pages and reloads, and does not start again when more products are added. It is hidden while the cart is empty.
• When it ends. The cart is emptied. With data-on-end="redirect", the visitor also goes to the page in data-redirect-to, or to the home page without it. data-on-end="clear", the default, only empties the cart.
• Where to put it. The cart is emptied by a page that shows the countdown. Put it in the navbar or the mini cart, so it is on every page.
• Seconds. They are written without a leading zero: 5, not 05. A design like “4 min 5 s” reads better than “4:05”.

Before you publish