[Transparent Header Dawn 8.0 ] How To Add Transparent Header in Dawn 8.0

  Рет қаралды 5,800

WebSensePro

WebSensePro

Күн бұрын

In this tutorial, I'll show you how to add a transparent header to your Shopify Dawn Theme Version 8.0. A transparent header is a great way to give your online store a modern and sleek look, and it can help highlight your brand's logo and menu options. Plus, it's easy to implement with just a few simple steps!
First, we'll need to access the code editor in Shopify. I'll walk you through how to do this step by step. Once you're in the code editor, we'll need to locate the correct file to edit. I'll show you where to find this file and how to open it.
Next, we'll modify the code to make the header transparent. I'll guide you through the process of adding some CSS code to the file, which will change the header's opacity and make it transparent. I'll also show you how to adjust the opacity to your liking.
Finally, we'll test the changes to make sure they're working as expected. I'll show you how to preview your store with the transparent header, and we'll make any necessary adjustments to the code.
By the end of this tutorial, you'll be able to add a transparent header to your Shopify Dawn Theme Version 8.0 with ease. It's a great way to give your online store a modern and professional look, and it's sure to impress your customers!
If you want help with Shopify Customization, store development, or any other web development help. Contact us at websensepro@gmail.com
00:00 Intro
01:12 Editing Header liquid file
06:00 Editing Theme liquid file
Code: websensepro.com/blog/transpar...
If you want help with Shopify Customization, store development, or any other web development help. Contact us at websensepro.com/contact-us/

