How can I adjust the logo size in Dawn 2.0 theme?

Store Design

Topic summary

Goal: make the header logo larger in Shopify’s Dawn theme (migrating from Debut where custom CSS was used).

Key working approach (earlier Dawn versions):

  • CSS alone failed due to a hard cap: settings_data.json enforces logo_width ≤ 250 px.
  • Desktop fix: edit Sections > header.liquid and replace
    {%- assign image_size = section.settings.logo_width | append: ‘x’ -%}
    with a fixed larger value, e.g., {%- assign image_size = 350 | append: ‘x’ -%} or 450. This outputs a larger image source, overcoming the 250px cap.
  • Optional CSS: in Assets > base.css, adjust .header__heading-logo sizes with media queries for larger screens to control min/max width.

Mobile and side effects:

  • Mobile-only sizing via media queries (max-width: 480px) can work, but results vary; some report icons enlarging or layout overflow. Mitigations: tweak .header__icon sizes and header padding in base.css.

Newer Dawn versions (v3–v5):

  • Code changed; header.liquid uses image_url and image_size_2x. The exact line from earlier versions may not exist. Shopify Support won’t modify this; users must adapt edits to the new syntax.

Status:

  • Original poster confirmed success on desktop. Mobile-only resizing and Dawn v5 implementation remain partially unresolved for some users.
Summarized with AI on January 9. AI used: gpt-5.
9

@surfingcinv

Please share your Sections/header.liquid file code .

Thanks!