How to add a line to the top of newsletter - Focal theme

[galleriste]

I would like to add a line like this on top of the newsletter form on mobile view.

Here is the site: https://568839.myshopify.com/

[Made4uo-Ribe]

Hi @galleriste 

Try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes"
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag.

<style>
#shopify-section-template--18152640217353__newsletter_BwUhTB {
    padding-right: 9px !important;
    padding-left: 9px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
   border-top: 0.9px solid rgb(var(--secondary-button-text-color), 0.2);
}
</style>

• And Save. 

• Result:
• 

Is this only for mobile? This border wil add for all screen. Let me know if you need some adjustment. Thanks!

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[galleriste]

It only added it to the one pages newsletter. Can you make it so its always there when you add a newsletter section. also for desktop

[Made4uo-Ribe]

Yes I can, but your store is password-protected. 

[FastBundle-Jay]

If you'd like to add a line above the newsletter form in the Focal theme, especially for mobile view, you can do it by tweaking the theme's code a little. Here's how you can do it step by step:

---

How to Add a Line Above the Newsletter Form (Mobile)

1. Go to Your Theme Settings:

   • In your Shopify Admin, go to Online Store > Themes.
   • Find the Focal theme, click the Actions dropdown, and select Edit Code.

2. Find the Newsletter Section:

   • In the code editor, open the sections folder.
   • Look for the file that controls the newsletter form—something like newsletter.liquid or similar.

3. Add the Line in the Code:

   • Find the section in the code where the newsletter form is defined (usually <form> or <div> wrapping the form).
   • Add an HTML <hr> tag (or any divider) just above it:

     <hr style="border: 1px solid #e0e0e0; margin-bottom: 15px;">

   • This will create a simple horizontal line.

4. Make It Mobile-Specific (Optional):

   • If you only want this line to show on mobile, you can wrap it in a <div> with a class, like this:

     <div class="mobile-line">
         <hr>
     </div>

   • Then, go to your theme.css or theme.scss.liquid file and add a media query:

     @media only screen and (max-width: 768px) {
         .mobile-line hr {
             border: 1px solid #e0e0e0;
             margin-bottom: 15px;
         }
     }

5. Save and Preview:

   • Save your changes and check how the newsletter form looks, especially on mobile devices.

6. Test Responsiveness:

   • Make sure it looks good on both mobile and desktop views.

---

Let me know if you need any further help! 😊

[galleriste]

[galleriste]

How would you add it here?

[FastBundle-Jay]

To add the <hr> line above the newsletter form in the Focal theme's code snippet you shared, here’s how you can integrate it step by step Updated Code with the Line Above the Newsletter Form:

Find the part of the code where the newsletter form starts. In your snippet, it begins with this line:

{% form 'customer', id: newsletter_id, class: 'form newsletter__form' -%}

Now, insert the <hr> tag just above this form block to add the line above the newsletter form. Here’s the modified version:

<hr style="border: 1px solid #e0e0e0; margin-bottom: 15px;">

<div class="container container--flush">
  {% assign text_position = section.settings.text_position | split: '-' | last %}

  <div {% if section.settings.reveal_on_scroll %}reveal{% endif %}
       class="image-with-text-block__content image-with-text-block__content--tight container">
    {% if section.settings.subheading != blank -%}
      <h2 class="heading heading--small">{{ section.settings.subheading | escape }}</h2>
    {% endif -%}

    {% if section.settings.content != blank -%}
      {{- section.settings.content -}}
    {% endif -%}

    {% assign newsletter_id = 'newsletter-' | append: section.id -%}

    <!-- Adding the horizontal line here -->
    <hr style="border: 1px solid #e0e0e0; margin-bottom: 15px;">

    {% form 'customer', id: newsletter_id, class: 'form newsletter__form' -%}
      {% if form.posted_successfully -%}
        <script>
          window.addEventListener('DOMContentLoaded', () => {
            if (history.scrollRestoration) {
              history.scrollRestoration = 'manual'; // Prevent the browser to scroll on captcha page
            }
          });
        </script>
      {% endif -%}

Explanation of the Changes

1. Placement of <hr>: The <hr> tag is placed right before the form block for the newsletter. This ensures the line appears just above the form itself.

2. Styling: The inline CSS (style="border: 1px solid #e0e0e0; margin-bottom: 15px;") styles the horizontal line to match the rest of your theme’s design.

---