Shopify themes, liquid, logos, and UX
Hi,
Kind of new to coding on Shopify but have successfully cut and pasted several changes with other issues.
I would like to increase the logo width size on both Mobile and Desktop.
I am using Prestige theme and the maximum size of the PNG they allow is 200 x 60px.
Can someone help and tell me how what exactly i need to change in the code to do this?
my url is
woodwardandfox.com
password is rankin
Thank you
Solved! Go to the solution
This is an accepted solution.
yes i will fix first duplicate theme
https://help.shopify.com/en/manual/your-account/staff-accounts/create-staff-accounts
This is an accepted solution.
great, Thanks yes i have sent please check and let me know so i will check code and fix
This is an accepted solution.
Sorry for facing this issue, it's my pleasure to help us.
i have checked but sorry i can't see the logo current text base logo can you please show me
no rush
so do you need help?
Thanks for it
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media screen and (max-width: 640px) {
.Header__LogoImage {
max-width: 150px !important;
}
}
hi @KetanKumar
Okay So I duplicated my theme and added the code you suggested.
It doesnt seem to change the desktop version, but I think it changed the mobile size. But i am struggling to tell. Dont really know what I am looking for if that makes sense.
Here is a screenshot of the new mobile version with your code.
The desktop has stayed the same size as the live website now.
.Header__LogoImage {
max-width: 160px !important;
}
Thanks
this is what i what i am looking for.
I made this on photoshop.
praying someone knows how to do this... 🙂
yes, can you please upload same as logo file so i will guide CSS code if any required
Hi, so ive created and uploaded a new version of logo with the recommended logo size of 200 x 60 pixels.
I wasnt sure what size to make the image but I uploaded it as a png.
Hoping you can somehow get it to work for me 🙂
thank you
Thanks but it's too smaller
can you please upload the logo 600x40 remove top and bottom blank spacing
Hi @KetanKumar
I have uploaded a new logo with the size you requested - 600 x 40.
Hope this works. Thanks again!
thanks for it's not update your logo
now it's to smaller please check
or can you please add me to staff account so I will quick fix
hi
thanks for the offer.
How do I add you?
Also - would you be able to do it on a duplicate theme? as I am too scared in case something goes wrong. I will create a KatanKumar duplicate theme 🙂
This is an accepted solution.
yes i will fix first duplicate theme
https://help.shopify.com/en/manual/your-account/staff-accounts/create-staff-accounts
hi... what is your email?
isnt it easier to just do Collaborator Access as your a shopify partner?
This is an accepted solution.
great, Thanks yes i have sent please check and let me know so i will check code and fix
This is an accepted solution.
i have done this please check
Hi I have the same problem and still can't resolve it. Can you help me please?
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
hello i also used the code you wrote above, it works everything is perfect. The only problem is that in the checkout the logo still remains small, I refer to mobile. Do you have a code to enlarge the logo also in the checkout?
Hi @KetanKumar, I'm facing the same issue. I made my logo image 600x40px like you said, but now the header is smaller like I want but I can't see the logo. Can you please help me fix this issue?
Dear @woodwardandfox
Hope it will help
/* Start */
@media screen and (min-width: 641px) {
.Header__LogoImage { max-width: 75%; }
}
@media screen and (max-width: 640px) {
.Header__LogoImage { max-width: 135px; }
}
/* End*/
If you still need help you can contact us by using the link or email given at signature.
hi, @MS-WEB-DESIGNER
thanks for this. I have tried but it didnt change anything... on mobile or desktop.
it works !
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024