Dawn 2.0 theme Logo Size

[surfingcinv]

Hello,

Im trying to recreate my current debut theme in dawn for the new store 2.0 features.

My current live store is in debut theme with a custom code to increase the logo size: https://iamgreenminded.com/

How do I fix the code in the new dawn theme to be the same as my debut with the larger logo?

Dawn:

Debut:

thank you

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

header.site-header.logo--center h1.h2.site-header__logo img {
width: 100% !important;
max-width: 470px;
}

[surfingcinv]

There is no them.scss.css in DAWN theme?

[dmwwebartisan]

@surfingcinv 

Please share dawn theme stor URL

[surfingcinv]

Hi, I have been working on it as the non-active store. Do I have to make DAWN the active theme to share for you? Or is there another way?

thanks

[surfingcinv]

Dawn is now the live theme

https://iamgreenminded.com/

Thank you

[Karen_Joslin1]

I've been tinkering around with this a bit. The applicable file in Dawn is base.css (in Assets). However, I tried adding the code above and it doesn't work.

I believe the issue may be that in Config>settings_data.json the logo size is set to 250px, and it can't be changed there. Trying to save a larger logo size returns the error message "Error: Setting 'logo_width' can't be greater than 250". I think that's why using a max-width command with width:100% doesn't work, because Dawn still sees the max width as 250px.

Here's what I found works pretty well. In Assets>base.css, scroll down to line 1894 in the header code section. Insert this code there (in between the sections that start with .header__heading-link .h2 {    and    .header__heading-logo {  😞

@media screen and (min-width: 990px) {
.header__heading-logo {
height: auto;
min-width: 300px;
max-width: 450px;
}
}

Adjust the actual min and max sizes however you want (but min size needs to be greater than 250). (This might work without a max size, but it seems like a good idea to have one.) This code adjusts the logo size on larger devices while leaving the logo size on smaller devices (like phones) small. At least, it's working decently on my laptop and iPhone. 

The caveat to this is that Shopify is upsizing the 250 px logo that it automatically made for you, so if your logo looks blurry at the largest size you may need to add a specific URL for the logo at the correct largest size. (I haven't tried this yet so I'm not sure where/how you would do that.)

[ejames-dev]

Karen_Joslin1's answer works for me, I think this is for the new versions because I only started using this theme less than a month ago.

[Karen_Joslin1]

Great!

[Obvious84 · Accepted solution]

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' -%}

[Karen_Joslin1]

Fantastic, thanks for sharing!

[ianjh]

Perfect. Thanks 

[surfingcinv]

This worked perfectly. Thank you!

Alex

[artifulboutique]

Hi, 

I want to adjust the size, but just for the mobile version. How can I do thant? Thanks for your response. 

[Obvious84]

@artifulboutique For this you need to make use of media queries to achieve this.

For example, if you are using the Dawn theme, you can do something like this:

@media screen and (max-width: 480px) {

      .header__heading-logo {
           height: auto;
           width: 250px;
      }

}

[cct]

Hi,

I am not able to get this, desktop version does work, but mobile doesnt.  I dont know anything about media queries, could someone help?

Where should i modify it? This is the code:

<a href="{{ routes.root_url }}" class="header__heading-link link link--text focus-inset">
{%- if section.settings.logo != blank -%}
{%- assign image_size = 300 | append: 'x' -%}
<img srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
src="{{ section.settings.logo | img_url: image_size }}"
loading="lazy"
class="header__heading-logo"

[HEALINGANDHER]

I can't find where to input this code on the header.liquid file?

[Karen_Joslin1]

In Dawn 3.0, the section it's in starts on line 341 (assuming you haven't made any code changes above that). However, it looks to me like the code has changed a bit since this thread originally started, and I think it needs adjusting. (The code that I have in 3.0 is the same as in KaterinaRoza's comment above from version 5.0.) If I figure it out, I'll post the solution here.   

[HEALINGANDHER]

I just need to size change for mobile! Not for desktop!

[Karen_Joslin1]

Oh, that's probably going to be a lot more difficult or impossible. I wasn't able to get it to work with mobile and eventually gave up. 

[corinaaa]

This was so helpful! Thank you! Is there also a way to adjust the logo size from the mobile view as well? Your solution worked well for the desktop but I can see my logo is still tiny on the mobile design.

[Karen_Joslin1]

Hi, @corinaaa, glad to help! The mobile size issue was solved by @Obvious84 in the reply above. Here's their solution:

For this you need to make use of media queries to achieve this.

For example, if you are using the Dawn theme, you can do something like this:

@media screen and (max-width: 480px) {

      .header__heading-logo {
           height: auto;
           width: 250px;
      }

}

[corinaaa]

thank you so much for your help! I didn't see the other message and this
works perfectly 🙂

[RaeRae1]

Hi. I have update my dawn theme from version 3.0 to 5.0 and I cannot locate this code in this new theme but was able to find it on the version 3.0. I am not sure if it's because version 5.0 has a different coding on header.liquid. Any thoughts on this would be appreciated.

[Karen_Joslin1]

I'm working with version 3.0 so I don't know how you would do it in 5.0. My feeling about the themes Shopify develops themselves is that when they discover people using coding hacks they don't approve of for whatever reason, they change it in subsequent versions. (See KaterinaRoza's comment below.) So my advice is that if 3.0 was working for you, go back to using that.

