Cart drawer

Drawer style cart option in Pipeline

The Cart Drawer in Pipeline when selected brings easy access to the cart details with full controls for the shopper to manage items in their cart before proceeding to checkout. The Check-out button at the bottom displays their order subtotal.

This popular style for mobile and desktop shoppers allows customers to quickly view and manage their cart items without disrupting their shopping flow and also simplifies the checkout process.

Configuring the drawer

The Cart drawer options are configured under the Overlay section in your Theme Editor.

  • In the Overlay group, click on Cart Drawer

When you click on "Cart Drawer" in the Overlay group, you'll have options to customize the Drawer:

Two separate Cart settings

  • The Cart Drawer (orange highlight) under the Overlay group has settings to manage the Cart Drawer and the Popup Cart styles in Pipeline.

  • The Cart (gray highlight) under the Template group has a separate set of settings to manage only the Page style cart. The Page version can incorporate additional sections.

Options

The Cart Drawer includes a few features you can activate and customize for your customers:

  • Estimate shipping An accordion-based shipping cost calculator with country and region lookup. Prices are based on your shipping prices configured in the main Shopify Admin settings.

  • Show quantity selectors Toggle to show or hide the quantity value and buttons

  • Show product vendor Toggle to show or hide the vendor name

  • Show Cart notes Include a mini-input form for customers to add additional notes with their order like engraving details or custom information regarding products ordered.

  • Free Shipping message This dynamic message informs customers how close they are to qualifying for free shipping. The threshold is set in the Theme Settings -> Cart. The message text is configured in the Cart section settings along with a toggle to show or hide. When the threshold is reached, an animated congratulations message is displayed.

  • Custom Cart message A badge-styled message box where you can display a coupon code or other short important information.

  • Colors Change the background color of the Cart drawer

  • Additional Checkout buttons Show or hide the additional payment methods like Apple Pay, Google Pay, Amazon Pay, and PayPal. This is not recommended for the Cart Drawer due to the size these buttons occupy. When unchecked, these buttons will appear on the Checkout page.

The Empty cart link has been moved to the Theme Settings -> Cart

You can customize the default link for shoppers to use if their cart is empty when viewing the cart. This is an opportunity to send them to a collection with special promotions or featured products.

Last updated