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!
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;
}
}
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.
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024