Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Dawn 2.0 theme Logo Size

Solved

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

surfingcinv
Excursionist
41 1 14

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:

surfingcinv_0-1630646513002.png

Debut:

surfingcinv_1-1630646541707.png

 

thank you

 

Accepted Solution (1)
Obvious84
Visitor
2 1 5

This is an 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' -%}

View solution in original post

Replies 36 (36)

ZestardTech
Shopify Partner
5902 1066 1412

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;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
surfingcinv
Excursionist
41 1 14

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

dmwwebartisan
Shopify Partner
12323 2552 3732

@surfingcinv 

Please share dawn theme stor URL

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
surfingcinv
Excursionist
41 1 14

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
Excursionist
41 1 14

Dawn is now the live theme

https://iamgreenminded.com/

 

Thank you

 

Karen_Joslin1
Excursionist
19 1 5

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
Visitor
1 0 0

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
Excursionist
19 1 5

Great!

Obvious84
Visitor
2 1 5

This is an 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
Excursionist
19 1 5

Fantastic, thanks for sharing!

ianjh
Excursionist
17 1 6

Perfect. Thanks 

surfingcinv
Excursionist
41 1 14

This worked perfectly. Thank you!

Alex

artifulboutique
Excursionist
37 0 9

Hi, 

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

Obvious84
Visitor
2 1 5

@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
Visitor
1 0 0

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
Excursionist
74 0 10

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

Karen_Joslin1
Excursionist
19 1 5

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
Excursionist
74 0 10
I just need to size change for mobile! Not for desktop!
Karen_Joslin1
Excursionist
19 1 5

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
Visitor
2 0 1

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
Excursionist
19 1 5

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
Visitor
2 0 1
thank you so much for your help! I didn't see the other message and this
works perfectly 🙂
RaeRae1
Shopify Staff (Retired)
5 0 2

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.

To learn more visit the Shopify Help Center or the Community Blog.

Karen_Joslin1
Excursionist
19 1 5

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
New Member
4 0 0

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

 

 

ericblake88
Tourist
6 1 0

Hi! Does this work on the current Dawn version? And, if so, where exactly can I find {%- assign image_size = section.settings.logo_width | append: 'x' -%} in header.liquid? I can't seem to find it. 

 

Thank you!

craftywool
Tourist
16 0 3

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
Shopify Partner
12323 2552 3732

@craftywool 

Please share your store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
craftywool
Tourist
16 0 3

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
Excursionist
19 1 5

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
Tourist
16 0 3

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
Shopify Partner
12323 2552 3732

@surfingcinv 

Please share your Sections/header.liquid file code .

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

timothy987
Visitor
2 0 2

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
Excursionist
19 1 5

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
Visitor
2 0 0

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?

Karen_Joslin1
Excursionist
19 1 5

Hi, Shadia. I haven't encountered this issue, but you should be able to adjust the header padding in the base.css file in the Main Header Layout section. In my file, that starts at line 2163; however, I've adjusted code in various places so it'll be a little different in your file (probably a bit earlier than that).  I see two places where padding is applied, in .header and 

@media screen and (min-width: 990px) {
.header {  

 

The second one will only affect devices with a larger screen. I imagine the first one would affect all devices, so if you change padding there make sure to check it on mobile to make sure it doesn't mess up the header on smaller screens.