Change Newsletter & Social Icons Position in Footer | Dawn Theme

Store Design
,

Topic summary

A user seeks to reposition their newsletter signup and social media icons in the Dawn theme footer, specifically wanting to move the newsletter section next to a Discord column with social icons displayed underneath.

Proposed Solution:

A support agent provides a multi-step CSS and Liquid code modification:

  • Code restructuring: Move the newsletter block (footer-block--newsletter) inside the main footer blocks wrapper by cutting and pasting it before the closing </div> tag
  • CSS styling: Add custom CSS to section-footer.css to adjust layout properties including flex direction, margins, padding, and justify-content settings
  • Desktop-only display: The user additionally requests this layout appear only on desktop while keeping the mobile view centered

Current Status:

The user reports encountering issues when implementing the code changes and shares their current footer.liquid file via Hastebin for troubleshooting. The discussion remains open with the implementation incomplete, awaiting further guidance on resolving the code conflicts.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

Hey there!

I would like to move my Newsletter in my footer next to the Discord column.

Under the Newsletter, I would like to have my social icons.

Could someone help me with this? Thanks!

Website: https://plooshy.co/

2

Anyone able to help with this? Thanks!

3

Hi @Zoark

This is BSS Commerce - Full-service eCommerce Agency. We’d love to suggest you this solution:

Step 1: Go to Themes → Edit code:

view (71).png
view (71).png1856×986 108 KB

Step 2: In the Sections folder, find the file footer.liquid

Step 3: Find the following 2 lines of code:


**Step 4:**

I'll call this the first block of code:
<div class="footer-block--newsletter"> ... </div>

Cut block code 2 and put it at the end of code block 1 but before the

line (that is, put it in position (1) that I wrote in block code 1). Take a look at my example below:

Before editing:

<!-- Block code 1 -->
<div class="footer__blocks-wrapper grid grid--1-col grid--2-col grid--4-col-tablet {{ footer_grid_class }}">
   ...
</div>

<!-- Block code 2 -->
<div class="footer-block--newsletter">
   ...
</div>

After editing

<!-- Block code 1 -->
<div class="footer__blocks-wrapper grid grid--1-col grid--2-col grid--4-col-tablet {{ footer_grid_class }}">
   ...
   <!-- Block code 2 -->
   <div class="footer-block--newsletter">
      ...
   </div>
</div>

(Be careful to identify each block of code exactly because each block is a collection of many pairs of nested

tags)

Step 5: Find the file section-footer.css and add the following code at the end of the filSe:

.footer__blocks-wrapper.grid {
   flex-wrap: nowrap !important;
}
.footer-block--newsletter {
    margin-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
.footer__list-social {
   margin-top: 30px !important;
   justify-content: center !important;
}
.list-social__item a{
   padding: 1.2rem !important;
}

=> And the final result that we achieve will be as follows:

view (72).png
view (72).png1919×955 166 KB

If you have difficulty in one of the above steps, please lend us access to your Shopify admin so we can help you edit the code.

Hope this help you.

4

Hi! I added the css but having an issue with the code. Here is my current footer.liquid code: https://hastebin.skyra.pw/oboxafukex.bash

I also want it only on Desktop to show this way and keep it normal, in the middle on the mobile phone. Thanks!