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.
11

Thanks for this, it’s working great.

To fix the issue of the logo resolution, you can change the settings in header.liquid.
Assuming you want to change the image size to 350, you can do the following:

{%- assign image_size = section.settings.logo_width | append: ‘x’ -%}

to be changed to

{%- assign image_size = 350 | append: ‘x’ -%}

3 Likes