How to add a full width border line in mobile cart drawer

Store Design
, , , , , ,

Topic summary

A user working with the Studio theme on doorstepdrip.com needs to add a full-width horizontal border line below the close (X) icon in the mobile cart drawer. The border should appear whether the cart is empty or full.

Three solutions were provided:

  1. CSS targeting .drawer__header - Add code to base.css creating an :after pseudo-element with absolute positioning and calculated width (calc(100% + 8rem)) to extend the border full-width

  2. CSS in theme.liquid - Insert custom CSS above the </head> tag in theme.liquid file to style the drawer header border

  3. Alternative CSS approach - Add styling to base.css targeting .cart-drawer .cart-drawer__header with border-bottom properties and margin adjustments

All solutions involve adding CSS code either to the base.css file (Assets folder) or theme.liquid file, accessible through Online Store > Themes > Edit code. The approaches use different CSS selectors and positioning techniques to achieve the same visual result.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

Hi, I’m using studio theme, website is doorstepdrip.com

What code would I need to add so I can get a border line below the x icon in the mobile cart drawer. I’d like the line to be full width of the drawer. And to be there when the cart is empty and full please.

like this style:

3B84D1BB-D3DF-469C-88C0-DE036A25E9C2.jpeg
3B84D1BB-D3DF-469C-88C0-DE036A25E9C2.jpeg828×1512 31.4 KB

1 Like
2

Hi @doorstepdrip

Please follow the instructions below.

  1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
  2. Go to Asset folder and open the base.css file
  3. At very end of the code, add the code below
.drawer__header {
    position: relative;
}

.drawer__header:after {
    content: "";
    width: calc(100% + 8rem);
    position: absolute;
    background: rgba(0,0,0,0.1);
    height: 0.5px;
    display: block;
    bottom: 1.5rem;
    left: -4rem;
}

button.drawer__close:after {
    content: "";
    width: 400px;
    height: 0.5px;
    position: absolute;
    background: rgba(0,0,0,0.1);
    bottom: 0;
    right: -1rem;
    display: block;
}

Result:

made4Uo_0-1685472892470.png
made4Uo_0-1685472892470.png717×924 19.9 KB

3

Hi @doorstepdrip

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Noah | PageFly

4

Hi @doorstepdrip

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file:

.drawer__header {border-bottom: 0.1rem solid rgba(var(–color-foreground),.08); margin-bottom: 1.5rem;}

.cart-drawer .cart-items th {border-bottom: none !important;}

Regards,

San