Cart drawer

What is the cart drawer?

The Canopy Cart drawer is a convenient cart experience that allows customers to view and manage their shopping cart without leaving the current page. The cart drawer has two styles - a slide out drawer and a docked cart drawer that is always visible on larger screens. On mobile the drawer will slide up from the bottom of the page.

The cart drawer displays key cart information such as the selected products, quantities, discounts and subtotal. It allows customers to review and make changes to their cart quickly, enhancing the overall shopping experience. The cart drawer in Canopy also provides upselling and conversion focused features like a total savings summary, Free shipping bar, a promotional image or video, and the ability to show both related products and hand-picked promoted products.

The cart drawer can be switched on by setting the Cart type to Drawer in Theme settings > Cart and selecting the behaviour After adding to the cart.

Choose the option Dock the cart drawer on large screens for a cart drawer that is always visible instead of a slide out cart. The docked cart drawer allows the customer to check their cart contents at a glance. It is slightly thinner than the slide out drawer so as to leave more space for products. This said, for stores wishing to show the maximum number of products on a collection or search page, a slide out drawer may be preferable. 

How to set up the cart drawer

Cart header

Canopy provides the option to Show link to the cart page at the top of the cart drawer on all screen sizes. This gives customers the option to view and checkout via the full cart page even when using the drawer and direct checkout button. This affects the possible purchase flow.  As with the Show checkout button setting, be sure to consider making the settings consistent if using both the cart drawer and cart page. 

Cart items

Choose to Show vendor if the original brand is a key selling factor for the store.

Show backorder text is used to indicate to customers that an item is currently out of stock but is will be shipped when it is back in stock. This setting only displays the text for products which have Shopify inventory tracking enabled, and have been set so they can be purchased when out of stock.

Cart summary

The Canopy cart summary is an important part of the cart drawer and is configurable. It shows the subtotal and the cart or checkout buttons plus options to show an empty cart button, an order note, shipping/tax notice, terms and conditions link, total savings and a shipping costs calculator. 

The cart drawer can hold many items, and to enhance the shopping experience for your customers, you can enable settings that make the checkout buttons remain visible while customers scroll through the cart contents. This cart summary can either be positioned at the Top or the Bottom of the cart drawer with the option to Stick the cart summary on large screens and/or Stick the cart summary on mobile.

The two main use cases for these sticky settings are:

• Enabled: The main button(s) remains fixed so that the customer always the option to view cart/checkout/use additional checkout options regardless of scrolling the list of products in the cart drawer.
• Disabled: The main button(s) move with the content as you scroll. This option can be preferable if additional checkout buttons are shown, particularly on mobile or if customers are using a number of different direct payment methods (Google pay, Apple pay, Shop pay etc.)

Show 'Empty cart' button

To speed up management of the cart drawer, it's also possible to show an empty cart button on large screens and/or on mobile. This button will be shown above the Checkout/View Cart button and will, as the name suggests, provide a one click setting to clear the cart.

Show checkout button

Some apps, such as those for selecting delivery time slots, may only integrate with the shopping cart page, not the cart drawer. In such instances, deselect the Show checkout button, directing users to the shopping cart page (and the app) before checkout. As with the Show link to cart page setting, be sure to check settings are consistent if using both the cart drawer and cart page. 

Terms and conditions link

Add a checkbox with a link to a selected page showing terms and conditions.

Cart items

Choose to Show vendor if the original brand is a key selling factor for the store.

Show backorder text is used to indicate to customers that an item is currently out of stock but is will be shipped when it is back in stock. This setting only displays the text for products which have Shopify inventory tracking enabled, and have been set so they can be purchased when out of stock.

Related products

Related products are a great tool for cross-selling. These product recommendations change dynamically based on cart content and the settings chosen in the Shopify Search & Discovery app. They are shown in the Cart drawer and Cart page and controlled using the settings in Theme settings > Cart. Refer to the Cart page guide for more. 

Promoted products

Promoted products are useful for cross-store promotions and where there is a desire to highlight a specific product or push a specific range of products. Promoted products are different to related products in that the selection of products shown is fixed.

Canopy provides some choices both on the presentation of Promoted products. Set the visibility of the promoted products to show in an Empty cart, a Cart with items or Always. The Layout setting controls how the products will be displayed (carousel or list). 

The ability to show products in an Empty cart drawer is another key difference when compared to related products.

Media promotion

The shopping cart drawer provides a convenient and efficient way for your customers to review the products in their cart. It is also an opportunity for showcasing additional sales information or advertisements. To maximize the impact, these advertisements can be displayed even before customers have added items to their cart.

The Canopy theme includes the option to add an image or video and text to the bottom the cart drawer using the Media promotion settings. Choose to Always show the advert or restrict it to an Empty cart, or a Cart with items. The theme includes a variety of settings to allow control of the Text size and Text alignment, Image height, Button style and more.

FAQs

How do I change my cart icon?

To change the icon in the Canopy theme, go to Theme settings > Cart > Cart icon. 

Why doesn't the cart drawer open when I add something to cart?

Check the settings in Theme settings > Cart. Cart type should be set to Drawer and After adding to cart should be set to Open cart drawer or Open cart drawer on large screens only. 

The Canopy cart drawer will not slide open when using the Quick order block to add products to the cart or when using the Quick Quantity method to adjust the number of items in the cart. This is to ensure the purchase and quantity adjustment process is as rapid as possible.

How do I turn off related products in the cart drawer?

Go to Theme settings > Cart > Related products. There is one setting to manage the behavior and layout of these product recommendations in both the cart page and cart drawer. The selection of Related products is managed in the Shopify Search & Discovery App.