In this shopify dawn theme customization tutorial I will show you how to customize the dawn theme home page with some CSS and also apply some animations/transitions to different sections. With these changes you can take your shopify dawn theme design to the next level.
I will first show you how to create a custom CSS file in your Dawn theme where you can keep your custom CSS. Then I will show you how to customize the main menu. Next I will show you how to make changes to the banner text. Next I will show you how you can change styles for featured products section and product title links. I will also show you how to change the background for the footer section. Finally I will get into animations and apply animations to different sections of Dawn theme.
I will add animations to banner text, rich text section, featured products and the footer. Finally I will review all the custom changes I apply on Dawn theme.
Timestamps:
00:00 Intro
01:25 Add custom css file
03:38 CSS changes for main menu
05:15 CSS changes for banner image text
06:13 CSS for featured products heading
07:29 CSS for product title links
08:20 Change footer background color
09:25 Add AOS animations library
11:48 Add animation for banner text
13:28 Add animation for rich text section
14:38 Add animation for featured products section
15:48 Add animation to footer
16:54 Review all custom changes
17:24 Troubleshooting tips
You can copy/paste code from here while referencing the video
https://docs.google.com/document/d/13AUJucru1nQMqrFiEi7IHhKEVSpWU9nFs4sFfO7Pqas/edit?usp=sharing
Link for Animate on Scroll Library:
https://michalsnik.github.io/aos/
Shopify is one of the leading ecommerce platforms for online stores and point of sale systems.
It is easy to use and you can be up and running in no time.
If you have not signed up already go to www.shopify.com to get started.
source
what if you have a drop down arrow? it does not underline the hole name. Instead it underlines the drop down arrow an halv of the name on the navigation bar. Please help me. I really love your underline animation.
Thank you. 👍👍
hey, it seems like the AOS code doesnt work on the Sense theme, is that right or am i doing smth wrong?
Am I the only one who doesn't speak code? No idea what I just watched, lol.
Do you know a code or a video for more space on the website?I think its a little bit annoying that everything comes directly after the block before
for the header i entered the code and it all worked accept for the underline animation from left to right when hovering over menu item.
Hey, great video.
I’m having some difficulties I’m following the steps but no changes are made in my website.
I would appreciate your help
How to add animation to announcement bar?
Hi! Thank you for this! Helped me with what i'm working with. I would like to ask if the same css for the header menu can be applied to the footer menu/links as well? If yes then how?
AOS part was very unclear to me what do I copy and paste??
2:27 how did you make the search bar appear? XD
This was absolutely helpful. Thank you so much. 🙂
Webmaster excellent video!! I was looking for something just like what you gave us… I have a question, is it possible to change the color of the font but not like on the whole page, only in certain places, and the same with the CTA buttons?
thank you sooo much!
Thank you so much!!
Hey Webmyster, thank you for another amazing video tutorial, how can i have only the hover animation on menu nav?
When i paste the whole code it breaks my menu/nav aligment.
Thank you
Your content is absolute Gold and you are an absolute legend ✨✨
Once again, great video. thank you!
hi
I'm migrating from Debut theme to Dawn theme and notice it lacks basic editing possibilities when working with text and images (which is suck because it is a 2.0 version and all…).
Anyway, I'm trying to find how to center the Featured Collection Heading text & Blog post Heading as well on the main page.
please do a video
keep up the great work bro
thanks bro!