Move Email Signup Blocks

[mayami]

I'm using the Dawn theme. I wish to place my Email Signup beside my Footer content, but only for my desktop view. Is this possible and how do I do that?

Ideal look on Desktop:

How it currently looks on Desktop:

How it currently looks on Mobile and I don't want to change this:

Thank you in advance!

[vinh0225]

Hi @mayami 

Could you please share your store URL so that I can investigate further?

[mayami]

Thank you for replying! Here it is..

Site: https://www.amiamiclub.com/

Password: ami5aug

[vinh0225 · Accepted solution]

Hi @mayami 

Please follow these steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, click the ... button to open the actions menu, and then click Edit code.
3. Open the file layout/theme.liquid and add the following snippets before </body>.

<script>
document.addEventListener('DOMContentLoaded', function() {
  if (window.matchMedia("(min-width: 1024px)").matches) {
    const elementToMove = document.querySelector('.newsletter__wrapper');
    elementToMove.style.padding = "0 0 10px";
    const originalParent = elementToMove.parentNode;
    const newParents = document.querySelectorAll('.footer-block.grid__item.scroll-trigger.animate--slide-in');
    const thirdNewParent = newParents[2];
    const firstChildOfNewParent = thirdNewParent.firstElementChild;
    originalParent.removeChild(elementToMove);
    thirdNewParent.insertBefore(elementToMove, firstChildOfNewParent);
  }
});
</script>

That's it. Please let me know if you have any concern.

[mayami]

Hi Vinh, it worked on desktop. Thank you so much!

It also changed the arrangement for mobile view. Is it possible to get the Email Signup as the first block?

How it looks now:

Ideal look on Mobile:

[vinh0225]

Hi Mayami,

It seems like the store password updated. Please provide me with the new password via private message.

Regards,

Vinh

[mayami]

Hi Vinh, I can't find a way to DM you. I've changed the password back to ami5aug, please try again. Thank you.

[vinh0225]

Hi @mayami 

Yeah, I can see the store again.

By the way, did you try to refresh page when you toggle to mobile from desktop mode?
The code works when it loads a page. So when you change screen size in browser, the updates remains as it was.
So you need to refresh the page to see a correct result after toggling the screen mode.

[mayami]

As connected via DM, thank you so much for the help, Vinh!! 🌻

[Yakuman]

Hi, I added the script into the the Dawn theme.liquid.

    {% comment %} Move Email Signup from Section to Block {% endcomment %}
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        if (window.matchMedia("(min-width: 1024px)").matches) {
          const elementToMove = document.querySelector('.newsletter__wrapper');
          elementToMove.style.padding = "0 0 10px";
          const originalParent = elementToMove.parentNode;
          const newParents = document.querySelectorAll('.footer-block.grid__item.scroll-trigger.animate--slide-in');
          const thirdNewParent = newParents[2];
          const firstChildOfNewParent = thirdNewParent.firstElementChild;
          originalParent.removeChild(elementToMove);
          thirdNewParent.insertBefore(elementToMove, firstChildOfNewParent);
      }
    });
    </script>

  </body>
</html>

 Like so as per your instruction but the Newsletter still sits as it own section instead of being a block.
See screenshot.

[vinh0225]

Hi @Yakuman 

The solution vary from site to site. Please let me know your website URL and your requirement in detail.

You could message me via DM.