Pebble Theme
Global Sections

Cart drawer

3 min read
image

Cart drawer (also known as the slide-out cart, or side cart) allows customers to view and manage their shopping cart without leaving the current page.

Overall, a cart drawer is useful for improving the user experience and increasing conversions to an online store. By giving an enhanced customer experience, you can reduce the cart abandonment rate of your store.

How to enable the Cart drawer

Steps:

  1. From the theme editor (Customize), navigate to Theme settings > Cart.
  2. Set the Type as Drawer.
  3. Save the changes.

Learn more about Cart settings:

Cart
image

How to customize the Cart drawer

Steps:

  1. In the theme editor (Customize), scroll down to the Overlay group area.
  2. Select the Cart drawer section.
  3. Make necessary changes.
  4. Click Save.
image

The Cart drawer settings are organized into two main sections:

  • Cart summary
  • Cart recommendations

Each section is described below.

Cart summary

Color scheme

image

Choose a color scheme (e.g., Scheme 11) to define the background, text, and accent colors used in the cart drawer summary.

To edit the color schemes, go to Theme settings > Colors
image

Show separator line

image

Toggle this option to show or hide the dividing line between the cart contents above and the cart drawer summary.

image

Cart recommendations

Enable cart recommendations

image

Turn this on to display recommended products inside the cart drawer.

Product recommendations

image

Select up to 10 products to display as curated recommendations in the cart drawer.

If you leave this list empty, the cart drawer will automatically display AI-powered product recommendations based on the items currently in the customer’s cart.

For more information on how Shopify generates automated recommendations, refer to Shopify help guide.

Heading

image

Customize the title shown above the recommendations section (e.g., Complete The Look).

image

Number of products to show

image

Use the slider to choose how many products appear in the recommendations carousel (Range: 1 – 10 products).

Product title line limit

image

Choose how many lines of text are allowed for product titles. This is useful if you want a more compact layout.

image

Show swatches

image

Toggle to display color or material swatches under each recommended product (if available).

image

Show product vendor

image

Displays the vendor name (brand) in each recommended product.

image

Show product types

image

Shows the product type (e.g., Pants, Dress, Tops) in each recommended product.

image

Show quick add

image

Adds a "Quick Add" button so customers can add recommended products directly to their cart without leaving the drawer.

image
Last updated