How can I reposition the cart and resize the header on my ecommerce site?

Store Design
, , , , ,

Topic summary

Goal: move the cart icon under the logo (centered) and reduce the header’s vertical space.

  • Context: Shopify store sadsociety.fr (password: test). Initial change requested only on mobile; later applied to both mobile and desktop.
  • Iteration: Helper prototyped locally and shared screenshots. OP requested precise alignment (logo and stars centered; star slightly higher). Adjustments were made accordingly.
  • Implementation: Helper provided CSS to paste into theme.liquid (above ) via Online Store > Themes > Edit code > theme.liquid. OP confirmed the cart repositioning works. OP had found cart markup in header.liquid; helper clarified CSS placement remains in theme.liquid.
  • Further change: OP clarified “header border” means reducing spacing between header and body on both desktop and mobile (less reduction on mobile). Helper supplied a merged CSS replacement that keeps the cart under the logo and reduces header spacing, instructing OP to replace the previous code.

Status: Cart repositioning solved and live. Header spacing reduction provided via new CSS; awaiting OP’s final confirmation. Screenshots were central to alignment decisions.

Summarized with AI on January 17. AI used: gpt-5.
17

You can just add the Code that i provided on the theme.liquid file following below steps.

Steps to add CSS:

Step 1: Go to Online Store > Themes > Active theme > Edit

mangitma_0-1695574193367.png
mangitma_0-1695574193367.png400×139 29.1 KB

Step 2: Search for “theme.liquid”

mangitma_1-1695574193396.png

Step 3: Add the CSS above “”

mangitma_2-1695574193319.png

Step 4: Save the change

If you are still confused, please let me know.