How to Add a Shopify Slide Out Cart for Better Shopping
Creating a smooth shopping journey is essential for keeping customers engaged and encouraging them to complete their purchases. Every extra click, page load, or interruption can make the buying process feel less convenient, especially for mobile shoppers.
In this guide, you will learn how to add a shopify slide out cart (also called a cart drawer) using a compatible Shopify theme. We will cover where to find the setting in the Theme Editor, how to configure it, and how this built-in feature can create a cleaner, faster path to checkout without relying on an additional app.
What Is a Shopify Slide out Cart?
A shopify slide out cart is a cart interface (often called a cart drawer) that slides in from the side of the screen when a customer adds a product or clicks the cart icon. Instead of redirecting shoppers to a separate cart page, it lets them review what they selected while staying on the same product, collection, or homepage.
The drawer typically shows product names, images, quantities, prices, subtotal, and a clear checkout button. Depending on the Shopify theme, it may also include cart notes, discount messaging, shipping information, or product recommendations. Because shoppers can confirm their cart and keep browsing without losing their place, a slide-out cart often feels faster and more convenient, especially on mobile.
Why Use a Shopify Slide out Cart?
A Shopify Slide out Cart can improve the overall shopping experience by reducing unnecessary steps between product discovery and checkout. It is especially useful for stores where customers are likely to browse and add multiple products before completing their order.
Some of the main benefits include:
- Keeps customers on the current page: Shoppers can add items and review their cart without being sent to a separate cart page.
- Faster cart review: Key details like items, quantities, prices, and subtotal appear in one compact panel.
- Encourages continued browsing: Customers can close the drawer and keep exploring products without losing their spot.
- Fewer page loads: Reduces extra loading steps, which can be helpful on slower connections and mobile devices.
- Mobile-friendly cart management: A well-designed drawer makes it easier to edit quantities or remove items on small screens.
- Smoother path to checkout: A visible checkout button keeps the next step obvious when shoppers are ready.
- Modern storefront experience: Slide-out carts are common in modern ecommerce because they keep cart access quick and unobtrusive.
When properly designed and configured, a Shopify Slide-out Cart creates a more seamless connection between adding products, reviewing the order, continuing to shop, and eventually proceeding to checkout.
How to Add a Shopify Slide-out Cart Using a Themeshopy Shopify Theme
Before You Start
- Confirm your theme supports a cart drawer or shopify slide out cart option in Theme Settings.
- Make sure you have permission to edit themes in Shopify Admin.
- If you are switching themes, preview changes first so you do not disrupt your live storefront.
Adding a Shopify Slide-out Cart is easy when the feature is already built into your theme. Themeshopy, also available through Themestudio, offers two premium Shopify themes, Gravity and Soft, with built-in slide-out cart functionality.
Instead of installing a separate app, you can enable a shopify slide out cart directly from the Shopify Theme Editor when the feature is built into your theme. Install the theme, open Theme Settings, go to the cart settings, and select Drawer as the cart type. Both themes also include additional customization options to control the cart drawer appearance and what it shows to shoppers.
Step 1: Choose and Install a Compatible Themeshopy Shopify Theme
The first step is to use a Shopify theme that already supports the Shopify Slide out Cart feature. Themeshopy currently offers Gravity and Soft as premium Shopify themes with this functionality built into their theme settings.
Both themes are designed for modern ecommerce stores, but the overall styling and available settings may differ depending on the type of store you are building.
Gravity Shopify Theme
Gravity is a fashion-focused Shopify theme designed for merchants who want a feature-rich and flexible storefront. It can be suitable for businesses that want to showcase products using modern layouts while also providing customers with convenient shopping tools. One useful capability available within Gravity is its cart drawer functionality. Rather than depending on an additional cart application, merchants can configure the cart behaviour directly from the theme. Gravity also provides additional options for handling an empty cart drawer. This means that even when customers have not yet added anything to their cart, you can use the drawer space to show useful content or product recommendations.
Soft Shopify Theme
Soft is another premium Shopify theme available from Themeshopy or Themestudio. It includes a clean shopping interface along with several cart customization settings. Soft provides more detailed options for the Shopify Slide out Cart, including the ability to manage colors, cart notes, tax information, discounts, free shipping messages, and free shipping progress indicators. This can be particularly useful for merchants who want their cart drawer to do more than simply display added products. Once you have selected the theme that matches your store requirements, install it in your Shopify store and make sure it appears inside your Shopify Themes section.
Step 2: Open the Shopify Theme Editor
After installing Gravity or Soft, open your Shopify admin dashboard and navigate to your store's theme customization area.
Go to: Shopify Admin → Online Store → Themes
Locate the installed Gravity or Soft theme and click Customize. This will open the Shopify Theme Editor. The Theme Editor allows you to control the visual appearance, layout, sections, blocks, and general settings of your Shopify storefront without manually editing theme code. You may see options related to the homepage sections on the left side of the editor. However, the Shopify Slide out Cart is generally controlled through the global Theme Settings because the cart needs to work consistently across multiple pages.
This means customers should receive the same cart experience whether they add an item from:
- The homepage
- A collection page
- A product page
- A featured product section
- Search results
- Recommended products
- Other areas that support adding products to the cart
Because of this, you need to move away from individual section settings and open the main Theme Settings panel.
Step 3: Open Theme Settings
Inside the Shopify Theme Editor, find and open Theme Settings. Theme Settings contain global configuration options that affect your storefront across different pages and templates.
Depending on the theme, you may find settings related to:
- Colors
- Typography
- Buttons
- Product cards
- Layout
- Search
- Social media
- Animations
- Cart
- Cart drawer
- Checkout-related information
For the Shopify Slide-out Cart, look for the section called Cart and Drawer or a similarly named cart configuration area. Click this section to open the available cart options.
Step 4: Find the Cart Type Setting
Inside the Cart and Drawer settings, look for an option called:
Cart type: This setting determines how Shopify displays the customer's shopping cart after a product is added or when the cart icon is selected. Typically, the theme will provide options such as:
- Drawer
- Page
Selecting Page means customers will generally use a traditional standalone cart page. Selecting Drawer activates the Shopify Slide-out Cart experience.
To enable it, select: Cart Type → Drawer
Once selected, the theme will display the cart as a panel that slides into view instead of immediately sending the shopper to another page.
This is the core setting required to activate the feature in both Gravity and Soft. After enabling Drawer mode, you can move on to the additional theme-specific settings.
Configure the Shopify Slide out Cart in the Gravity Theme
Gravity provides extra settings primarily focused on what customers see when their cart drawer is empty. An empty cart is an important part of the customer journey because it represents a point where the shopper has opened their cart but has not yet selected a product. Instead of showing only an empty message, Gravity allows you to use this area to guide the shopper toward products they may want to purchase. Under the Gravity cart settings, you may see the following options.
Empty Cart Drawer
The Empty Cart Drawer settings control what appears when there are no products currently added to the customer's cart. Rather than leaving the drawer blank, you can use this area to provide helpful content and direct customers back toward products or collections.
Heading
The Heading setting allows you to customize the title displayed inside the empty cart drawer. For example, you could use headings such as:
- Your cart is empty
- Start shopping
- Discover our products
- Find something you'll love
- Ready to start shopping?
Keep this heading short and easy to understand. The main goal is to immediately communicate that the cart currently contains no products while encouraging further browsing.
Visible in Empty Cart
This setting lets you control whether selected content or recommendations should appear when the cart is empty. Enable it when you want to make better use of the empty drawer space. This can help transform the empty cart from a dead end into another product discovery opportunity.
Select Collections
Gravity allows you to choose specific collections that can be associated with the empty cart drawer. You may use this option to highlight:
- Best-selling products
- New arrivals
- Trending items
- Seasonal products
- Popular collections
- Featured categories
- Sale products
For example, if your store sells fashion products, you may choose to display your "Best Sellers" or "New Arrivals" collection. If you operate a beauty store, you might display collections such as "Skin Care Essentials" or
"Popular Products". The exact collection you select should depend on what you want customers to discover next.
Show Dynamic Product Recommendations
Gravity also includes an option to display dynamic product recommendations. When enabled, the theme may show recommended products inside the empty cart drawer based on available recommendation logic. This makes the drawer more useful because customers can immediately see products they might want to explore instead of manually returning to another page. Dynamic recommendations can be particularly effective for stores with larger product catalogs because they provide customers with additional product discovery opportunities. When configuring Gravity, you do not necessarily need to enable every setting. Use only the
options that support your store's shopping experience.
For example, a minimalist store may prefer a simple empty-cart heading with one featured collection. A larger ecommerce store may benefit from product recommendations and additional collection links.
Configure the Shopify Slide-out Cart in the Soft Theme
The Soft Shopify theme offers a broader set of settings for controlling the appearance and behavior of the Shopify Slide-out Cart.
After setting:
Cart Type → Drawer, you can configure the remaining options according to your store's needs.
Cart Drawer Color Scheme
The Cart Drawer Color Scheme setting controls the overall visual appearance of the cart drawer. You can select or edit a color scheme that matches your brand and storefront. Because the cart drawer appears during an important stage of the buying process, it should visually match the rest of your website.
Make sure that:
- Text is easy to read
- Buttons have sufficient contrast
- The checkout action is noticeable
- Background colors match your branding
- Price information remains clear
- Promotional messages are not distracting
A consistent design helps the drawer feel like part of your store rather than an unrelated pop-up.
Show Cart Note
The Show Cart Note setting allows customers to enter additional information related to their order. Cart notes can be useful for stores that accept customer instructions, such as:
- Gift messages
- Delivery notes
- Order preferences
- Personalization details
- Special packaging requests
- Additional customer instructions
If your business does not need order notes, you can leave this option disabled to keep the drawer simpler.
Hide Cart Note on Drawer
Soft also provides the option to hide the cart note specifically inside the drawer. This can be useful when you want cart notes to remain available elsewhere but do not want them taking up valuable space inside the slide-out cart. Cart drawers generally work best when they remain compact, especially on mobile devices. If the note field is not essential to the immediate shopping experience, hiding it can make the interface cleaner.
Show Tax Info
The Show Tax Info option allows you to display tax-related information inside the cart drawer. This can help improve pricing transparency and give customers a clearer understanding of how tax is handled before they move toward checkout. Whether you should enable this setting depends on your business, pricing strategy, and
regional requirements.
Show Discount Option
Soft allows merchants to display a discount-related option inside the cart drawer. If discounts play an important role in your promotional strategy, enabling this option may make it easier for customers to understand that discount functionality is available. However, avoid making the cart overly promotional. The main goal should still be to help customers quickly review their order and proceed toward checkout.
Show Free Shipping Bar
One of the useful e-commerce-focused settings available in Soft is the Free Shipping Bar. When enabled, the cart drawer can visually communicate how close a customer is to qualifying for free shipping. For example, if your free shipping threshold is ₹50,000 and the customer's cart currently contains ₹35,000 worth of products, the shipping bar can encourage the customer to add more items to reach the required amount. This can be useful for increasing average order value while also clearly communicating a customer benefit.
Free Shipping Threshold
The Free Shipping Threshold determines the cart value customers need to reach before receiving free shipping.
For example: Free Shipping Threshold: 50000
You should adjust this number according to your store's actual free shipping policy. Do not simply leave the default value without checking whether it matches your shipping strategy. Consider factors such as:
- Average order value
- Product pricing
- Shipping costs
- Profit margins
- Customer location
- Promotional strategy
The threshold should be realistic enough that customers feel they can reasonably reach it by adding another relevant product.
Shipping Reached Celebration
Soft also allows you to choose a visual effect when the customer reaches the free shipping threshold.
One available option is: Shimmer + Icon Pop
This provides visual feedback when the shopper qualifies for free shipping. These micro-interactions can make the cart feel more responsive and engaging, but they should remain subtle and should not interfere with the checkout process.
Shipping Background
You can customize the background color used for the free shipping message.
For example:
Shipping Background: #2F7D3B
Choose a color that fits your branding while maintaining enough contrast with the text.
Shipping Text
The shipping message text color can also be customized.
For example:
Shipping Text: #FFFFFF
The text must remain clearly visible against the selected background.
Shipping Bar
Soft lets you customize the active portion of the free shipping progress bar.
For example:
Shipping Bar: #EA633E
This can help customers visually understand how much progress they have made toward the free shipping threshold.
Shipping Bar Background
You can also customize the remaining background portion of the shipping progress bar.
For example:
Shipping Bar Background: #FFFFFF
When choosing colors, focus on readability and accessibility rather than using too many decorative combinations.
Step 5: Configure Only the Settings Your Store Needs
Both Gravity and Soft offer useful customization options, but you do not need to activate every feature. The most effective Shopify Slide out Cart is usually one that remains clear and focused. Consider enabling features based on your business requirements.
For example:
- Use product recommendations if you want to encourage further product discovery.
- Use a free shipping bar if free shipping is part of your conversion strategy.
- Show tax information when pricing transparency is important.
- Enable cart notes if customers regularly provide order instructions.
- Use collections in the empty drawer to prevent customers from reaching a dead end.
- Keep unnecessary fields hidden if they make the cart feel crowded.
The objective is to provide enough information to help shoppers make decisions without
overwhelming them.
Step 6: Save Your Changes
Once you have configured the Shopify Slide-out Cart, click the Save button in the Theme Editor.
Saving is important because unsaved changes will not appear on the live storefront. Before leaving the editor, double-check that:
- Cart Type is set to Drawer
- Your preferred cart settings are enabled
- Colors match your store
- Free shipping threshold is correct
- Cart notes are configured appropriately
- Empty cart recommendations are set up if required
- Product recommendations display correctly
Step 7: Test the Shopify Slide-out Cart on the Storefront
The final step is testing. Do not assume that the drawer is working correctly simply because the settings have been enabled. Open your storefront and test the cart from a customer's perspective.
Add a product to the cart and confirm that the drawer opens as expected.
Check whether:
- The cart slides out correctly
- Product image appears properly
- Product title is correct
- Selected variant is displayed
- Price is accurate
- Quantity controls work
- Products can be removed
- Cart subtotal updates correctly
- Discount functionality works if enabled
- Free shipping progress updates properly
- Checkout button works
- Empty cart content appears when products are removed
- Product recommendations work correctly
You should also test the Shopify Slide-out Cart on different screen sizes. Pay particular attention to mobile because a large percentage of ecommerce customers browse and purchase through smartphones.
Test on:
- Desktop
- Tablet
- Mobile
On mobile devices, verify that buttons are easy to tap, text is readable, and customers can scroll through the cart without difficulty.
Troubleshooting: Slide-out Cart Not Opening
- Cart type is still set to Page: Recheck Theme Settings and confirm Cart type is set to Drawer, then save.
- Conflicting cart apps: If you previously installed a cart or upsell app, it may override the theme drawer. Disable the app temporarily and test again.
- Theme not published: If you configured settings on an unpublished theme, the live store will not reflect the change.
- Add to cart behavior differs by section: Test adding from product pages, featured product sections, and collection pages to confirm the drawer triggers consistently.
- Mobile layout issues: If the drawer opens but is hard to use, check button sizes, scrolling, and contrast on mobile.
Conclusion
A Shopify Slide-out Cart can make the shopping journey smoother by allowing customers to review and manage their cart without leaving the current page. With Themeshopy themes like Gravity and Soft, this feature can be enabled directly from the Theme Editor without relying on a separate app. Both themes also provide useful customization options for recommendations, cart notes, discounts, shipping messages, and more. By configuring the cart drawer properly and testing it across desktop and mobile devices, you can create a faster, cleaner, and more convenient shopping experience for your customers.
About the Author
This article was written by the Themeshopy content team, focusing on practical Shopify theme setup and storefront usability. The goal is to provide clear, theme-based steps for enabling features like the shopify slide out cart and testing them across devices.
Frequently Asked Questions
1. What is a Shopify Slide-out Cart?
A Shopify Slide-out Cart is a cart drawer that opens from the side of the screen, allowing customers to review products, update quantities, and proceed to checkout without visiting a separate cart page.
2. Can I add a Shopify Slide-out Cart without an app?
Yes. If your Shopify theme includes built-in cart drawer functionality, you can enable it directly from the Theme Editor without installing an additional app.
3. Do Gravity and Soft Shopify themes support a slide-out cart?
Yes. Gravity and Soft include built-in cart drawer functionality. After installing the theme, open the Theme Editor and set Cart type to Drawer to enable the shopify slide out cart experience, then adjust the available cart drawer settings based on your store needs.
Yes. Both Gravity and Soft themes from Themeshopy or Themestudio include built-in Shopify Slide-out Cart functionality.
4. How do I enable the slide-out cart in Themeshopy themes?
Open the Shopify Theme Editor, go to Theme Settings → Cart and Drawer, find Cart Type, and select Drawer. Save your changes and test the cart on your storefront.
5. Does a Shopify Slide-out Cart work on mobile devices?
Yes. A properly designed cart drawer works across desktop, tablet, and mobile devices, giving customers a convenient way to manage their cart without unnecessary page navigation.
