change the cart page in my store to a cart drawer

Store Design
1

Hello,

I want to change the cart page in my store to a cart drawer. I have tried many times through the code but unfortunately without success. I am using the Symmetry template version 5.5.0. I tried to change to a drawer instead of a page through the template settings, but it only works when trying to add a product to the page and not when entering the cart.

I would appreciate your help, thank you very much!

1 Like
2

Hello @eldarknight
Please following below steps

  1. Backup Your Theme

  2. Navigate to Theme Files: In your Shopify Admin, go to Online Store > Themes. Find your active theme (Symmetry 5.5.0) and click on “Actions” > “Edit Code”.

  3. Locate Cart Template: Look for a file named cart.liquid under the Sections or Templates folder, depending on how the theme is structured. This file controls the cart page layout.

  4. Convert Cart Page to Drawer

4.1) implement Drawer Structure: Replace the existing cart page content with a trigger/button that opens a drawer when clicked. Here’s a basic outline:


    
    

        
        ## Your Cart
    

    
    
        
        {% include 'cart-drawer-content' %}
  • #cart-drawer-trigger: This button triggers the opening of the drawer.
  • #cart-drawer: This div contains the drawer content.
  • cart-drawer-content: This is a hypothetical include file. You may need to create this file (cart-drawer-content.liquid) to render cart items, subtotal, and checkout button within the drawer.
  1. JavaScript Implementation : Open/Close Drawer Functionality: Add JavaScript to handle the opening and closing of the drawer. This script typically goes in theme.js or a similar JavaScript file:
// JavaScript to open and close the cart drawer
document.addEventListener('DOMContentLoaded', function() {
    var drawerTrigger = document.getElementById('cart-drawer-trigger');
    var drawer = document.getElementById('cart-drawer');
    var drawerClose = document.getElementById('cart-drawer-close');

    drawerTrigger.addEventListener('click', function() {
        drawer.classList.add('open');
    });

    drawerClose.addEventListener('click', function() {
        drawer.classList.remove('open');
    });
});

CSS Styling: Ensure the drawer (#cart-drawer) is styled appropriately to slide in from the side or appear as needed.

  1. Theme Settings Adjustment

Disable Default Cart Page: In some cases, you may need to disable the default cart page. This is typically done in the theme settings or by removing any links to the cart page in the navigation.

I hope this solution its useful if any issue share your details i will check and provide proper solution