How to make your newsletter a column in Shopify

Want to improve your Shopify store’s layout? Here’s a simple guide to transform your newsletter into a column, giving your footer a sleek, organised look.

Easy steps to create a newsletter column

Follow these straightforward steps to make your newsletter appear as a column:

1. Go to your Shopify admin panel and click on ‘Online Store’.
2. Select ‘Theme’, then click ‘Edit Code’.
3. Look for one of these files: base.css, theme.css, style.css, main.css, or custom.css.
4. Once you’ve found the right file, scroll to the bottom and add this code:

@media (min-width: 990px){
    .footer-block__newsletter:not(:only-child) {     
        position: absolute !important;
        left: 0px;
        margin-bottom: 18%;
        width: 100%;
    }
   .footer__content-top {
    padding-bottom: 0px !important;
    display: block;
}

.footer__content-bottom.scroll-trigger.animate--slide-in {
    padding-top: 0px !important;
}
}

5. Save your changes.

What this code does

This CSS code adjusts your newsletter’s layout for screens wider than 990 pixels. It positions the newsletter as a column on the left side of your footer, stretches it to full width, and tweaks some padding to ensure everything looks neat.

Why make this change?

Turning your newsletter into a column can:

• Improve your footer’s overall layout
• Make your newsletter more prominent
• Create a cleaner, more professional look for your store

Conclusion

By following these simple steps, you can easily transform your newsletter into a column, enhancing your Shopify store’s appearance. This small change can make a big difference in how customers perceive and interact with your site.