It's pretty annoying, though. I've been working on switching my theme from Responsive and it's really a pain in the ass getting things in Dawn to look the way I want. I feel like customizing Responsive is a lot easier and things usually work right after upgrading versions. I'll be keeping my last Responsive theme version in case I decide I need to switch back at some point.    

[KaterinaRoza]

Dear @Obvious84

I have just come across this feed with the code you supplied above for increasing the HEADER Logo size on Dawn Theme.

I used this code on my Dawn Theme (V3.0) and it worked perfectly - BUT I am currently in the process of working on the new Dawn Theme (V5.0), as it offers a few more options in some areas which are more helpful, and tried to find increase the HEADER Logo size with the same steps indicated above - but I found that this is nowhere in the coding of DAWN (V5.0) in order for me to cut and paste this code.

The code that I found is:

{%- assign image_size_2x = section.settings.logo_width | times: 2 | at_most: 5760 -%}
<img srcset="{{ section.settings.logo | image_url: width: section.settings.logo_width }} 1x, {{ section.settings.logo | image_url: width: image_size_2x }} 2x"
src="{{ section.settings.logo | image_url: width: section.settings.logo_width }}"
loading="lazy"
class="header__heading-logo"
width="{{ section.settings.logo.width }}"
height="{{ section.settings.logo.height }}"
alt="{{ section.settings.logo.alt | default: shop.name | escape }}"

I was on the phone tonight with Shopify Support - where I requested for the Design Team to make this change to my Header Logo size and UNFORTUNATELY, the response was a hard NO !!! even though in my previous theme (DEBUT) over a year ago - I requested this from the Design Team it was actioned immediately.

Hoping you have some positive information to give me

Regards

Katerina

[craftywool]

Hi, I tried this solution and it worked in terms of increasing the logo size but it also increased the size of the search and cart icons that are to the right of the screen, massively, is there a way to correct this?

thanks

[dmwwebartisan]

@craftywool 

Please share your store URL!

Thanks!

[craftywool]

Hi,  thanks for the reply, we actually decided we wanted a different look to the site so we've changed to the Supply theme which coincidencly allows for a bigger logo

[Karen_Joslin1]

Hi, @craftywool, that issue isn't happening for me. I did some experimenting and found a way to decrease the size of the cart icon but not the search icon. For the cart icon, you can adjust the height and width here:

Assets>base.css

[starting at Line 1957:]

.header__icon,

.header__icon--cart .icon {

  height: 4.4rem;

  width: 4.4rem;

}

For me, if I increase the logo's size on mobile, then the right-hand icons get pushed off the screen. Not sure how to solve that, but I would probably try pushing the icons down below the logo.

I'm actually still using the Responsive theme because I decided I didn't want to spend the time making all the tweaks I would want to the theme, but now I'm reconsidering. So if I figure out how to adjust the icons I'll post it here. 

[craftywool]

Hi  Karen_jslin1

thanks for the reply, we actually decided we wanted a different look to the site so we've changed to the Supply theme which coincidencly allows for a bigger logo

[dmwwebartisan]

@surfingcinv 

Please share your Sections/header.liquid file code .

Thanks!

[timothy987]

This does not seem to work? It keeps the logo sized at 250. I can make it fixed smaller, but not fixed bigger with this suggest code.

I also looked a the website that this was a "solution" for: https://iamgreenminded.com/ and that logo still looks small as in the original complaint.

How can i get my logo bigger than the tiny size from default Dawn? Thanks!

[Karen_Joslin1]

I haven't been able to get the mobile logo to resize correctly with the suggested code, unfortunately.

To adjust the logo for larger screens, go to Sections>header.liquid.

Scroll down to line 324 (or thereabouts, depending on whether changes have been made to the original file).

The line you're looking for is {%- assign image_size = section.settings.logo_width | append: 'x' -%}

(right after  {%- if section.settings.logo != blank -%})

Replace that line with {%- assign image_size = 450 | append: 'x' -%}  450 is the size I went with, but you could choose another size. This number should be the maximum size you want your logo to appear.

If that's what you already did and it's not working, then you may have some added code somewhere that's conflicting with it.

I hope this helps! 

[Shadia_harper]

Hi Karen,

This worked for increasing the logo size, but now the header section is extremely large. Is there a way to now decrease the padding around the logo so that the header height isn't so big?