Salut, comment tu as fais pour que le "bloc note" reconnaisse le langage que tu as utilisé, moi le texte et tout gris, ce qui rend les choses difficiles à lire
Thanks for the tutorial! I used it on my dawn theme, and noticed whenever I’m on the top of the page and start scrolling down the header begins to appear (or blink if you will). It may be slightly seen in your video. How can I fix it? I want my header to permanent without blinking. Thanks for advice!
It is doing it on mine too and I noticed that the header bar will still scroll up just until it gets to the bottom of the header bar and THEN it will stick in place. So there has to be something in the script that is telling it when to actually stick to the top as the user is scrolling Im guessing.
You know what, I think I fixed it. After doing some research I removed that whole section from the header.liquid file and moved it to the very bottom of the global.js file. I didn't change any of the code other than what Will showed us above, I just moved the code to the other file. Now because you are moving it into a js file you don't need the {% javascript %} open and {% endjavascript %} close tags.
@@Tony-nu8vr I moved the entire js section that is controlling the sticky header out of the header.liquid file and into the end of the global.js file. It started with {% javascript %} class StickyHeader extends HTMLElement {.... and ended with .... customElements.define('sticky-header', StickyHeader); {% endjavascript %}. Because you are placing into a .js file specifically you can delete the open and closing {% javscript %} tags.
Hi Will, Thank you for the informative video. I have a question: I have followed everything you have stated on the video, but just can't get my header to stick permanently. Would you happen to know what I could have done wrong? I even duplicated my theme. It would mean alot if you can answer. Thank you in advance.
Hi Marlene, it's hard to say for sure without knowing more. If you know how to use chrome devtools you may be able to troubleshoot it that way. Wish I could help more, sorry.
Super helpfull Will! I was wondering if you could make a video about setting up the header as transparent and changing its color while scrolling (for example transparent to white)? Keep up the good work!
Hi Swan, this would be a matter of either coding up the mega menu yourself or copying it from another theme and pasting it into Dawn. (Some work would have to be done here to make sure everything is playing nice together)
Hi, thank you Will, your Videos are so helpful. A question I have is how do i center EVERYTHING on a product page? Somehow I got the main grid centered, but e.g. the product variant options are still left-aligned I noticed. It feels like the code for centering stuff (title, price, etc on product * collection pages) is all over the place!
Hi GhostWrider, unfortunately there isn't really a quick style we can apply that would do this, so it would probably require a complete redesign of the page.
Hi Joey, this has to do with the styling applied to these elements. You can change those styles by applying other classes on those elements or using inline styling.
Another great video Will. But when I scroll down my product page, the product text actually appears on top of the sticky header. So it's like the sticky header is trasnparent. Images do not appear through header, just the text/prices/swatches. FYI my colour scheme is on background 1.
Thanks for letting me know. That's interesting as that doesn't happen on my product pages. Perhaps setting the z-index of the header higher would fix this in the style tag area of the code. (starts around line 15 for me. Something like: ... sticky-header { z-index: 1000; } ... Let me know if that helps!
@@WillMisback Hi, so I tried deleting the ' header-drawer { justify-self: start; margin-left: -1.2rem; }' and replacing it with the ' sticky-header { z-index: 1000; }' But it didnt change anything. Was that what I was supposed to do?
@@nitro7726 Hi nitro, I wouldn't delete the header-drawer selector just add the sticky-header selector. But if that is not working it probably isn't a z-index problem. If you email me your site's URL, I will be able to help you with this issue much better!
Great Tutorial Video. It helped me so much when I build my own website. I am just wondering if you could make a video about how to set up a customizable contact form in Shopify 2.0 Dawn theme? Like I want to add a filed where the customer can input their company name. Or a drop down menu the customer can choose where do they heard of our website, etc. I looked up all the related videos and I don't think the old methods applied to the new dawn theme. I'd greatly appreciate it. Thank you for reading this.
Hi Raymon, the file you are looking to edit is contact-form.liquid. It is found in the sections folder. To my knowledge you should just be able to add extra inputs to this file and it will relay them to you in the email that Shopify generates. I will definitely consider making a video on this in the future, thanks for the idea!
Hi Will, the videos have been super helpful. I'm still learning to build my first Shopify page ,but making progress. For images on under "featured collection" and for the "collage" section when we scroll over the images, there is a zoom that lasts about .5-1 second. Is there a simple way to make the zoom last 3 seconds and keep zooming in? Thanks for taking the time.
Hi Gilbert, this is most likely a CSS transition effect. To make it longer/zoom further you would have to change the relevant line of CSS. It will be something to the effect of classname:hover {...} Hope that helps!
Thank you for this! Do you know any way to make the header transparent (on the main page only?) so that the image banner can be seen behind the header menu? I knew how to do this before with the debut theme but now I'm lost with Dawn / 2.0 updates. Thanks for your help! ^_^
Hi JJ, you would need to change the background's transparency, either through giving it an rgba value with the a being between 1 and 0, or change it's transparency attribute. Also make sure all elements above that element are completely transparent. Hope that helps!
Hi Jahin, sorry it has taken so long for me to get back to this. This is a little bit complicated for one of my tutorials. I would recommend checking out Flickity Carousels for this if you know how to code (it's a very easy to implement JS caorusel library)
Sticky is ugly because it moves. It should be position: fixed. I am still trying to figure out how to make that work. Shopify Dawn has an over complicated header.
Not working. I am on DAWN 4.0. The "Enable sticky header" doesn't even work and I downloaded a fresh 4.0 theme to make sure. But I did think your video was straight to the point which I loved! =)
great content as always Will, we all appreciate it Can you make a video/explain how to add a hyperlink to an image in the footer? I want to add an image (instagram icon png) in the footer and have the image link to my business' instagram page. In the footer it's only possible to add an image, no image with text or button. Thanks (I am very new to shopify so may be overlooking something basic)
Hi Jack, if you go into your footer's settings and enable "Show social media icons", click the theme settings dropdown in the same customization menu and add your IG account this should work as long as I understand what you are looking for correctly. Let me know if that helps. Nice swing by the way!
Hi Mikael, don't worry about finding it in the inspector. Try finding the hide() function in your header.liquid file, and then follow the instructions at 1:55 in the video. It should look like this: hide() { this.header.classList.add('shopify-section-header-hidden', 'shopify-section-header-sticky'); this.closeMenuDisclosure(); this.closeSearchModal(); } Hope that helps!
![Felix "Unfair" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/Oswujxm2Ag0/mqdefault.jpg)
What features should I cover next?
My Latest Shopify Tips & Tricks: wmiz.github.io/mastering-shopify
@Siddhu Gouda I'm also having this issue..
I'm having the same issue as the others. Would love to have it smooth like the video.
Yes!!! finally a tutorial for this that works... subscribed!
Thanks for the sub!
Thanks! Took a couple of reloads to work and a hard refresh, but works! Thanks!
Glad it helped Mohamed!
Thank you so much for this video! First time here. Subscribed! Very clear explanation! Thank you 😃
Glad it helped Klaas, best of luck with your store!
Salut, comment tu as fais pour que le "bloc note" reconnaisse le langage que tu as utilisé, moi le texte et tout gris, ce qui rend les choses difficiles à lire
Hello, Can you help me? I'm having issues on mobile phone. It's sticky on PC but not on mobile phone
Thanks for the tutorial! I used it on my dawn theme, and noticed whenever I’m on the top of the page and start scrolling down the header begins to appear (or blink if you will). It may be slightly seen in your video.
How can I fix it? I want my header to permanent without blinking.
Thanks for advice!
It is doing it on mine too and I noticed that the header bar will still scroll up just until it gets to the bottom of the header bar and THEN it will stick in place. So there has to be something in the script that is telling it when to actually stick to the top as the user is scrolling Im guessing.
You know what, I think I fixed it. After doing some research I removed that whole section from the header.liquid file and moved it to the very bottom of the global.js file. I didn't change any of the code other than what Will showed us above, I just moved the code to the other file. Now because you are moving it into a js file you don't need the {% javascript %} open and {% endjavascript %} close tags.
@@sarahsaunders9667 can you specify which section you mean
@@Tony-nu8vr I moved the entire js section that is controlling the sticky header out of the header.liquid file and into the end of the global.js file. It started with {% javascript %} class StickyHeader extends HTMLElement {.... and ended with .... customElements.define('sticky-header', StickyHeader); {% endjavascript %}. Because you are placing into a .js file specifically you can delete the open and closing {% javscript %} tags.
Hi Will, Thank you for the informative video. I have a question: I have followed everything you have stated on the video, but just can't get my header to stick permanently. Would you happen to know what I could have done wrong? I even duplicated my theme. It would mean alot if you can answer. Thank you in advance.
Hi Marlene, it's hard to say for sure without knowing more. If you know how to use chrome devtools you may be able to troubleshoot it that way. Wish I could help more, sorry.
Thanks Will, it worked perfectly
Great to hear Wendy!
Hi. For Dawn version 5.0.0 I have not this source code in Global.js. Can you help me ?
Super helpfull Will! I was wondering if you could make a video about setting up the header as transparent and changing its color while scrolling (for example transparent to white)?
Keep up the good work!
Great suggestion! I'm going to look into this, thanks!
@@WillMisback Awesome. Again, great content!
Do you know how difficult it would be to turn the drop down nav into a mega menu nav with code?
Hi Swan, this would be a matter of either coding up the mega menu yourself or copying it from another theme and pasting it into Dawn. (Some work would have to be done here to make sure everything is playing nice together)
Hi, thank you Will, your Videos are so helpful. A question I have is how do i center EVERYTHING on a product page? Somehow I got the main grid centered, but e.g. the product variant options are still left-aligned I noticed. It feels like the code for centering stuff (title, price, etc on product * collection pages) is all over the place!
Hi GhostWrider, unfortunately there isn't really a quick style we can apply that would do this, so it would probably require a complete redesign of the page.
when your customizing your theme how do you get that bottom part to show up? it has elements, sources, console etc on it, looks super helpfull
Hi Itzscuzzi, you can press Control (or command on a mac) + shift + J or Control (or command on a mac) + shift + C
I can't edit the code. I tried to delete the line but the "Save" button isn't clickable.
Hey Armando, this usually happens when the code you have entered is invalid in some way.
Also, maybe try turning off your adblocker (this was suggested to me by a commenter on one of my other videos)
@@WillMisback thanks
It does not work on the product pages
Your video is aswesome. it saved my time Thank u so much
Glad it helped Chahat!
Can you please help me with "featured collection" how to change that font style, font color, alignment in dawn 3.0. kindly please help me with this.?
Hi Joey, this has to do with the styling applied to these elements. You can change those styles by applying other classes on those elements or using inline styling.
Amazing video! Thanks so much Will :)
Another great video Will. But when I scroll down my product page, the product text actually appears on top of the sticky header. So it's like the sticky header is trasnparent. Images do not appear through header, just the text/prices/swatches. FYI my colour scheme is on background 1.
Thanks for letting me know. That's interesting as that doesn't happen on my product pages. Perhaps setting the z-index of the header higher would fix this in the style tag area of the code. (starts around line 15 for me. Something like:
...
sticky-header {
z-index: 1000;
}
...
Let me know if that helps!
@@WillMisback ill give it a shot tomorrow thanks
@@WillMisback Hi, so I tried deleting the
' header-drawer {
justify-self: start;
margin-left: -1.2rem;
}'
and replacing it with the
' sticky-header {
z-index: 1000;
}'
But it didnt change anything. Was that what I was supposed to do?
@@nitro7726 Hi nitro, I wouldn't delete the header-drawer selector just add the sticky-header selector. But if that is not working it probably isn't a z-index problem. If you email me your site's URL, I will be able to help you with this issue much better!
@@WillMisback Hi will. that fix didnt work. I just emailed you my url
thanks
You're a legend bro
Thanks bro you too
Great Tutorial Video. It helped me so much when I build my own website. I am just wondering if you could make a video about how to set up a customizable contact form in Shopify 2.0 Dawn theme? Like I want to add a filed where the customer can input their company name. Or a drop down menu the customer can choose where do they heard of our website, etc. I looked up all the related videos and I don't think the old methods applied to the new dawn theme. I'd greatly appreciate it. Thank you for reading this.
Hi Raymon, the file you are looking to edit is contact-form.liquid. It is found in the sections folder. To my knowledge you should just be able to add extra inputs to this file and it will relay them to you in the email that Shopify generates. I will definitely consider making a video on this in the future, thanks for the idea!
Hi Will, the videos have been super helpful. I'm still learning to build my first Shopify page ,but making progress. For images on under "featured collection" and for the "collage" section when we scroll over the images, there is a zoom that lasts about .5-1 second. Is there a simple way to make the zoom last 3 seconds and keep zooming in? Thanks for taking the time.
Hi Gilbert, this is most likely a CSS transition effect. To make it longer/zoom further you would have to change the relevant line of CSS. It will be something to the effect of classname:hover {...} Hope that helps!
thanks bro my sticky header work !
Glad I could help bro
Thank you for this! Do you know any way to make the header transparent (on the main page only?) so that the image banner can be seen behind the header menu? I knew how to do this before with the debut theme but now I'm lost with Dawn / 2.0 updates. Thanks for your help! ^_^
Hi JJ, you would need to change the background's transparency, either through giving it an rgba value with the a being between 1 and 0, or change it's transparency attribute. Also make sure all elements above that element are completely transparent. Hope that helps!
Turning dawn product page images into slider...
Hi Jahin, sorry it has taken so long for me to get back to this. This is a little bit complicated for one of my tutorials. I would recommend checking out Flickity Carousels for this if you know how to code (it's a very easy to implement JS caorusel library)
Sticky is ugly because it moves. It should be position: fixed. I am still trying to figure out how to make that work. Shopify Dawn has an over complicated header.
Easy peasy, thank you!
No problem, glad it helped!
Lifesaver!
very helpful!
Not working. I am on DAWN 4.0. The "Enable sticky header" doesn't even work and I downloaded a fresh 4.0 theme to make sure. But I did think your video was straight to the point which I loved! =)
Hi Ocean Climber, I'm sorry to hear that. I'll check this weekend to see if the code works on my end, or if I need to edit/update the video!
great content as always Will, we all appreciate it
Can you make a video/explain how to add a hyperlink to an image in the footer? I want to add an image (instagram icon png) in the footer and have the image link to my business' instagram page. In the footer it's only possible to add an image, no image with text or button. Thanks (I am very new to shopify so may be overlooking something basic)
Hi Jack, if you go into your footer's settings and enable "Show social media icons", click the theme settings dropdown in the same customization menu and add your IG account this should work as long as I understand what you are looking for correctly. Let me know if that helps. Nice swing by the way!
Muchas gracias!!!
De nada
IT DOESN'T WORK!
Yes it does, but you do need to get the code perfectly right, including the brackets and spaces etc, watch again.
How does it work now? I want to do this now but can not find that code when I inspect my store, it says:
Hi Mikael, don't worry about finding it in the inspector. Try finding the hide() function in your header.liquid file, and then follow the instructions at 1:55 in the video. It should look like this:
hide() {
this.header.classList.add('shopify-section-header-hidden', 'shopify-section-header-sticky');
this.closeMenuDisclosure();
this.closeSearchModal();
}
Hope that helps!