All things Shopify and commerce
Hi,
I need some help adjusting the layout of my website's footer. Right now, the email signup section appears below the other footer content. I’d like to move the email signup so that it appears to the right of the “Company Info” menu, ideally aligned on the same row.
I've attached a screenshot of how it currently looks. Please let me know how I can make this change, whether it’s through theme settings or by editing the code. I'm currently using the Dawn Theme.
Thanks in advance for your help!
Let go to edit theme code -> find file sections/footer.liquid then move the code block as my attachment below:
Thank you! Is there a way to bring it to the top? So it's side by side. And bring the logos below it. I uploaded the picture of how it looks currently and the inspo. Also, do I need to do anything with the {% endif %} in the code?
can you try to move it inside {%- if section.settings.show_social and has_social_icons -%}
You have me a bit lost here. Can you explain that again?
Hello @anonymous2000
Thanks for sharing the screenshot and details, . Since you’re using the Dawn theme, customizing the footer layout like this (moving the newsletter signup next to the “Company Info” column) requires editing the theme code, as this layout isn't supported directly through the theme editor.
Here’s how you can achieve a three-column footer layout with the email signup next to the menus:
Steps to Edit the Footer Layout in Dawn
1. Go to Online Store > Themes > ... > Edit Code.
2. In the Sections folder, open:
footer.liquid
3. Look for the layout of the footer blocks. In Dawn, it's often controlled by a flex or grid layout like this:
<div class="footer__blocks-wrapper">
{% for block in section.blocks %}
...
{% endfor %}
</div>
4. You'll typically see the newsletter form inside a {% when 'newsletter' %} block. Your goal is to restructure the grid so it can hold 3 columns.
Suggested Code Adjustment (Using Grid)
Wrap the whole block loop in a grid with 3 columns:
Replace this (or similar code):
<div class="footer__blocks-wrapper">
{% for block in section.blocks %}
{# existing block rendering #}
{% endfor %}
</div>
With:
<div class="footer__blocks-wrapper grid grid-cols-1 md:grid-cols-3 gap-6">
{% for block in section.blocks %}
<div class="footer__block">
{% render 'footer-block', block: block %}
</div>
{% endfor %}
</div>
This uses Tailwind-style utility classes (which Shopify themes like Dawn support), setting the footer into a 3-column grid on medium screens and up.
Bonus (Tidy Alignment)
You might want to center the newsletter block vertically with flex:
<div class="footer__block flex items-center">
{% render 'footer-block', block: block %}
</div>
You may also adjust block.order logic if you want precise control over positioning (e.g., forcing the newsletter to always be third).
Thank you 😊
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025