What is the cart?
The cart page is a vital part of the customer journey where your customers can review and finalise their selection of products before proceeding to the checkout. A well-designed cart page helps ensure a smooth and positive shopping experience, with information about promotions, shipping information and payment options. The Canopy cart allows customers to easily add products or change quantities, while providing a clear overview of discounts, total savings and subtotals. Canopy also includes features to enhance the cart page aimed at boosting conversions and increasing average order value.
How to set up the cart
The cart behavior is controlled by settings found under Theme settings > Cart. These are combined with additional cart page and cart drawer specific settings to configure the purchase process.
Canopy has three cart experiences for customers, the cart page, covered in this guide, and two distinct styles of cart drawer covered in our cart drawer guide.
Steps
- Open the Theme editor and go to Theme settings > Cart.
- Choose a preferred Cart icon.
- Use the Cart type setting to select Drawer or Page as the default cart experience for customers.
- The After adding to cart setting controls what action is taken after a customer adds something to their cart (see below).
'After adding to cart' setting
This setting controls what action is taken after a customer adds something to their cart.
- Open cart drawer: When a customer adds something to their cart, the customer will remain on their current page, and will be able to review their cart within the drawer. If the cart drawer is not already shown, it will slide in to view.
- Open cart drawer on large screens only: When a customer adds something to their cart, the customer will remain on their current page, and will be able to review their cart within the drawer. On smaller screens, the cart drawer will not automatically slide into view to avoid disrupting the purchase experience.
- Go to the cart page (with quantity check): When a customer adds something to their cart, the theme code will firstly verify if the selection is valid (e.g. they haven't added too many of that product to their cart). Following a successful check, the customer will be redirected to the cart page.
- Do nothing: When a customer adds something to their cart, the items will be added to the cart.
Tip
Empty cart shopping link
This setting is used to select where the Start shopping button will direct a customer when they are viewing an empty cart.
Total savings
The Canopy cart includes the option to highlight the total amount the customer has saved from on sale items and automatic discounts. Select the option Show total savings and pick a preferred color to highlight the amount saved above the subtotal.
Related products
Dynamic recommendations are populated automatically by a Shopify algorithm that is based on a customers cart contents and shopping behavior. The items displayed will change and improve over time as the Shopify feature improves its algorithm. It is possible to review and edit this list of related products using the Shopify Search & Discovery app. These recommendations for Related products can also be turned off by going to Theme settings > Cart > Related products.
Canopy provides some options on the presentation of these Shopify curated products. The Maximum products to show setting limits the amount of products shown to the selected number, while the Layout setting controls how the products will be displayed (carousel or list).
Cart shaking
Canopy has an animated cart icon to encourage customers to checkout. Enabling this feature will mean that every few page changes, the cart icon will shake, reminding customers that they have items in the cart and potentially encouraging customers to interact with the cart icon and consequently purchase their items.
Free shipping notice
Refer to Free shipping bar guide for more information on setting up the free shipping feature in Canopy.
Cart page
The cart page is a dedicated page for customers to review and manage the items they have added to the shopping cart before proceeding to checkout. This page can be configured and customized like other pages of the store using the large range of sections supplied in Canopy. It also includes an additional cart announcement option helping to create a more user-friendly experience.
Steps
- Open the Theme editor, and select Cart from the dropdown at the top.
- Click the Cart section on the left hand side.
Heading
Canopy provides the option to hide the default cart title. If the cart page title is hidden, it is recommended that another section on the cart page includes a heading (H1) that can be picked up by search engines for SEO and accessibility purposes.
Editing the default heading text is done through the Edit default theme content option that can be accessed through the theme area in the Shopify admin, or through the additional options in the Theme editor.
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.
Order summary
The order summary settings control such items as:
- Show order note which permits customers to attach notes on the order.
- Show tax status and shipping policy link which displays any tax status and shipping policy links (required in some EU countries).
- Show additional checkout options is the option to enable Shopify's dynamic checkout buttons.
- The option to include a Terms and conditions link by using the page picker or a dynamic source (metafield). When added, customers will be required to accept the terms and conditions before proceeding to the checkout.
Important
Cart announcement
Advertise promotions, encourage further purchases or communicate important information using a Cart announcement panel on the cart page. This announcement text box can be positioned Under page title or Under items and uses the colors chosen for Content panels.
Shipping calculator
The Canopy theme includes a Shipping calculator feature that uses the shipping and delivery rates set out in the Shopify admin under Settings > Shipping and delivery.
FAQs
Where are the quick buy settings?
Settings for the quick buy in the Canopy theme are managed under Theme Settings > Product cards > Quick buy.
How do I ensure customers always go to the cart page even if the store uses a cart drawer?
Some apps, such as those for selecting delivery time slots, may only integrate with the shopping cart page and not the cart drawer. In such instances, deselect the Show checkout button in the Cart drawer section settings to ensure that customers are directed from the cart drawer to the shopping cart page (and the app) before they checkout.
How do I change my cart icon?
This is in Theme settings > Cart.
How do I turn off related products on the cart page?
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.
Can't find what you're looking for?
Our support staff are here to answer your queries, so don't hesitate to write to us!
Contact us