Пікірлер: 117
@WebSensePro
@WebSensePro 3 ай бұрын
For latest 13.0.1 themes, please check out this video kzfaq.info/get/bejne/rbGeobma3NCmoqc.html
@thenightshow2767
@thenightshow2767 Жыл бұрын
This is such an amazing tutorial. You deserve a lot more recognition. Keep it up and thank you!
@WebSensePro
@WebSensePro Жыл бұрын
Thanks for appreciation, if this video/channel you helped in any way please support by Subscribing and Hit the Like button.
@shayanzaidi2836
@shayanzaidi2836 Жыл бұрын
This worked perfectly, thank you for the updated tutorial. It's exactly what I needed.
@WebSensePro
@WebSensePro Жыл бұрын
Glad it helped
@jasonvanleeuwen9377
@jasonvanleeuwen9377 Жыл бұрын
Wow! This is amazing. You are one of the people who don’t want money for their actions, and thats really awesome of you! I subscribed!
@WebSensePro
@WebSensePro Жыл бұрын
Great
@bastsauna
@bastsauna Жыл бұрын
Love all your content! Thanks for all your help!
@WebSensePro
@WebSensePro Жыл бұрын
Thanks for appreciation, if this video/channel you helped in any way please support by Subscribing and Hit the Like button.
@Marsian.Empath
@Marsian.Empath Жыл бұрын
Thank you so much - your video has saved me .. i'd love to see more of your great work on Dawn 8
@WebSensePro
@WebSensePro Жыл бұрын
Your welcome
@NicolleFigueiredo
@NicolleFigueiredo Жыл бұрын
Amazing video! thank you so much!! Looking forward to your next video.
@WebSensePro
@WebSensePro Жыл бұрын
Your welcome
@WebSensePro
@WebSensePro Жыл бұрын
Updated Tutotiral for Dawn 10.0.0 transparent header kzfaq.info/get/bejne/kJd6mM95rKrOfYk.html
@martinm8388
@martinm8388 Жыл бұрын
Thanks a lot dude, very well explained, so easy to follow. 🙏🏼
@WebSensePro
@WebSensePro Жыл бұрын
You're welcome! Don't forget subscribe, like and share 🙌
@AntonSchwartz-wz2il
@AntonSchwartz-wz2il Жыл бұрын
Thank you so much, very helpful 🙏
@WebSensePro
@WebSensePro Жыл бұрын
Your welcome
@Catfesty
@Catfesty Жыл бұрын
I love you, thanks !!!!
@WebSensePro
@WebSensePro Жыл бұрын
Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.
@Plumasdesign
@Plumasdesign Жыл бұрын
I have to say !! you are the best !!!
@WebSensePro
@WebSensePro Жыл бұрын
🤣🤣🤣 Thanks
@diegoaaroyocasado
@diegoaaroyocasado Жыл бұрын
Bro, thx so muchh!!! It works with dawn 9.0
@WebSensePro
@WebSensePro Жыл бұрын
Your welcome
@ecomandrew
@ecomandrew Жыл бұрын
Your the Best!!
@WebSensePro
@WebSensePro Жыл бұрын
Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.
@samistylein
@samistylein Жыл бұрын
thank you Bro its working perfectly
@WebSensePro
@WebSensePro Жыл бұрын
Your wrelcome
@kajalsoni4672
@kajalsoni4672 Жыл бұрын
Thank you sir 🎉
@WebSensePro
@WebSensePro Жыл бұрын
Your welcome
@whatthewellyoutube
@whatthewellyoutube Жыл бұрын
thankyou soo much for this
@WebSensePro
@WebSensePro Жыл бұрын
Your welcome
@developerstech5270
@developerstech5270 Жыл бұрын
wow. that's great
@WebSensePro
@WebSensePro Жыл бұрын
Thanks for appreciation, if this video/channel you helped in any way please support by Subscribing and Hit the Like button.
@cottadesignstudio
@cottadesignstudio 6 ай бұрын
Hi! This is an amazing tutorial! Thank you. Are you also planning to make 12.0.0 version?
@WebSensePro
@WebSensePro 6 ай бұрын
kzfaq.info/get/bejne/kJd6mM95rKrOfYk.html this one should work
@Fumesgone
@Fumesgone Жыл бұрын
hey can you please do this for dawn 9.0 as it doesnt work for 9.0 :( many thanks
@WebSensePro
@WebSensePro Жыл бұрын
Yes video in process. Turn on notifications
@FLEXXJET
@FLEXXJET Жыл бұрын
@@WebSensePro it actually work with 9 however not sync with mobile view
@lecrow5684
@lecrow5684 Жыл бұрын
Hi. Thank you for this tutorial. It was extremely helpful, but I have one question. How can I keep the On Scroll Up option instead of sticky? And also, do you know how I can make the transition between transparent and white a bit smoother? Again, great tutorial, and thank you!
@WebSensePro
@WebSensePro Жыл бұрын
On scroll up - its a builtin freature for 9.0 0 themes Transition - yes but with code
@user-bq7uk8tl1e
@user-bq7uk8tl1e Жыл бұрын
thank u so so much!!! is it possible to do this while having the burgermenu? added code for burgermenu but cant seem to make it work with the transparat header...
@WebSensePro
@WebSensePro Жыл бұрын
Will have to check
@marlenerodriguez779
@marlenerodriguez779 Жыл бұрын
It works for 9.0 version too! Thank you! Just had to look around some more but it still works. Can you make a video on how to make a logo for the transparent sticky header? Thank you!
@WebSensePro
@WebSensePro Жыл бұрын
In progress you will see it soon
@Rik_Hill
@Rik_Hill Жыл бұрын
How did you get it to work on 9.0? Ive done exactly as this video said but the option for transparent header doesnt exist :| *EDIT* - I sorted it :)
@ZHA_Entreprise
@ZHA_Entreprise Жыл бұрын
Outstanding ✔
@WebSensePro
@WebSensePro Жыл бұрын
Thanks for appreciation, if this video/channel you helped in any way please support by Subscribing and Hit the Like button.
@ZHA_Entreprise
@ZHA_Entreprise Жыл бұрын
@@WebSensePro Hello brother, the code is not working anymore in the recent 9.0 update :(, can we get the fix please?
@ZHA_Entreprise
@ZHA_Entreprise Жыл бұрын
rectification, i made it work, fix: the code has changed for 1st code replacement in header.liquid. I just let it the same and just added your additional code with it. Thank you a lot brother
@ZHA_Entreprise
@ZHA_Entreprise Жыл бұрын
Sorry man, the header do not scroll back to normal now :/
@nathanodriscoll3230
@nathanodriscoll3230 Жыл бұрын
Could you make a tutorial for the updated Dawn 9.0.0 theme ?
@WebSensePro
@WebSensePro Жыл бұрын
Yes in making, with more features. Stay tuned
@user-zf6jv7jh4j
@user-zf6jv7jh4j Жыл бұрын
Thank you so much for the great tutorial. I also tried your changing cart logo tutorial and it worked with this tutorial. But I had one problem. Cart logo that I placed was keep showing the white background and i cannot seem to get rid of it. Could you help me how to get rid of this white background on the cart logo?
@WebSensePro
@WebSensePro Жыл бұрын
Glad it helped! Background color should be removed via some css changes
@Tomm8
@Tomm8 Жыл бұрын
I love you
@WebSensePro
@WebSensePro Жыл бұрын
I love you 2 3 4 :p
@Sipan742
@Sipan742 Жыл бұрын
Great video! When will the video with two logos be released? Also can you make it somewhat animated so there is a fade as it transitions?
@Sipan742
@Sipan742 Жыл бұрын
I have been able to make these changes, if you would like I can message you and let you know how to do it
@WebSensePro
@WebSensePro Жыл бұрын
Video coming next week for 2 logos
@allenzy
@allenzy Жыл бұрын
Yes, I would like a video on this please! Great idea
@bastsauna
@bastsauna Жыл бұрын
Hi and thanks for all the great content! I love what you're doing. I've tried the following steps a few times and unfortunately the header is not showing on mobile after all the code fixes. Do you have any tips? Thanks again!
@WebSensePro
@WebSensePro Жыл бұрын
Works fine on desktop?
@bastsauna
@bastsauna Жыл бұрын
@@WebSensePro Yes! It works fine on desktop.
@bastsauna
@bastsauna Жыл бұрын
So when I click the header on mobile, the categories aren’t showing.
@bastsauna
@bastsauna Жыл бұрын
​@@WebSensePro What do you think the problem could be? One code change I've made in my current version is the slider functionality from your guidelines and that one worked perfectly!
@basmonston6890
@basmonston6890 Жыл бұрын
@@bastsauna I have the same problem. You find a solution ?😊
@Bruno_Carneiro
@Bruno_Carneiro Жыл бұрын
HOLY SHIT, THANK YOU SO MUCH! How do you know these things? Do you study java?
@WebSensePro
@WebSensePro Жыл бұрын
🤣🤣 Magic🧙‍♀️🧙‍♀️🪄
@vineetkorpal
@vineetkorpal Жыл бұрын
Any tips on how to make the header and announcement bar solid since mine is transparent? Any help would be appreciated!.
@WebSensePro
@WebSensePro Жыл бұрын
You added announcement bar after transparent header?
@juanescalante1435
@juanescalante1435 Жыл бұрын
awesome! but I do have a question, how could I change my logo color when I keep scrolling down?
@WebSensePro
@WebSensePro Жыл бұрын
Team is working on a new tutorial which will include this feature on latest dawn theme. Stay tuned
@TheMarcozbet
@TheMarcozbet Жыл бұрын
Thank you so much for this video!! Unfortunately it does need some fixing with mega menu
@TheMarcozbet
@TheMarcozbet Жыл бұрын
Is it possible to implement some code and get the header back to normal as soon as the mega menu has been clicked?
@WebSensePro
@WebSensePro Жыл бұрын
Yes possible with some JS code
@TheMarcozbet
@TheMarcozbet Жыл бұрын
@@WebSensePro Could you please help me with that?
@WebSensePro
@WebSensePro Жыл бұрын
Sure email websensepro@gmail.com with complete details for e.g Store Url and screen recording of the issie
@TheMarcozbet
@TheMarcozbet Жыл бұрын
@@WebSensePro Hi, thank you so much, I have sent you an email. I hope you could help me
@minimapetcare
@minimapetcare Жыл бұрын
thank u so much bro. I followed every step transparent header is okey but sticky is not normal when i scroll down it still transparent
@WebSensePro
@WebSensePro Жыл бұрын
Could be a CSS issue
@elodiermd3156
@elodiermd3156 Жыл бұрын
Hello, can you please make a video for the Dawn Theme 10.0.0 ?
@WebSensePro
@WebSensePro Жыл бұрын
kzfaq.info/get/bejne/kJd6mM95rKrOfYk.html Transparent header for Dawn 10.0 0
@fidelity4342
@fidelity4342 Жыл бұрын
I followed the video wich was very clear on what to do and i followed every step. Now when you visite the site it wil first show the normal banner, but only when you scroll down it becomes transparant and then it will work fine. any fix?
@WebSensePro
@WebSensePro Жыл бұрын
Not properly implemented, make sure you didn't have any customisation before following this tutorial
@fatimahxaouss
@fatimahxaouss Жыл бұрын
Also I'm afraid I don't have the second "details" code on 10.0 version, what should I do ?
@WebSensePro
@WebSensePro Жыл бұрын
Video for 10.0.0 Dawn coming next week, stay tuned
@DamianSchutten
@DamianSchutten Жыл бұрын
I followed every step you did and it workt so thx for that, but on my mobile devide the menu doesn´t work anymore how do i fix that?
@DamianSchutten
@DamianSchutten Жыл бұрын
Oh never mind. I followed you're video a nother time step by step and now is works thx!!
@WebSensePro
@WebSensePro Жыл бұрын
Great, thanks for sharing with us that it worked!
@weavingthevaluess
@weavingthevaluess Жыл бұрын
how can i get a transparent header on ALL pages not just the home page?
@WebSensePro
@WebSensePro Жыл бұрын
There is an IF check which needs to be removed
@philip_los_santos3628
@philip_los_santos3628 Жыл бұрын
Does this work on the dawn theme too?
@WebSensePro
@WebSensePro Жыл бұрын
Yes it does
@gianmarcomontagno
@gianmarcomontagno Жыл бұрын
do you have an idea why I lost my sticky header?
@WebSensePro
@WebSensePro Жыл бұрын
Cant tell without checking the code
@victorialkke9935
@victorialkke9935 Жыл бұрын
Mine says "Unable to update the file - Invalid JSON in tag 'schema'".. can this be fixed?
@WebSensePro
@WebSensePro Жыл бұрын
Redo all steps again, you have missed a step
@DamianSchutten
@DamianSchutten Жыл бұрын
Can you make a turtiol for versie 10.0?
@WebSensePro
@WebSensePro Жыл бұрын
Coming next week, subscribe and turn on notifications
@matheuscarvalho0029
@matheuscarvalho0029 Жыл бұрын
Does it work for refresh theme too?
@matheuscarvalho0029
@matheuscarvalho0029 Жыл бұрын
it works! great video, thank you! already subscribed
@WebSensePro
@WebSensePro Жыл бұрын
Thanks for confirming
@lukefrn2702
@lukefrn2702 Жыл бұрын
Hi, it doesn't seem to work on dawn 10.0 do you have any solution ?
@WebSensePro
@WebSensePro Жыл бұрын
Will add updated version, coming month.
@martinharter5067
@martinharter5067 Жыл бұрын
@@WebSensePro would appreciate it as well! subscribed!:)
@richbostock3700
@richbostock3700 Жыл бұрын
Yea please make this vid soon! Keep up the great work!
@SmallTechGaming
@SmallTechGaming 5 ай бұрын
This work with dawn 12.0??
@WebSensePro
@WebSensePro 5 ай бұрын
Yes, it should. Updated video coming next week
@FLEXXJET
@FLEXXJET Жыл бұрын
Sadly I tried it with version 9, the Header becomes hidden if I activate the transparent header
@WebSensePro
@WebSensePro Жыл бұрын
Redo the tutorial from scratch it should work fine in Dawn 9.0
@OptimisticBagel
@OptimisticBagel Жыл бұрын
On mobile the drop-down button does not work how do I fix this?
@WebSensePro
@WebSensePro Жыл бұрын
Are they working without this code?
@OptimisticBagel
@OptimisticBagel Жыл бұрын
@@WebSensePro yes they work without the code but it’s on both platforms too that is doesn’t work
@NordicClothing
@NordicClothing Жыл бұрын
can you remove it from mobile devices
@WebSensePro
@WebSensePro Жыл бұрын
Yes can be done with CSS
@NordicClothing
@NordicClothing Жыл бұрын
@@WebSensePro how do i do that. can you send me the code or something
How To Make A Transparent Header In Shopify
8:56
OnHOW
Рет қаралды 54 М.
Vivaan  Tanya once again pranked Papa 🤣😇🤣
00:10
seema lamba
Рет қаралды 35 МЛН
Despicable Me Fart Blaster
00:51
_vector_
Рет қаралды 14 МЛН
How to use Shopify Metaobjects
19:21
Coding with Jan - Shopify Developer
Рет қаралды 69 М.
How To Show Transparent Header in Dawn Theme V13 [2024]
14:30
WebSensePro
Рет қаралды 5 М.
How To Remove Search Bar In Shopify
6:14
OnHOW
Рет қаралды 13 М.
What is Apache Kafka®?
11:42
Confluent
Рет қаралды 343 М.
The UGLY Truth About Dropshipping That No Guru Will Tell You
13:59
MyWifeQuitHerJob Ecommerce Channel
Рет қаралды 1 МЛН
Первый обзор Galaxy Z Fold 6
12:23
Rozetked
Рет қаралды 432 М.
Мой инст: denkiselef. Как забрать телефон через экран.
0:54
iPhone 15 Pro в реальной жизни
24:07
HUDAKOV
Рет қаралды 257 М.