This needs to be done via custom CSS. Can you provide following this to me so that i can write you the custom CSS
-
URL to your store
-
Color code of two footers
Topic summary
Goal: apply two different colors to Dawn’s footer (top/menu area in #ef3167; bottom/payment icons and copyright in white).
Key points and solutions:
- No built‑in setting to color two footer sections separately in Dawn; requires custom CSS.
- Working CSS examples shared:
• Top section: .footer__content-top.page-width { background:#ef3167; max-width:100%; padding-top:36px; }
• Adjust footer padding: footer.footer { padding-top:0; padding-bottom:0; }
• Bottom section: .footer__content-bottom.scroll-trigger.animate–slide-in { background:#fff; padding-bottom:20px; } and set text color via .footer__content-bottom-wrapper, .footer__localization h2 { color:#000; }. - Implementation tips:
• Add CSS at the end of Assets/base.css (or style.css/theme.css). For some setups, add before in theme.liquid, or use a custom.css file.
• For unpublished themes, share a preview URL; selectors may differ per version/derivative theme (e.g., “Canyon”); placing code in custom.css resolved one case.
Outcomes:
- Original poster confirmed the CSS solution works after publishing Dawn.
- Second user confirmed success after moving code to custom.css; a minor request to remove bottom pink padding remains pending a screenshot.
Recent update:
- An alternative approach suggests creating a new Color Scheme in Theme Settings and assigning it to the Footer. This changes the footer’s scheme but may not split two internal footer sections without CSS.
Notes: result screenshots were provided and central to validation. The thread is largely resolved with CSS; minor fine-tuning is open.