Cart drawer title not showing

Store Design
, , , , ,

Topic summary

A user encountered an issue where the cart drawer title wasn’t displaying on their Shopify store, despite the code being present in the cart-drawer.liquid file. The problem was particularly noticeable when the cart was empty.

Initial Request:

  • Cart drawer header not visible
  • Needed to add a separator line below the header

Solution Provided:

  • Added CSS to base.css for the separator line using border-bottom on .drawer__header
  • For the empty cart title visibility issue, applied CSS targeting cart-drawer.is-empty .drawer__header with display: block!important and absolute positioning
  • Also hid the duplicate close button with .cart-drawer__empty-content button.drawer__close { display: none; }

Resolution:
The issue was resolved after adding the !important flag to force the display property, overriding the theme’s default styling that was hiding the header when the cart was empty. The user confirmed the solution worked successfully.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

The cart drawer in my website doesn’t have a title. I thought it would be problem of the theme. But when I checked the cart-drawer.liquid file it contains a division for the cart header. This the code I saw in the file


        ## {{ 'sections.cart.title' | t }}

But the cart heading is not visible.

And one more thing, I need to add a line seperating the header from the cart like this

Screenshot 2025-05-17 213655.png
Screenshot 2025-05-17 213655.png335×419 611 Bytes

https://www.valcoure.store/

password - kothavara

Thank You

2 Likes
2

Hello @AnSrSi

  1. From your Shopify Admin, navigate to Online Store > Themes > Edit Code
  2. In the Assets folder, open base.css and add your CSS code at the end
.drawer__header {
border-bottom: solid 1px #efe5e5;
margin-bottom: 20px;
}

devcoders_1-1747498681202.png
devcoders_1-1747498681202.png1303×294 57.4 KB

1 Like
3

Hi @devcoders ,

Thanks for your reply, but the header title is not visible when there are no products in the cart.

1 Like
4

This is some code snippets in the cart-drawer.liquid file which I think is the code for the empty cart drawer

1 Like
5

Hello @AnSrSi

  1. From your Shopify Admin, navigate to Online Store > Themes > Edit Code
  2. In the Assets folder, open base.css and add your CSS code at the end
cart-drawer.is-empty .drawer__header {
display: block;
position: absolute;
top: 0;
width: 100%;
padding: 10px 15px;
}
.cart-drawer__empty-content button.drawer__close {
display: none;
}

devcoders_0-1747499954637.png
devcoders_0-1747499954637.png1343×636 76.5 KB

1 Like
6

Thank You @devcoders , but it is not working.

Can you check if I can do anything the code from cart-drawer.liquid I have sent

1 Like
7

Hello @AnSrSi

You haven’t added this CSS in base.css. Please add it, save the file, and then check.

cart-drawer.is-empty .drawer__header {
display: block;
position: absolute;
top: 0;
width: 100%;
padding: 10px 15px;
}
.cart-drawer__empty-content button.drawer__close {
display: none;
}

devcoders_0-1747501188002.png
devcoders_0-1747501188002.png1358×624 78.3 KB

1 Like
8

Not Working

9

Hello @AnSrSi

Add this css.

cart-drawer.is-empty .drawer__header {
display: block!important;
position: absolute;
top: 0;
width: 100%;
padding: 10px 15px;
}
.cart-drawer__empty-content button.drawer__close {
display: none;
}
1 Like
10

Thank You @devcoders , Its working now.

1 Like
11

Hello @AnSrSi

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful, please like all posts.

1 Like