Custom Liquid Footer - Newsletter Functionality

Custom Liquid Footer - Newsletter Functionality

anniebt
New Member
4 0 0

Hello!

 

Can someone please help investigate why my newsletter isn't working? I am using a custom liquid footer and it looks correct but when you enter an email address and hit subscribe you are taken to a page not found. Thank you!

Replies 4 (4)

DaisyVo
Shopify Partner
3794 412 499

Hi @anniebt ,

Can you share your store password and a screenshot of the specific issue?

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
anniebt
New Member
4 0 0

Here is the screenshot of the error. Here is the code I am using.

 

This is in the custom liquid code footer section

<footer class="footer">
<div class="footer__wrapper">

<!-- Footer Menu: Contact -->
<div class="footer__menu">
<h4>Contact</h4>
<ul>
<li><a href="/pages/contact">Contact Us</a></li>
<li><a href="/pages/Contact ">Book an Appointment</a></li>
</ul>
</div>

<!-- Footer Menu: Client Services -->
<div class="footer__menu">
<h4>Client Services</h4>
<ul>
<li><a href="/pages/shipping-and-returns">Shipping and Returns</a></li>
<li><a href="/pages/special-comissions">Special Commissions</a></li>
<li><a href="/pages/sizing">Sizing</a></li>
</ul>
</div>

<!-- Newsletter Sign Up -->
<div class="footer__newsletter">
<h4>Stay Updated</h4>
<form method="post" action="{{ shop.email_signup_form_url }}">
<input type="email" name="contact[email]" placeholder="Enter your email" required>
<button type="submit">Subscribe</button>
</form>
</div>
</footer>

 

 

This is the base.css

}
/* General Footer Styles */
.footer {
background-color: #8E7252;
padding: 40px 20px;
}

.footer__wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 1050px; /* Align with the site's max width */
margin: 0 auto; /* Center the footer on desktop */
gap: 20px;
}

/* Brand Info Styles */
.footer__brand-info img {
max-width: 150px;
margin-bottom: 10px;
}
.footer__text {
font-size: 14px;
color: #FFFFFF;
}

/* Menu Styles */
.footer__menu h4,
.footer__newsletter h4 {
font-size: 16px;
margin-bottom: 10px;
}
.footer__menu ul {
list-style: none;
padding: 0;
}
.footer__menu ul li a {
color: #FFFFFF;
text-decoration: none;
font-size: 14px;
}

/* Newsletter Styles */
.footer__newsletter form {
display: flex;
flex-direction: column;
}
.footer__newsletter input {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
}
.footer__newsletter button {
background-color: #333;
color: white;
padding: 10px;
border: none;
cursor: pointer;
}

/* Responsive Styles */
@media (max-width: 768px) {
.footer__wrapper {
flex-direction: column;
align-items: center;
text-align: center;
}

.footer__brand-info,
.footer__menu,
.footer__newsletter {
width: 100%; /* Make all sections stack on top of each other */
margin-bottom: 20px;
}

.footer__brand-info img {
margin: 0 auto; /* Center the logo */
}
}

anniebt
New Member
4 0 0

error.png

anniebt
New Member
4 0 0

Hi is this something you can help with?