Adding Newsletter sign up onto Mobile Navigation Menu on Horizon Theme

Store Design
, , ,
1

Hello Everyone!

I’m currently trying to add a newsletter sign up onto my mobile navigation menu. I’ve attached a reference and I’m currently using the Horizon theme. Thank you

Screen Shot 2024-06-12 at 6.22.33 pm
Screen Shot 2024-06-12 at 6.22.33 pm902×1636 58.1 KB

2 Likes
2

HEY @alixzander1
Go to online store —> theme—>edit code
find the mobile menu template like sections/header.liquid snippets/mobile-nav.liquidor search mobile-menuordrawer
past this snippet before the </nav>or</div>

<div class="mobile-nav__newsletter" style="padding: 16px;">
  {% form 'customer', id: 'mobile-newsletter-form' %}
    <input type="hidden" name="contact[tags]" value="newsletter">
    <div style="display:flex; gap: 8px;">
      <input
        type="email"
        name="contact[email]"
        placeholder="Enter your email"
        style="flex:1; padding: 10px; border: 1px solid #ccc;"
      >
      <button type="submit" style="padding: 10px 16px; background:#000; color:#fff; border:none; cursor:pointer;">
        Subscribe
      </button>
    </div>
  {% endform %}
</div>

if this code is work don’t forget to like and mark as solution
thank you best
MUSTUFA

3

Hey for personalized code based on your current theme structure, can you share your site url so that I can provide you the code that align with your needs.

5

This didn’t work :confused:, it doesn’t show up

6

https://da1ye6-m0.myshopify.com/ - password - apple

thank you!

7

Go to admin → online store→ edit code. look for sections/header.liquid and locate the menu, find the last list item

  • (Account), copy and paste the new li for your sign up form.

    <li>
  <form method="post" action="/contact#contact_form" class="newsletter-form">
    <input type="hidden" name="form_type" value="customer" />
    <input type="hidden" name="utf8" value="✓" />
    <input type="hidden" name="contact[tags]" value="newsletter" />
    <div style="display:flex; align-items:center; gap:0.5rem;">
      <input
        type="email"
        name="contact[email]"
        placeholder="Enter your email"
        required
        style="padding:0.4rem 0.6rem; border:1px solid var(--color-input-border); border-radius:var(--style-border-radius-inputs); font-size:0.8rem; width:180px;"
      />
      <button type="submit" style="padding:0.4rem 0.8rem; font-size:0.8rem; background:var(--color-primary-button-background); color:var(--color-primary-button-text); border:none; border-radius:var(--style-border-radius-buttons-primary); cursor:pointer;">
        Subscribe
      </button>
    </div>
  </form>
</li>