How can I adjust the width and size of my website header?

Store Design

Topic summary

A user seeks to widen their website header to push the logo and cart buttons toward the edges, as the current layout feels cramped on desktop. They also want to reduce header height while maintaining or increasing logo size.

Solution provided:

  • Add custom CSS code in the theme.liquid file (below the <head> tag) to increase page width by adjusting the max-width value (suggested starting point: 1660px)
  • Crop unnecessary whitespace from the logo image file itself to reduce its footprint while making it appear larger

Key technical details:

  • The logo’s original dimensions (170 x 120px) include excess whitespace that inflates header height
  • Removing whitespace allows the logo to occupy less vertical space while appearing more prominent
  • Code snippet and reference screenshots were provided for implementation

Outcome: The original poster confirmed both solutions worked successfully.

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

Hey @Lilboris ,

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.

This will increase the page’s width (Change the value 1660 to a higher number if you need to use more space)

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1707219082611.jpeg
ThePrimeWeb_0-1707219082611.jpeg1253×933 87.9 KB

As for the logo, The logo itself is the reason the header has such a height.

See the size of the logo (170 x 120),

ThePrimeWeb_1-1707219116542.png
ThePrimeWeb_1-1707219116542.png1831×916 139 KB

Without the logo, the size of the header is like this:

ThePrimeWeb_2-1707219161511.png
ThePrimeWeb_2-1707219161511.png1837×748 119 KB

You should remove unnecessary whitespace in the logo, basically as close as it can get to all corners. Just crop the image. The logo will look bigger then and also take up less space.

ThePrimeWeb_3-1707219263113.png
ThePrimeWeb_3-1707219263113.png950×690 72.2 KB

1 Like