Solved

Can the debut theme newsletter section be streamlined to one line on Shopify?

danielh1
Tourist
3 0 1

hi - what is the most efficient way to get the newsletter subscribe section on debut theme to be all on one line?  I don't mean the default one in the footer, I mean the standalone default newsletter section

Accepted Solution (1)

ShanifAtApteo
Shopify Partner
35 3 5

This is an accepted solution.

Hi @danielh1 @JHKCreateglad to help you with your question. I’m sure, my given answer will help to solve your problem as adding the given code below in the section 

 

Go to Online Store > Actions > Edit Code > Sections > newsletter.liquid

And replace your code with this code.

 

<div class="newsletter-section{% if section.settings.show_background %} index-section--newsletter-background{% endif %}">

  <div class="page-width text-center">      

   {% if section.settings.section_title != blank %}

     <label for="Email" class="h2">{{ section.settings.section_title | escape }}</label>

   {% endif %}

   {% if section.settings.subheading != blank %}

     <p>{{ section.settings.subheading | escape }}</p>

   {% endif %}

  

{% form 'customer' %}

   {{ form.errors | default_errors }}

   {% if form.posted_successfully? %}

     <p class="form--success">{{ 'general.newsletter_form.confirmation' | t }}</p>

   {% else %}

     <div class="input-group password__input-group">

       <input type="hidden" name="contact[tags]" value="newsletter">

       <input type="email"

            name="contact[email]"

         id="Email"

            class="input-group__field newsletter__input"

            value="{% if customer %}{{ customer.email }}{% endif %}"

            placeholder="{{ 'general.newsletter_form.email_placeholder' | t }}"

            autocorrect="off"

         autocapitalize="off">

       <span class="input-group__btn">

         <button type="submit" class="btn newsletter__submit" name="commit" id="Subscribe">

           <span class="newsletter__submit-text--large">{{ 'general.newsletter_form.submit' | t }}</span>

            </button>

          </span>

     </div>

   {% endif %}

{% endform %}

  </div>

</div>

 

{% schema %}

  {

"name": "Newsletter",

"class": "index-section index-section--flush",

    "settings": [

   {

        "type": "text",

        "id": "section_title",

        "label": "Heading",

        "default": "Subscribe to our newsletter"

   },

   {

        "type": "text",

        "id": "subheading",

        "label": "Subheading",

        "default": "text"

   },

   {

        "id": "show_background",

        "type": "checkbox",

        "label": "Show background",

        "default": true

   },

   {

        "type": "paragraph",

        "content": "Text"

   }

],

    "presets": [{

      "name": "Newsletter",

      "category": "Promotional"

}]

  }

{% endschema %}

Hopefully, that solves your problem. If not, please let me know if you're seeing any other issues

Shanif Dhanani, CEO and data scientist at Apteo
- Was I able to help? Click Like to let me know!
- If I was able to answer your question, click Accept as Solution
- Want to increase your customer lifetime value with A.I.? Check out Apteo

View solution in original post

Replies 4 (4)

JHKCreate
Shopify Expert
3571 639 916

Hi @danielh1 

Would you mind sharing your store's URL? We'll see if there's a solution and get back to you here!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
danielh1
Tourist
3 0 1

sure it's

https://cumbrianbooks.co.uk or

https://cumbrianteststore.myshopify.com/

I'm not sure which one you prefer

ShanifAtApteo
Shopify Partner
35 3 5

This is an accepted solution.

Hi @danielh1 @JHKCreateglad to help you with your question. I’m sure, my given answer will help to solve your problem as adding the given code below in the section 

 

Go to Online Store > Actions > Edit Code > Sections > newsletter.liquid

And replace your code with this code.

 

<div class="newsletter-section{% if section.settings.show_background %} index-section--newsletter-background{% endif %}">

  <div class="page-width text-center">      

   {% if section.settings.section_title != blank %}

     <label for="Email" class="h2">{{ section.settings.section_title | escape }}</label>

   {% endif %}

   {% if section.settings.subheading != blank %}

     <p>{{ section.settings.subheading | escape }}</p>

   {% endif %}

  

{% form 'customer' %}

   {{ form.errors | default_errors }}

   {% if form.posted_successfully? %}

     <p class="form--success">{{ 'general.newsletter_form.confirmation' | t }}</p>

   {% else %}

     <div class="input-group password__input-group">

       <input type="hidden" name="contact[tags]" value="newsletter">

       <input type="email"

            name="contact[email]"

         id="Email"

            class="input-group__field newsletter__input"

            value="{% if customer %}{{ customer.email }}{% endif %}"

            placeholder="{{ 'general.newsletter_form.email_placeholder' | t }}"

            autocorrect="off"

         autocapitalize="off">

       <span class="input-group__btn">

         <button type="submit" class="btn newsletter__submit" name="commit" id="Subscribe">

           <span class="newsletter__submit-text--large">{{ 'general.newsletter_form.submit' | t }}</span>

            </button>

          </span>

     </div>

   {% endif %}

{% endform %}

  </div>

</div>

 

{% schema %}

  {

"name": "Newsletter",

"class": "index-section index-section--flush",

    "settings": [

   {

        "type": "text",

        "id": "section_title",

        "label": "Heading",

        "default": "Subscribe to our newsletter"

   },

   {

        "type": "text",

        "id": "subheading",

        "label": "Subheading",

        "default": "text"

   },

   {

        "id": "show_background",

        "type": "checkbox",

        "label": "Show background",

        "default": true

   },

   {

        "type": "paragraph",

        "content": "Text"

   }

],

    "presets": [{

      "name": "Newsletter",

      "category": "Promotional"

}]

  }

{% endschema %}

Hopefully, that solves your problem. If not, please let me know if you're seeing any other issues

Shanif Dhanani, CEO and data scientist at Apteo
- Was I able to help? Click Like to let me know!
- If I was able to answer your question, click Accept as Solution
- Want to increase your customer lifetime value with A.I.? Check out Apteo
danielh1
Tourist
3 0 1

yes! thank you so much, it worked perfectly!! best, d