Shopify how to add a mobile Logo | Theme modification
HTML-код
- Опубликовано: 6 окт 2024
- In this video, we will implement a separate logo for the mobile view.
Are you interested in becoming a developer? 👨💻 Start here: codingwithjan.com
🔔 Subscribe to Coding with Jan on YT:
www.youtube.co...
🧑💻 About our Remote Developer Bootcamp:
In Freemote we teach people how to code and help them land their first developer job or become freelance developers.
We can help if:
You are committed to making a change in your life.
You are currently making less than 6-figures/year and want to get there.
You would like to work remotely and independent of your location.
You are looking for a clear, structured, and proven learning path.
You would like to get personal guidance and direct feedback from mentors.
You would like to join a community of other like-minded people.
You want to be in control of your schedule, work, income, and lifestyle.
Start here ► codingwithjan.com
We’re looking forward to working with you! :-)
🔎 SEO Description:
We will modify the debut header section in such a way that a user can upload a second logo. Then we will use some basic CSS media queries to display the correct logo on mobile and the other on desktop.
Great video. Thanks for taking the time to explain the why of every step. It helped me do this on a theme with different file organisation.
Thank you for the great tutorial! Thank you! I'm not sure if I mixed the code up somewhere. In order to get mine to work I needed to edit the CSS with
}
.logo-mobile img {
display:none;
}
@media screen and (max-width: 750px) {
.logo-mobile img {
display:block;
}
.logo-desktop img {
display:none;
}
}
Hey Jan, könntest du mal ein Video über den gesamten Header machen. Wie man ihn personalisiert beispielsweise (Anordnung der Button etc.)
Hi, Jan
Can we also add a mobile-specific header banner in Shopify if yes then how?
I keep trying to upload my logo to Shopify but when I upload it, it looks very weird in terms of dimensions to the page. every time I increase the logo with it makes the header size increase as well, throwing off the look of my store. is there a way to to increase the logo on Shopify without it increasing the size of the header as well? do I have to do something to the image before uploading it? it is a png file by the way. PLEASE HELP!!! causing me so much stress lol
Hi Jan, I followed these steps for trying to add the option of mobile image selection to a hero slideshow image. I'm stuck at the last steps regarding the logic required to determine hiding/unhiding the desktop or mobile image as it is dependent on responsive media query. Can you please assist at all? I am using a brooklyn theme. Thanks
Hey there, so you already managed that both images are visible and you have all the settings you need, correct?
Regarding the media querys, where do you struggle in particular ?
@@CodingWithJan I duplicated the code originally and then added the schema information. I had trouble applying the 'if' logic. Whenever I attach the mobile image the original image actually disappears. I've since tried a different method: community.shopify.com/c/Shopify-Design/Different-images-for-mobile-than-desktop-web/td-p/522935/page/4
my latest rendition of the code in on page 4 :) In this version the image is not swapping to the mobile one when the screensize goes below the specified width
MAAAAAAAAAN!!! YOU ARE A SUPERHEROOOO!!!!!!!!!!
Keep up with great work
great content! thanks :-) Can you do a video on display "you save" within and sale tag like image that's inline with the compare/regular price line? that would be great!
Thank you for this incredible video! May I ask do you know is there a way I can put different slideshow in mobile?? I'm using Narrative template.
I tried to find solution but most of the discussion is for Debut template...
Thank you in advanced!
Hi jan, Thank you for this Tutorial, I am using the supply Theme, and I followed everything you said and it worked , right up till the last bit about hiding/unhiding for mobile and desktop. Are you able to somehow go through the hiding and unhiding of the logo for desktop and mobile for Supply Theme in another tutorial? Thank you so much for any help you can provide. Thanks.
Hey Aloysius,
The process of hiding and showing should be similar for all the themes.
Make sure you have the same class names used in the video.
If you still can't figure that out I’d recommend working with a developer. If you don’t know one yet, we also offer to get you in touch at codingwithjan.com/developers
Have a nice day! :-)
Hey any idea on how to do this on Baseline theme? Cant seem to locate the correct code in header.liquid
Another excellent video. thank you.
Hi, while following your instructions I get this message when saving "Error: Invalid JSON in tag 'schema'"
{
"type": "image_picker",
"id": "logo",
"label": {
"en": "Logo image",
},
{
"type": "range",
"id": "logo_max_width",
"label": {
"en": "Custom logo width",
},
"min": 50,
"max": 250,
"step": 5,
"unit": "px"
},
"default": 100
},
Hi Jan! Really appreciate your informative videos!
I am having an issue here, and i hop you can help.
I am using the Supply theme.
How do I remove the white space from around my logo on the home page? I have cropped the logo as close as possible. On desktop the logo looks fine, but on mobile there is a lot of white space around the logo. How do I remove this whie space? is it padding?
Hi Jan I have a problem in size of logo in phone on Brooklyn theme logo is very small I need it to look big like desktop!! Can you please help me out !!
Please teach for supply theme
Hello Jan, I am using Brooklyn Theme and the source code seems different than yours. I am having issues to modify the logos independently. Could you please help me with this?
Hey there,
so I just had a look at the Brooklyn theme and it might be a little bit more challenging because they already have a second image for the transparent background.
The process however stays the same.
1. You would introduce new customizer settings for your mobile image.
2. You would duplicate the markup, that renders the image
3. You adjust the variable names in your new markup, so that it loads the image from your new settings
4. You would hide the old markup on mobile and the new markup on desktop.
If you try this on your own, you could describe at which point it gets overwhelming and if you elaborate on what exactly is not working then I´ll try to give you advice on that.
Otherwise, you might want to reach out to a developer to implement this. You can find someone on Fiverr for like 10.-15 $ I think.
Hope that helps :-)
your videos are amazing, i have a similar issue to this but it's with a hero section on a paid for theme. My images are perfect for desktop but are way too small for mobile. how could I different hero section photos for mobile and desktop? would it be the same process but edit the homepage code instead, any help would be great :)
I am not able to modify the size individually for either logo. The mobile one just control all of them
followed this on the wrong theme, Brooklyn and ended up getting super close but the logo disappeared on mobile
I am Trying to make logo bigger, but i was not able to bet the search bar with control+f , i am using a macbook,
any ideas
Hi, I tried this code but I got this error "Error: Invalid JSON in tag 'schema' "
Hi Sama, there is an error in your schema tag. Maybe a coma missing or a small typo.
You can copy anything inbetween your schema tags and paste in into a JSON validatior (simply Google for it). There you will see what is wrong. Hope that helps :-)
@@CodingWithJan Tanks Jan is solved
@@samakanan1597 awesome :-)
Jan, How to just make existing logo bigger on the mob version? I did the web. Lets say 320pxl? Thank you.
Boss 🙌
Great Job Sir,
everything works except my logo is sliightly too big. making a smaller logo.png file only reduces the quality of the logo and not the size. any advice? Thanks again!
You're brilliant!
Thank you 😁
hi,
can our title be changed according to size and color eg. I'm selling rugs and for a product we got 3 colors and 3 sizes so if we change the size the price will change but unfortunately the title will not be changed is it possible that we can have multiple title according to size variation
Hi there,
would the title just contain the selected size and color, or would it be completely different for every variant?
Anyways this will require some good understanding for JavaScript.
You might consider reaching out to a Developer with experience in that field.
is it going to work with prestige theme?
The theme code might look different, but yes technically it can be implemented. Just make sure to duplicate your theme before trying :-)
🎯 get personal advice for your developer career. (free for a short time)
codingwithjan.com/career-advice
Hello Jan idk if you gonna read this cmnt, but I got an error (Error: Invalid JSON in tag 'schema') if you can help thanks!
maybe you are missing out on any end syntax like commas or brackets do use a json formatter to do so. Thanks
I had the same issue at first because I didn't delete a couple commas. Make sure the code is EXACT to what you see in the vid.