how to add view cart and continue shopping button in cart drawer

[OBMG]

I would like to know how to add a view cart button and continue shopping button in cart drawer. 

Like the photo below:

Thank you! 

[Shadab_dev]

If the theme does not provide this feature you will have to add these buttons via code in the cart file responsible for displaying the side cart and appropriate links to the buttons.

[rajweb]

Hey @OBMG ,

To add a "View Cart" button and a "Continue Shopping" button in your Shopify cart drawer, similar to the example you've shown,

you can follow these steps:

1. Online Store 

2. Themes

3. Edit Code

4. In the theme files, look for a file related to the cart drawer. This is usually located in Sections or Snippets and might be named something like cart-drawer.liquid or cart-template.liquid.

5. Add Buttons in the cart Drawer Code:

-Open the cart drawer file, and find the location where you want to place the "View Cart" and "Continue Shopping" buttons (usually at the bottom of the cart content).

6. Insert Button Code:

-Add the following HTML code to add the buttons, making sure they appear within the drawer structure:

<div class="cart-drawer-buttons">
    <a href="/cart" class="btn btn--secondary">View Cart</a>
    <a href="/" class="btn btn--secondary">Continue Shopping</a>
</div>

Adjust the URL in the href  attribute if necessary. /cart will take users to the full cart page, and  / will take them back to the homepage (or you can change it to any other collection or page URL).

7. Style the Buttons:

-If the buttons don’t match your store’s design, you might need to add custom CSS. Locate the theme’s CSS file, often named theme.css or style.css (found in Assets).

-Add this CSS to style the buttons similarly to the ones in your reference image:

.cart-drawer-buttons {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
}

.cart-drawer-buttons .btn {
    padding: 10px 20px;
    border: 1px solid #000; /* Adjust border color */
    color: #000; /* Adjust text color */
    background-color: #fff; /* Adjust background color */
    text-align: center;
    width: 48%;
    border-radius: 5px; /* Optional */
    font-weight: bold;
}

.cart-drawer-buttons .btn--secondary {
    background-color: #f2f2f2; /* Light background color */
}

8.Save your changes and preview your store. Open the cart drawer to check that the "View Cart" and "Continue Shopping" buttons appear and function as expected.

If I was able to help you, please don't forget to Like and mark it as the Solution!
Best Regard,
Rajat Sharma

[OBMG]

Thank you! It's working now! 

One last question, how to make them to the same length as check out button? 

and how to cancel the underline? 

[rajweb]

@OBMG ,

I'm glad it worked! To make the "View Cart" and "Continue Shopping" buttons the same length as the "Check out" button and remove the underline, you can adjust the CSS as follows:

1.Make Buttons the Same Width:

Set the width of the buttons to 100% so they span the full width of the container.

2. Remove the Underline:

Use text-decoration:none to remove the underline from the buttons.

Here’s the updated CSS:

.cart-drawer-buttons {
    display: flex;
    gap: 10px; /* Adds space between the buttons */
    padding: 15px 0;
}

.cart-drawer-buttons .btn {
    padding: 10px 0;
    border: 1px solid #000; /* Adjust border color */
    color: #000; /* Adjust text color */
    background-color: #fff; /* Adjust background color */
    text-align: center;
    width: 100%; /* Make buttons full width */
    border-radius: 5px; /* Optional */
    font-weight: bold;
    text-decoration: none; /* Removes underline */
}

.cart-drawer-buttons .btn--secondary {
    background-color: #f2f2f2; /* Light background color */
}

With this CSS:

The buttons will take up the full width of their container.

The underline should be removed.

The gap between the buttons ensures they are spaced out but still aligned to match the width of the "Check out" button.

If I was able to help you, please don't forget to Like and mark it as the Solution!

thanks