How do I get this drawing line in the cart?, and how do I get the text "CART" to the middle position

Store Design
, ,

Topic summary

A user is customizing their Shopify cart drawer design, specifically trying to add a horizontal line and center the ā€œCARTā€ text.

Initial Solution:

  • A community helper provided CSS code to add to the themeā€™s stylesheet (base.css, style.css, or theme.css)
  • The code adds a box-shadow effect and left padding to create the desired line appearance

Follow-up Request:

  • The original poster requested additional spacing below the ā€œCARTā€ text
  • A second CSS snippet was provided adding padding-bottom: 10px to the cart drawer header

Technical Details:

  • Solutions involve editing the theme code through Shopify admin ā†’ Online Store ā†’ Themes ā†’ Edit code
  • CSS targets the .header.cart-drawer__header.cart-drawer__content-item class
  • Changes require saving the file after implementation

Status: The discussion appears resolved with working CSS solutions provided for both the line effect and spacing adjustments.

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

This is CAINTE: https://cainte.se/

SkaĢˆrmavbild 2023-09-10 kl. 16.48.37.png
SkaĢˆrmavbild 2023-09-10 kl. 16.48.37.png774Ɨ1076 252 KB

This is the link to my website: https://mdnzn6tes8a76khb-65734639831.shopifypreview.com

1 Like
2

Hi @OneCap

Try this one.

  • From your Shopify admin dashboard, click on ā€œOnline Storeā€ and then ā€œThemesā€.
  • Find the theme that you want to edit and click on ā€œActionsā€ and then ā€œEdit codeā€.
  • In the ā€œAssetsā€ folder, click on ā€œbase.css, style.css or theme.cssā€ file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
header.cart-drawer__header.cart-drawer__content-item {
    padding-left: 40%;
    box-shadow: 0 1px rgba(0, 0, 0, 0.5)
}

Please donā€™t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
3

Could you make it little more space below CART?

SkaĢˆrmavbild 2023-09-10 kl. 17.52.49.png

1 Like
4

Could you make it little more space below CART?

5

Yes, try this.

Same Instruction.

header.cart-drawer__header.cart-drawer__content-item {
    padding-bottom: 10px;
}

And Save.

Please donā€™t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like