Email signup in footer

rencafenyc · ‎02-14-2025

Hello, could I get some help repositioning the email signup block in the footer to the right side? I'm having trouble doing that through the theme customizer. The footer currently has a brand information block and a footer menu block, with the email signup block below everything. I'd like to move it so everything is on the same row, with text alignment to the left and the top of the text to be aligned at the same height as the footer menu height.

Original Layout vs. Desired Layout on Desktop

Same for mobile too:

URL: https://rencafenyc.com/

rajweb · ‎02-14-2025

Hey @rencafenyc ,

To adjust the layout of your footer and move the email signup block to the right, you'll need to modify the HTML and CSS of your theme. Here’s how to do it:

Edit the Footer Section Code:

1. Online Store > themes > Edit Code

2. Locate the footer.liquid file under the "Sections" folder.

2. Update the HTML:

- In the footer.liquid file, you’ll want to group the blocks into a flexbox container so that everything can sit in a single row. Look for the email signup block and move it into the same container as the brand and footer menu.

<div class="footer-container">
  <div class="footer-brand">
    <!-- Brand information block -->
  </div>
  <div class="footer-menu">
    <!-- Footer menu block -->
  </div>
  <div class="footer-email-signup">
    <!-- Email signup block -->
  </div>
</div>

Add or Update CSS:

Next, you need to style the container to position everything correctly.

- Open your theme’s CSS file (usually in Assets > theme.css or base.css).

- Add the following CSS:

.footer-container {
  display: flex;
  justify-content: space-between; /* Adjust spacing */
  align-items: flex-start; /* Align items at the top */
  flex-wrap: wrap; /* Ensure mobile responsiveness */
}

.footer-brand,
.footer-menu {
  text-align: left;
}

.footer-email-signup {
  text-align: right;
}

@media (max-width: 768px) {
  .footer-container {
    flex-direction: column; /* Stack items vertically on mobile */
  }
  .footer-email-signup {
    margin-top: 20px; /* Add spacing for mobile */
    text-align: center; /* Center align on mobile */
  }
}

Refresh your website to check how it looks on both desktop and mobile.

If you'd like, I can help fine-tune specific parts of the code to better fit your requirements!

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat

-Need a Shopify developer?
https://rajatweb.dev/

Email: rajat.shopify@gmail.com

oscprofessional · ‎02-14-2025

Hi @rencafenyc ,

Go to Online Store > Themes > Actions > Edit Code > base.css

Add below code at the bottom of base.css file

@media (min-width: 768px) {
 .footer__content-top {
    display: grid;
    grid-template-columns: 4fr 1fr;
 }
 body .footer-block--newsletter {
    margin-top: 0;
    align-items: flex-start !important;
    justify-content: start;
 }
}

rencafenyc · ‎02-14-2025

Unfortunately this code does not move it to the same row for me, the email signup is still below everything

Dan-From-Ryviu · ‎02-14-2025

Hi @rencafenyc

You can do that by adding this code to theme.liquid file, after <head> in store admin > Sales channels > Online Store > Themes > click "..." > Edit code.

<style>
html .footer__content-top  .footer-block__newsletter { 
    text-align: left;
}
@media (min-width: 750px) {
html .footer__content-top {
    display: flex;
    justify-content: space-around;
}
html .footer__content-top .footer-block--newsletter {
    align-items: start;
    margin-top: 0;
}
}
@media (max-width: 749px) {
html .footer__content-top .footer-block--newsletter {
    align-items: flex-start;
}
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

rencafenyc · ‎02-14-2025

Hi, this helps move everything in one row but could I get help increasing the width of the brand information and footer menu link blocks so that everything is spaced out evenly on desktop view?

Current layout with your code:

Desired layout:

topnewyork · ‎02-14-2025

Hi @rencafenyc
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. In theme.liquid, paste the below code before </head>

<style>
 .footer-block--newsletter.scroll-trigger.animate--slide-in {
    flex-direction: column !important;
    margin-top: 0px !important;
    width: 35% !important;
}

.footer-block__newsletter {
    margin-left: auto !important;
    margin-right: 0px !important;
}

ul.footer__list-social.list-unstyled.list-social {
    align-self: flex-start !important;
    margin-bottom: 50px !important;
}                                              
.footer__content-top.page-width {
    display: flex !important;
}
.footer-block__newsletter {
    width: max-content !important;
}


.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
    gap: 66px !important;
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month

rencafenyc · ‎02-14-2025

Hi, this is what it looks like with your code in the theme.liquid file before </head>

Email signup in footer

Email signup in footer

Community Blog Articles