Header Rearrangement

Store Design
, ,

Topic summary

A user seeks to modify their Shopify store header by removing the logo and homepage link, then relocating the cart icon to the left side where the logo was positioned.

Solution Provided:

  • CSS code was shared to hide the logo and reposition the cart icon on mobile devices (max-width: 749px)
  • The code targets header__heading and header__icons elements
  • Implementation involves editing the theme’s CSS file (base.css, style.css, or theme.css)

Cart Drawer Functionality:

  • The user additionally requested the cart drawer to slide out from the left instead of right
  • While CSS can reposition the drawer’s appearance, full left-side functionality requires modifications to JavaScript and Liquid code
  • The responder offered to implement these advanced changes for a fee

Status: The basic header rearrangement issue was resolved with the provided CSS solution. The cart drawer animation remains a potential future enhancement requiring developer work.

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

IMG_7433.jpeg
IMG_7433.jpeg1170×425 21.2 KB

Hello, how would I…

  1. Remove the logo from the header? Including the link to the homepage.

& 2. Move the cart over to the left where the logo was? Also changing the cart to pop out from the left instead of right when a customer wants to check it.

1 Like
2

Hi @PoW8

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. 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:
@media only screen and (max-width: 749px){
h1.header__heading {
    display: none;
}
.header__icons {
    display: flex;
    grid-area: left-icons;
}
}

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

1 Like
3

Thank you. Not the biggest deal but do you know if its possible to make the contents of the cart appear from the left instead of the right?

4

Even though we’ve moved the cart drawer to the left, the opening and closing functionality remains on the right.

To see what I mean, you can add this CSS code:

css

Copy

.drawer {  
    justify-content: flex-start !important;  
}

For the cart drawer to fully function on the left, additional edits to the JavaScript and Liquid code are required.

We can implement these changes for you, but it would involve a fee for our time. Let us know if you’re interested!

Thanks!

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

1 Like
5

Thanks again. I appreciate it.