Cart drawer
When a customer adds a product, the cart drawer slides in with the items, an optional free shipping bar, gift wrapping, suggestions and the checkout buttons. You can switch to a cart page instead in Theme settings.
How to set it up
Step 1: Choose drawer or page
- Open Theme settings > Cart and set Cart type to Drawer or Page. Order notes and the free shipping bar are set there too.
Step 2: Set up the drawer
- Under Overlays, click Cart drawer. It opens in the preview.
- Turn on the Show shipping estimate (1) and Show discount code field (2) tools.
- Under Recommendations, choose Products to suggest (3): products that pair with the cart, a collection, or none.
- Under Checkout, choose the footer layout, and whether to show the subtotal, accelerated checkout buttons and payment icons.
Step 3: Offer gift wrapping (optional)
- Create a product for the wrapping (for example "Gift wrap", with its price).
- In Gift wrapping, pick it as Gift wrap product and choose whether it applies to each item or the whole order.
- To offer it on some products only, tag them
gift-wrapor set thecustom.gift_wrapmetafield to true.
Step 4: Set up the free shipping bar
- In Theme settings > Cart > Free shipping bar, turn it on, set the Threshold in your default currency, the messages, icon and bar style.
Settings reference
Cart drawer
| Tools | |
|---|---|
| Show shipping estimate | Customers enter a country and postal code to see your shipping rates. |
| Show discount code field | Turns this on or off. |
| Gift wrapping | |
| Gift wrap product | Create a product for wrapping, then pick it here. A switch in the cart adds or removes it. |
| Gift wrapping applies to | Each item adds one wrap per product line, labelled with the product it is for. Options: Each item, The whole order. |
| Offer gift wrap on | Choose products by tagging them gift-wrap, or by setting a custom.gift_wrap true/false metafield. Options: Chosen products only, Every product. |
| Label | |
| Text | |
| Recommendations | |
| Products to suggest | Pairings come from the Search & Discovery app, with related products as a fallback. The collection and the heading are set in Theme settings > Cart. Options: Products that pair with the cart, A collection, None. |
| Show recently viewed products | Turns this on or off. |
| Progress line | Options: Desktop and mobile, Desktop only, Mobile only, Off. |
| Checkout | |
| Footer layout | Side by side puts View cart beside Checkout and the note, shipping and discount tools next to the tax line. Options: Buttons side by side, Stacked. |
| Show subtotal | The items' price before discounts, above the total. |
| Show accelerated checkout buttons | Turns this on or off. |
| Show payment icons | Turns this on or off. |
| Empty cart | |
| Button label | |
| Button link | Where the link goes. |
| Quick links | A menu from Content > Menus. |
Cart
| Cart type | Options: Drawer, Page. |
|---|---|
| Enable order notes | Turns this on or off. |
| Free shipping bar | |
| Enable free shipping bar | Add the Free shipping bar block to show it in product info, featured product and quick view. |
| Threshold | In your store's default currency. |
| Show in cart drawer | Turns this on or off. |
| Show on cart page | Turns this on or off. |
| Progress message | Use {amount} for the amount left to spend. Leave empty for the default. |
| Success message | Leave empty for the default. |
| Icon | Options: None, Truck, Box, Gift, Bag, Tag. |
| Icon position | Options: Rides the bar, Before the message. |
| Message alignment | Options: Left, Center. |
| Bar fill | Options: Solid color, Gradient. |
| Bar color | Leave empty to use the text color. |
| Bar gradient | |
| Track color | Leave empty for a soft tint of the text color. |
| Bar thickness | Slider. |
| Animated stripes | Turns this on or off. |
| Show background | Turns this on or off. |
| Cart recommendations | |
| Accessories collection | Shown in the cart drawer when the cart isn't empty. |
| Heading | |
Section width, corners, padding, color scheme, divider and visibility work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.
How it works
- Pairings come from Shopify's Search & Discovery app, with related products as a fallback.
- The free shipping bar converts the threshold to the customer's currency.
- The empty cart shows a button and quick links you choose.
Troubleshooting
The drawer doesn't open after adding to cart.
Check that Theme settings > Cart > Cart type is Drawer.
Gift wrap doesn't show for a product.
With Chosen products only, the product needs the gift-wrap tag or the custom.gift_wrap metafield set to true.