Store pages
Cart
Choose a cart drawer or cart page in Loco and set up the order note, gift wrapping, the free shipping bar, accelerated checkout, discounts and subscriptions.
Loco has two places where customers review their cart: a drawer that slides in from the side, and the cart page. Most cart options are in Theme settings > Cart, and the cart page has a few of its own in the Cart section.
Cart type
In the theme editor, open Theme settings > Cart and choose Cart type:
- Drawer: Add to cart opens the cart in a drawer, and the cart key in the header opens it too. Customers keep their place on the page. This is the default.
- Page: Add to cart confirms on the button, and the cart key in the header goes to the cart page.
The cart page is always available at your store's /cart address, whichever type you choose. The drawer has a View cart link to it.
To edit the drawer in the theme editor, click Cart drawer in the sidebar. It is listed while Cart type is Drawer, and selecting it opens the drawer. It has no settings of its own: it follows Theme settings > Cart.
Theme settings for the cart
| Setting | What it does | Default |
|---|---|---|
| Cart type | Drawer or Page. | Drawer |
| Free shipping threshold | The order total for free shipping. Set to 0 to hide the progress bar. See Free shipping progress bar. | 0 |
| Show cart note | Shows the order note in the drawer and on the cart page. | On |
| Gift wrap product | The product a customer adds with the gift wrap checkbox. See Gift wrapping. | Empty |
Cart page settings
Open the cart page from the page selector at the top of the editor (Cart) and click Cart in the sidebar.
| Setting | What it does | Default |
|---|---|---|
| Show cart note | Shows the order note on the cart page. Turned off, it hides the note on this page only. Show cart note in theme settings hides it everywhere. | On |
| Show gift wrap | Shows the gift wrap checkbox on the cart page. Choose the product in theme settings under Cart. | Off |
| Show dynamic checkout buttons | Shows accelerated checkout buttons on the cart page. The cart drawer always shows these buttons. | On |
| Show recommendations | Shows product recommendations on the cart page. The cart drawer shows its own recommendations. | On (Roster: Off) |
| Empty cart collection | Products to show on an empty cart page when Show recommendations is on. Leave empty to use all products. | Empty |
| Color scheme | The color scheme of the section. | Scheme 1 |
| Section spacing | Small, Medium or Large. | Medium |
The Cart section also accepts app blocks and a Custom Liquid block. Click Add block in the section to add one.
Order note
With Show cart note on, customers see Add a note in the cart. It opens a field labeled Note for the store, and the note saves when they leave the field. You see it in the order's notes in your Shopify admin.
To show the note in the drawer but not on the cart page, leave the theme setting on and turn off Show cart note in the Cart section.
Gift wrapping
Gift wrapping is a regular product that the theme adds to the cart when a customer checks Add gift wrapping. You decide its name, price and image.
- In your Shopify admin, go to Products and click Add product.
- Name it, for example "Gift wrapping", set the price and add an image.
- Give it a single variant. The theme always adds the first available one.
- Make sure it stays available: either do not track its inventory, or keep it in stock.
- Make the product available on your online store and save.
- In the theme editor, open Theme settings > Cart and choose the product in Gift wrap product.
- To show the checkbox on the cart page too, select the Cart section and turn on Show gift wrap.
In the drawer, the checkbox appears as soon as you choose the product. Its price shows next to it. When checked, a Gift message field opens. The message is saved with the order and shows under additional details in your Shopify admin.
The gift wrap product is not repeated as a separate line in the cart: the checked box stands for it. If a customer adds it from its product page, or adds more than one, it shows as a normal line. When the product is sold out, the checkbox cannot be checked.
The gift wrap product is a normal product, so it can also appear in collections and search. Leave it out of your collections if you do not want customers to find it there.
Free shipping progress bar
The bar shows customers how far they are from free shipping, for example "You’re $12.00 away from free shipping", and then "Free shipping reached". It appears at the top of the drawer and in the order summary on the cart page.
The bar only shows the progress. It does not make shipping free. You need a shipping rate that matches it:
- In your Shopify admin, go to Settings > Shipping and delivery.
- In your shipping zones, add a free rate with a condition based on the order price, with a minimum equal to your threshold.
- In the theme editor, open Theme settings > Cart and enter the same amount in Free shipping threshold, in your store's default currency. For example, enter 50 for $50.
- Click Save.
The bar counts the cart total after discounts. For customers shopping in another currency, the theme converts the threshold automatically. Check that the free rate in those markets uses a matching amount, so the bar and checkout agree.
Set Free shipping threshold to 0 to hide the bar.
Accelerated checkout
Accelerated checkout buttons, such as Shop Pay, PayPal, Apple Pay and Google Pay, let customers skip parts of checkout. Which buttons appear depends on the payment methods you turn on in Settings > Payments and on the customer's device.
- In the cart drawer, they always show under Check out.
- On the cart page, turn them on or off with Show dynamic checkout buttons in the Cart section.
- On the product page, use Show dynamic checkout buttons in the Buy buttons block. See Product page.
The theme matches the buttons' height and corners to your other buttons. Their colors and logos come from the payment providers.
Discounts
The cart shows discounts that already apply:
- Automatic discounts and discounts on a product show under that cart line with their name and the amount taken off. The line shows the original price crossed out next to the new price.
- Discounts on the whole order show in the summary with their name and the amount taken off.
Customers enter discount codes at checkout. The cart has no code field. A code applied through a shareable discount link shows in the cart once it applies to the items.
The cart total is labeled Estimated total, because taxes, shipping and codes can still change it at checkout.
Subscriptions and pre-orders
When a customer buys a product with a selling plan from a subscriptions app, the cart line shows the plan's name. If the plan has a lower price than a one-time purchase, the saving shows under the line with the name of the purchase option, and the original price is crossed out.
A pre-order line shows a calendar icon and the plan's name. See Pre-orders for when the theme treats a product as a pre-order.
Gift cards sent to someone else show the recipient's name or email, the send date and the message on the cart line.
Cart recommendations
- In the drawer: "You may also like" loads when the drawer opens and shows up to 2 products. They are the complementary products you set in the Search and Discovery app for the first item in the cart, or related products of that item when it has none.
- On the cart page: with Show recommendations on, the page shows up to 4 related products of the first item in the cart, from Shopify's recommendations. New stores may see none until Shopify has enough order data.
- On an empty cart page: with Show recommendations on, the page shows up to 4 products from Empty cart collection under Start with these, or from all products when no collection is chosen.
Products already in the cart, sold-out products and the gift wrap product are left out.
Related pages
- Theme settings for all theme-wide options
- Product page for gift cards, purchase options and the Buy buttons block
- Honest promotions for the popup with a discount code