Shopify themes, liquid, logos, and UX
Hello,
I have a debut theme and would like to change the size of my logo for desktop view only. It looks good on mobile, although not big enough on desktop.
test27
Thanks!
Solved! Go to the solution
This is an accepted solution.
The recommended logo size for all Shopify themes is 512 x 512 px. Check out the table below for further recommended specifications, and image best practices across our platform:
Image type Dimensions Format Size
Header image | 2048 x 512 px | PNG or JPG | Less than 20 MB |
Logo image | 512 x 512 px | PNG or JPG | Less than 20 MB |
Product image |
| PNG or JPG | Less than 20 MB |
In the Debut theme you can even adjust your logo width from a minimum 50px to a maximum 250px after you upload it under Admin > Online Store > Theme > Customize Theme > Header as such:
You must even be interested in some photography best practices to learn more about the do's and don'ts of:
If you have any other questions, don't hesitate to reach back out.
Warm regards,
This is an accepted solution.
hello @Liz93
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
@media only screen and (min-width: 750px){
.site-header {width: 100% !important;}
.site-header__logo-image {max-width: 235px !important;}
.site-header__logo-image >img {
max-width: 240px !important;
}
}
can you please add this code
your mobile device too much smaller image please add below code also check theme customization header setting its allow to logo size
.template-index .site-header {width: 100%;}
Hi @KetanKumar
I want to keep it the size it is at the moment for mobile view, although I want it bigger for desktop view and on Shopify if I change the logo size, it changes both.
Where should I paste that code?
Thanks
hii, @Liz93
Paste this code on top of the theme.scss file.
@media only screen and (min-width: 992px) {
h1.h2.site-header__logo {
min-width: 175px !important;
}
}
Thank You.
Please add the following code at the bottom of your assets/theme.css file.
@media only screen and (min-width: 750px){
.site-header {width: 100%;}
.site-header__logo-image {max-width: 235px;}
}
Thanks!
hii, @Liz93
Paste this code on top of the theme.scss file.
@media only screen and (min-width: 992px) {
img.js.lazyautosizes.lazyloaded {
min-width: 250px !important;
}
}
Thank You.
This is an accepted solution.
The recommended logo size for all Shopify themes is 512 x 512 px. Check out the table below for further recommended specifications, and image best practices across our platform:
Image type Dimensions Format Size
Header image | 2048 x 512 px | PNG or JPG | Less than 20 MB |
Logo image | 512 x 512 px | PNG or JPG | Less than 20 MB |
Product image |
| PNG or JPG | Less than 20 MB |
In the Debut theme you can even adjust your logo width from a minimum 50px to a maximum 250px after you upload it under Admin > Online Store > Theme > Customize Theme > Header as such:
You must even be interested in some photography best practices to learn more about the do's and don'ts of:
If you have any other questions, don't hesitate to reach back out.
Warm regards,
Thanks! welcome again.
This is an accepted solution.
hello @Liz93
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
@media only screen and (min-width: 750px){
.site-header {width: 100% !important;}
.site-header__logo-image {max-width: 235px !important;}
.site-header__logo-image >img {
max-width: 240px !important;
}
}
User | RANK |
---|---|
176 | |
160 | |
77 | |
31 | |
31 |
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023