HYPER theme
Try Hyper freeResourcesOther solutions
  • What is Hyper theme
  • Changelog
  • Refund policy
  • Support policy
  • Getting started
    • Install Hyper theme
    • Set up my store as Hyper demo
    • Update Hyper theme
    • Theme license & Transfer
  • Page's global sections
    • Announcement bar
    • Top bar
    • Header
      • Mega menu
      • Use Country/ Region selector
      • Use Language selector
    • Footer
    • Cart drawer
    • Popup
    • Product compare
    • Quick view
    • Spotlight picks
  • Theme sections
    • Banner with hotspots
    • Before/after image slider
    • Brand logos 🔥
    • Button group
    • Collapsible tabs
    • Collection list
    • Collection list slider
    • Collection tabs
    • Contact form
    • Countdown timer
    • Custom content
    • Custom liquid
    • Email signup
    • Favorite products 🔥
    • Featured blogs
    • Featured collection
    • Featured countdown timer 🔥
    • Featured product
    • Horizontal products list 🔥
    • Image with text
    • Image with text overlay
    • Image with text slider 🔥
    • Lookbook slider
    • Multicolumn
    • Multicolumn with icon
    • Press 🔥
    • Products bundle 🔥
    • Promotion banner
    • Recently viewed products
    • Rich text
    • Shop the feed 🔥
    • Scrolling banner
    • Scrolling gallery images
    • Scrolling promotion
    • Slideshow
    • Tabs content
    • Testimonials
    • Testimonials masonry 🔥
    • Video
    • Video hero
  • Theme settings
    • General
    • Animations
    • Blog cards
    • Buttons
    • Cart
    • Color swatches
    • Colors
    • Currency format
    • Custom CSS
    • Layout
    • Logo
    • Product badges
    • Product cards
    • Product compare
    • Quick view
    • Search behavior
    • Social media
    • Typography
  • Collections & Products
    • Product page
      • Product template
      • Breadcrumbs
      • Product information
      • Quick comparision table
      • Quick order list
      • Related products
    • Collection page
      • Collection template
      • Collection banner
      • Product grid
    • Collections list page
  • Other pages
    • Blogs
    • Blog posts
    • Cart
    • Password
    • Search page
  • FAQs
    • Add Highlighted text to your Headings
    • Add gift wrap option to my cart
    • Combined listings app
    • Set up Local Pickup option
    • Set up quantity rules and volume pricing in B2B
    • Show Payment icons
Powered by GitBook
On this page
  • How to enable the cart drawer for your Shopify store
  • How to customize your cart drawer
  • General settings
  • Free shipping goal
  • Cart recommendation
  1. Page's global sections

Cart drawer

Set up Cart drawer for a seamless shopping experience

PreviousFooterNextPopup

Last updated 1 month ago

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 for your Shopify store

Steps:

  1. From the theme editor (Customize), navigate to Theme settings > Cart.

  2. Set the Cart type as Drawer.

  3. Save the changes.

How to customize your cart drawer

General settings

  • Show cart note: Allow customers to leave a note for their order.

  • Show shipping rates calculator: Display a tool that lets customers estimate their shipping costs before they proceed to the checkout page.

Free shipping goal

Enable this to display a progress bar indicating how much more the customer needs to spend to qualify for free shipping.

To have this work, make sure:

  • You enter the Free shipping minimum amount in Theme settings > Cart

Cart recommendation

The Cart recommendation presents complementary product recommendations upon cart addition. The recommendations are dynamic and based on the items in your cart. They change and improve with time.

You have set up your free shipping rates in Shopify admin.

The Free shipping goal is based on the store's primary currency. If customers switch to another currency, the goal will be calculated using Shopify market .

app is required to display product recommendations.

To learn more about the recommendation logic, see .

To customize the recommendation list displayed on your product page and cart recommendations, see

See how
exchange rates
Shopify Search & Discovery
Shopify's Recommendations
Shopify Help Center.