Cart drawer and cart page

Fine Print has two carts: a drawer that slides in from the side of any page, and the cart page at your store’s /cart address. Both show the cart as an order register: numbered lines, then ledger lines that add up to the total, then products to add to the order.

Choose the cart type

Cart type in Theme settings > Cart decides where shoppers go when they add a product or click the cart link in the header:

• Drawer, the default, opens the cart drawer over the page they are on.
• Page takes them to the cart page. The cart drawer is turned off, so the cart page is the only cart.

The cart drawer

With Cart type set to Drawer, adding a product opens the drawer, whether from the product page, quick view, a product card, the collection register or a set. The cart link in the header opens it too. On the cart page itself the drawer stays closed, since the page shows the change.

The drawer is the Cart drawer section in the Overlays group. To work on it, open the theme editor and select Cart drawer in the sidebar. The drawer opens in the preview while it is selected. Its one setting is the color scheme. What it shows comes from the cart and from Theme settings > Cart.

When the cart is empty, the drawer shows “Your cart is empty”, a “Continue shopping” button to all products, and links to the first three items of your main menu, the menu with the handle main-menu.

The cart page

The cart page uses the Cart section. Layout places the ledger and checkout beside the lines with Two columns, the default, or under them with One column. The heading shows “Cart” with the item count, and a “Continue shopping” link leads to all products.

Open the cart page from the page menu at the top of the theme editor.

The order register

Each line of the cart is a numbered row, 01, 02 and on, under the columns No., Item, Qty and Price.

• The Item column shows the image, the product title, each option’s name and value, such as “Size · 50 ml”, and the subscription plan for items bought with one. It also lists line item properties added by an app or a form, except names that start with an underscore, each discount Shopify applied to the line, and the components of a Shopify Bundles product.
• The Qty column holds a quantity stepper and a “Remove” link.
• The Price column shows the line price, the compare-at price struck through when it is higher, and the unit price, such as a price per 100 ml.

Products added together as a set count as one entry, with the set’s name, its item count, its price and a “Remove set” button. The Build a set guide covers sets.

Quantity changes

Each press on the stepper updates the line and the totals in place, and screen readers hear the new quantity. When a shopper asks for more than you have in stock, Shopify caps the line and the row says “Only 3 left. You have 3 in your cart.” When the cart can’t be updated, for example because the connection dropped, a message at the top of the lines says so.

On the cart page the stepper and “Remove” also work without JavaScript, reloading the page.

The ledger

Under the lines, the ledger adds up the order:

1. “Subtotal”, the price of the items.
2. Each order discount by name, with its amount.
3. The free shipping line, when you set a threshold.
4. A line on taxes and shipping, which follows your store’s tax settings: “Taxes included. Shipping calculated at checkout.” or “Taxes and shipping calculated at checkout.”
5. “Total”.

The cart has no field for discount codes. Shoppers enter codes at checkout.

Free shipping line

The free shipping line tells shoppers how much more they need to spend, such as “$12.00 to free shipping”, and reads “Free shipping reached” with a check mark once they reach it.

1. In the theme editor, open Theme settings > Cart.
2. Enter the amount in Free shipping threshold, in your store’s currency.

Leave the field empty to hide the line. The line compares the threshold to the cart total. For shoppers browsing in another currency, Fine Print converts the threshold with Shopify’s exchange rate and shows the amount in their currency.

The line only displays progress. It does not change what shipping costs at checkout. Set up the free shipping rate itself in Shopify, at the same amount. See Shopify’s guide to shipping rates.

Note and checkout

Under the ledger, “Add a note” opens a text field for instructions to you. In the drawer the note saves as the shopper types. On the cart page it saves with the “Update” button under it or when the shopper checks out.

The “Check out” button follows, with Shopify’s Shop Pay Installments message above it when your store offers it. Shopify’s accelerated checkout buttons, such as Shop Pay or PayPal, show under it when your payment settings offer them. See Shopify’s guide to accelerated checkout buttons.

Add to this order

Under the heading “Add to this order”, both carts list products as numbered rows that carry on from the cart lines. A product with one variant has an “Add” button. A product with several variants has a “View” link to its product page.

Add-on product

The add-on is one product you pick, such as a sample, gift wrap or a refill.

1. In the theme editor, open Theme settings > Cart.
2. Choose the product under Add-on product.

The add-on shows in the drawer and on the cart page until the shopper adds it. In an empty cart it shows under the heading “Start with this”. It hides while the product is sold out or unavailable.

Pairings

Under the add-on, the carts show up to three complementary products for the item added last. The add-on and products already in the cart are left out, so fewer can show. They come from the complementary products you pick in Shopify’s Search & Discovery app:

1. From your Shopify admin, go to Apps > Search & Discovery.
2. Click Product recommendations, choose a product, and add its complementary products.
3. Save.

Shopify does not pick complementary products for you, so a product with no picks shows no pairings. See Shopify’s guide to product recommendations. The same picks fill the Complementary products block on the product page.