All things Shopify and commerce
Hi everyone!
I have still problem with Dawn footer. I have now different theme installed but want customize Dawn theme because is lighter than theme what I use now. I want change footer colors like here on the picture. Footer menu with color and section with payment icons-white. Anyone can help me?
Br, Monika
Solved! Go to the solution
This is an accepted solution.
You can just share the preview it will do.
Try this one then.
.footer__content-top.page-width {
background: #ef3167;
max-width: 100%;
padding-top: 36px;
}
footer.footer.color-background-1.gradient.section-sections--19797895905628__footer-padding {
padding-top: 0px;
}
Thank you for your answer, but I don’t see any option to change footer in Dawn and have two separately colors. When I change footer color then all footer section change color. I am sorry I didn’t get it but really I don’t see options to do that🫣
This needs to be done via custom CSS. Can you provide following this to me so that i can write you the custom CSS
1. URL to your store
2. Color code of two footers
Hi, thank you for your answer.
and color code for first footer with menu is #ef3167 and footer with payment icons and copyright #ffff
Hi @MonikaK ,
Please add below codes on the theme.liquid file:
<style>
#shopify-section-footer > footer > div:nth-child(2){
background: #ef3167 !important;
max-width: 100%!important;
}
#shopify-section-footer > footer > div:nth-child(3) {
background: white!important;
max-width: 100%!important;
}
.site-footer__content {
max-width: 1200px!important;
margin: 0px auto!important;
padding-top: 30px!important;
padding-left: 55px!important;
padding-right: 55px!important;
}
.grid.grid--no-gutters.small--text-center.grid--footer-float-right {
max-width: 1200px!important;
margin: 0px auto!important;
padding-bottom: 30px!important;
color: #000!important;
padding-left: 55px!important;
padding-right: 55px!important;
padding-top: 15px!important;
}
footer.site-footer {
padding-bottom: 0px!important;
}
small.site-footer__copyright-content, .site-footer__copyright-content a {
color: #000!important;
}
@media only screen and (max-width: 600px) {
.site-footer__content, .grid.grid--no-gutters.small--text-center.grid--footer-float-right{
padding-left: 22px!important;
padding-right: 22px!important;
}
}
</style>
Steps to add CSS:
Step 1: Go to Online Store > Themes > Active theme > Edit
Step 2: Search for "theme.liquid"
Step 3: Add the CSS above "</body>"
If you require further help to add the code to your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
Mangit
Hi,
Thank you for answer but code does not working. I want edit Dawn theme that is not published yet. Can be this issue?
Hi @MonikaK
Try this one.
#shopify-section-footer > footer > div:nth-child(2){
background: #ef3167 !important;
padding: 4% 10% 1% 10%;
max-width: 100%;
}
#shopify-section-footer > footer > div:nth-child(3) {
background: white;
max-width: 100%;
padding: 1% 10%;
}
Hi,
Thank you for answer but code does not working. I want change Dawn theme that is not published. I tried this code and footer is still all white.
The store that you share is not the Dawn theme? If its not the dawn that you currently working on, the code wont work. Please share the preview instead. Thanks!
This is an accepted solution.
You can just share the preview it will do.
Try this one then.
.footer__content-top.page-width {
background: #ef3167;
max-width: 100%;
padding-top: 36px;
}
footer.footer.color-background-1.gradient.section-sections--19797895905628__footer-padding {
padding-top: 0px;
}
Oh, now I see there is share preview button.
But your solution is working! Thank you so, so much!
Hi, I tried this code on my website but does not work. Can you help me with this?
Do you mean like this?
If it is, try this one.
.footer__content-bottom.scroll-trigger.animate--slide-in {
background: #fff;
padding-bottom: 20px;
}
footer.footer {
padding-bottom: 0;
}
.footer__content-bottom-wrapper, .footer__localization h2 {
color: #000;
}
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
Hi, thank you for reply. Pink bg should be wider but code does not working anyway:( I will try find something in google.
Do you mean whiter on the top? Where did you paste the code? cant see them on the base.css.
I meant height should be little higher. I paste it again in base.css but it is not working.
Hi, I know why code is not working. My theme is build using Dawn theme, but is called Canyon. I check code on Dawn theme and is working. What to do to make it working on my theme?
It doesnt matter you name or not, it should be working. Can you paste it on the custom.css on the theme edits?
Yes! it is working now! Thank you!
Welcome, you still want to adjust the height?
Hi, no thank you. I will do it by myself. Yesterdy tried and worked so I will do it later:D But One thing what I want change is this little bottom padding in pink color. Can we remove it?
Sorry, can you provide SS which bottom padding your referring to? Thanks!
The simplest way:
Step 1: Create a new Schemes in "Theme Settings"
Step 2: Choose colors for the elements you want to apply
Step 3: Go back to "Footer" and click "Change" to select the newly created Scheme
Done
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024