Change Newsletter & Social Icons Position in Footer | Dawn Theme

Store Design
,
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!