Change footer's color
If you wish to change the footer's color and give it some contrast, you can do so with a bit of custom CSS.
For this, you'll have to you'll have to edit the theme files, choose /assets/theme.css, and at the very end of the file, paste the following code snippet:
/* Custom Footer Colors */ :root { --footer-text: #fff; --footer-background: #000; } #shopify-section-footer { background: var(--footer-background); position: relative; padding-top: calc(var(--section-margin) / 2); margin-top: var(--section-margin); } #shopify-section-footer:after { position: absolute; top: 0; left: calc(var(--grid-width) / 12 * -1); width: calc(100% + ( var(--grid-width) / 12 * 2 )); background: var(--footer-background); z-index: -1; content: ""; height: 100%; } #shopify-section-footer>footer { margin-top: 0; } #shopify-section-footer h5, #shopify-section-footer .rte, #shopify-section-footer h5, #shopify-section-footer a, #shopify-section-footer h5, #shopify-section-footer li, #shopify-section-footer div > span { color: var(--footer-text); } @media screen and (max-width: 1023px) { #shopify-section-footer:after { left: calc(var(--grid-padding) * -1); width: calc(100% + (var(--grid-padding))); } } .footer-item .regular-select-cover { background: var(--footer-background); border-color: var(--footer-text) !important; } .footer-item .regular-select-inner { color: var(--footer-text); background-image: none !important; } .footer-item .regular-select-inner:after { content: "➤"; transform: rotate(90deg); display: inline-block; font-family: Arial, sans-serif; right: 12px; position: absolute; font-size: 10px; top: 17px; } .footer-item .regular-select-content.content-opened { border: 1px solid var(--footer-text); background: var(--footer-background); } .footer-item .regular-select-item button { color: var(--footer-text); } .footer-item input { background: var(--footer-background); border-color: var(--footer-text) !important; color: var(--footer-text) !important; } .footer-item input::placeholder { color: var(--footer-text) !important; } .footer-item .newsletter-form svg path, .footer-item .social-icons a svg * { fill: var(--footer-text); }
In this example the background will be black, while the text white. If you wish to use different colors, change in the first two lines:
:root { --footer-text: #fff; --footer-background: #000; }