Shopify themes, liquid, logos, and UX
Can anyone point me in the direction of where in the coding I can make my store name/logo larger in the header section on my website? I don't want it to be the full width of the page, but probably around twice the size it currently allows me to go
TIA
anyone?
Hello Karen,
Please follow these steps to do that:-
Hope that helps!
where is action please
Thanks Sagar for your response, I have tried that, but it does not make my logo any bigger
Currently the pixel width is 5000... and the image is the same size even if it is set to 300!!
Hello Karen,
If it does not work in this way then you have to write the code yourself, for that-
.site-header__logo-image img {
max-width: 200px !important;
}
You can increase the value to 250 or 300 or whatever that you need.
Doesnt work 😞
Not working for me either
Hello! I found a solution that will allow you to make the logo larger on desktop as well, because it is likely too small there as well. If you navigate to "Header.Liquid" within the code editor, you will be able to modify the max/min logo size easily. Between lines 355-361 you will find the parameters for the logo size. Edit the max height to whatever you would like and adjust the logo with the slider within the theme editor dashboard.
The default "max" height is 60px, I changed it to 120px to suit my needs. This will change the max size for desktop, but both are equally too small IMO, so you will need to add the Style mentioned above in order to make the logo larger on mobile. It does work, make sure you use the .scss extension.
"id": "logo_max_height",
"type": "range",
"min": 10,
"max": 120,
"step": 5,
"unit": "px",
"default": 15,
Hi Sagar, thankyou very much, that helps alot 🙂 Just one other question, If I decided to make it the full width of the page, what piece of coding would I need for that? and would I need to figure out how to move the search bar (which is currently on the left hand side of my logo)?
Hi! I tried the solution posted above, but still can't make my logo bigger, is there something I'm missing?
Hi Jose, I still can't find out how to do this, if you can, will you please post it here?
Hi! I've found the solution for this in case you wanted an update.
* Go to themes - edit code - sections - header.liquid
* Then find with clrt+f the max of pixels that you were allowed before, for example 250 and change it to 300 (max), and save.
* Now when you go back to the theme editor you'll see that you can now go up to whatever amount you wrote on the code.
That doesn't work. There's nowhere in the Theme settings that allows you to adjust logo size, not from what I can see anywhere. I did change the numbers in the CSS but it doesn't do anything.
It worked fine for me. You just have to find the line where the logo info is.
The max-width property is applied the logo image element by the theme inline. You can override this as follows:
.site-header__logo-image img { max-width:290px!important; }
Check that the logo is still good at smaller screen sizes as this will only affect sizes around laptop and above.
There are other references to how the max-width is set in other theme files, and this is an over-ride so a bit hacky. But it works and won't break anything.
can't get any of these suggestions to work. any other suggestions? Thanks
Sorry to hear that. Can you share your site address for me to check?
Assuming you wan to make the logo 400px wide on desktop, try adding:
.site-header__logo img { max-width: 400px!important; width: 400px!important; }
Adding in the 'width' as well works for me when I try it out in your site, though I don't need it on another site we built recently.
By the way, how big do you want the logo? I'm thinking it looks right at around 200px wide.
Hope this works for you, and good luck with sales!
For the steps to use this code, just see my first post in this thread (05-20-2020 10:03 PM).
To remove your extra padding below the header, in the same file where you put the logo code, also add:
.index-sections .shopify-section:first-child:not(.shopify-section--full-width) { margin-top: 10px; }
You can change 10px to what ever suits your design. Also, your logo image has some extra white space top and bottom, so if you crop it more tightly before uploading it, that would also effect the header height.
This worked great for me but now the logo is off center, any ideas?
.site-header__logo img {
max-width: 700px!important;
width: 700px!important;
}
Did you find out how to center it? Mine is off centered too!
Hello! I found a solution that will allow you to make the logo larger on desktop as well, because it is likely too small there as well. If you navigate to "Header.Liquid" within the code editor, you will be able to modify the max/min logo size easily. Between lines 355-361 you will find the parameters for the logo size. Edit the max height to whatever you would like and adjust the logo with the slider within the theme editor dashboard.
The default "max" height is 60px, I changed it to 120px to suit my needs. This will change the max size for desktop, but both are equally too small IMO, so you will need to add the Style mentioned above in order to make the logo larger on mobile. It does work, make sure you use the .scss extension.
"id": "logo_max_height",
"type": "range",
"min": 10,
"max": 120,
"step": 5,
"unit": "px",
"default": 15,
let me know if you are still not able to change it. i did it in json
Thank you, this just worked for me on the Turbo theme and I've been searching for the solution for hours!! Thank you!!!!
Thank you so much! 😄
Worked for me. I changed to 500px then went back to edit the header of the theme where the max size was now 500px and not 250px
Thanks Taniachz
I just found this maybe this helps everyone out
https://litextension.com/blog/how-to-change-logo-on-shopify/#how-to-change-logo-on-shopify-theme
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024