Adding First Name & Last Name fields to 'Subscribe' email footer in Impulse theme

Kaisa
Tourist
10 0 5

Hi there, my store is https://sophiaandpilar.com and I am wondering if anyone has a piece of code that I can input that would enable me to request first name and last name here?

Kaisa_0-1632711545624.png

 

 

Kaisa_1-1632711589697.png

Thanks! 

Appreciate the help.

 

Replies 7 (7)
KetanKumar
Shopify Partner
24919 2496 9027

@Kaisa 

yes please share your footer code so i will check and let you know 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Kaisa
Tourist
10 0 5

Hi there @KetanKumar ! See below:

{%- liquid
  assign show_selectors = false
  assign currency_selector = false
  assign locale_selector = false

  if section.settings.show_currency_selector and shop.enabled_currencies.size > 1
    assign currency_selector = true
  endif

  if section.settings.show_locale_selector and shop.enabled_locales.size > 1
    assign locale_selector = true
  endif

  if currency_selector or locale_selector
    assign show_selectors = true
  endif
-%}

{%- if settings.color_footer == settings.color_body_bg -%}
  {%- style -%}
    .site-footer {
      border-top: 1px solid {{ settings.color_borders }};
    }
  {%- endstyle -%}
{%- endif -%}

<footer class="site-footer" data-section-id="{{ section.id }}" data-section-type="footer-section">
  <div class="page-width">

    <div class="grid">
      {%- assign row_width = 0 -%}
      {%- for block in section.blocks -%}
        {%- assign row_width = row_width | plus: block.settings.container_width -%}
        {%- if row_width > 100 -%}
          <div class="footer__clear small--hide"></div>
          {%- assign row_width = row_width | minus: 100 -%}
        {%- endif -%}

        <div {{ block.shopify_attributes }} class="grid__item footer__item--{{ block.id }}" data-type="{{ block.type }}">
          {%- style -%}
            @media only screen and (min-width: 769px) and (max-width: 959px) {
              .footer__item--{{ block.id }} {
                width: 50%;
                padding-top: 40px;
              }
              .footer__item--{{ block.id }}:nth-child(2n + 1) {
                clear: left;
              }
            }
            @media only screen and (min-width: 960px) {
              .footer__item--{{ block.id }} {
                width: {{ block.settings.container_width }}%;
              }

            }
          {%- endstyle -%}

          {%- liquid
            case block.type
              when 'logo_social'
                render 'footer-logo', block: block
              when 'custom'
                render 'footer-custom-text', block: block
              when 'newsletter'
                render 'footer-newsletter', block: block
              when 'menu'
                render 'footer-menu', block: block
            endcase
          -%}
        </div>
      {%- endfor -%}
      {%- for block in section.blocks -%}
        {%- if block.type == 'logo' -%}
          <div class="grid__item medium-up--hide">
            {%- render 'footer-logo', block: block -%}
          </div>
        {%- endif -%}
      {%- endfor -%}
    </div>

    {%- if show_selectors -%}
      <div class="footer__section">
        {%- render 'multi-selectors',
          locale_selector: locale_selector,
          currency_selector: currency_selector,
          show_currency_flags: section.settings.show_currency_flags
          location: 'footer'
        -%}
      </div>
    {%- endif -%}

    {%- if section.settings.show_payment_icons -%}
      {%- unless shop.enabled_payment_types == empty -%}
        <ul class="inline-list payment-icons footer__section">
          {%- for type in shop.enabled_payment_types -%}
            <li class="icon--payment">
              {{ type | payment_type_svg_tag }}
            </li>
          {%- endfor -%}
        </ul>
      {%- endunless -%}
    {%- endif -%}

    {%- if section.settings.show_copyright -%}
      <p class="footer__small-text">
        &copy; {{ 'now' | date: '%Y' }} {{ shop.name }}
        {%- if section.settings.copyright_text != blank -%}
          {{ section.settings.copyright_text }}
        {%- endif -%}
      </p>
    {%- endif -%}
    <p class="footer__small-text">{{ powered_by_link }}</p>

  </div>
</footer>

{% schema %}
  {
    "name": "Footer",
    "max_blocks": 12,
    "settings": [
      {
        "type": "header",
        "content": "Language selector",
        "info": "To add a language, go to your [language settings.](/admin/settings/languages)"
      },
      {
        "type": "checkbox",
        "id": "show_locale_selector",
        "label": "Show language selector",
        "default": true
      },
      {
        "type": "header",
        "content": "Currency selector",
        "info": "To add a currency, go to your [currency settings.](/admin/settings/payments)"
      },
      {
        "type": "checkbox",
        "id": "show_currency_selector",
        "label": "Show currency selector",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "show_currency_flags",
        "label": "Show currency flags",
        "default": true
      },
      {
        "type": "header",
        "content": "Additional footer content"
      },
      {
        "type": "checkbox",
        "id": "show_payment_icons",
        "label": "Show payment icons",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_copyright",
        "label": "Show copyright"
      },
      {
        "type": "text",
        "id": "copyright_text",
        "label": "Additional copyright text"
      }
    ],
    "blocks": [
      {
        "type": "logo_social",
        "name": "Logo",
        "limit": 1,
        "settings": [
          {
            "type": "image_picker",
            "id": "logo",
            "label": "Logo image"
          },
          {
            "type": "range",
            "id": "desktop_logo_height",
            "label": "Logo height",
            "default": 50,
            "min": 20,
            "max": 120,
            "unit": "px"
          },
          {
            "type": "range",
            "id": "container_width",
            "label": "Column width",
            "default": 25,
            "min": 15,
            "max": 95,
            "unit": "%"
          }
        ]
      },
      {
        "type": "menu",
        "name": "Navigation",
        "settings": [
          {
            "type": "checkbox",
            "id": "show_footer_title",
            "label": "Show heading"
          },
          {
            "type": "link_list",
            "id": "menu",
            "label": "Choose a menu",
            "default": "footer",
            "info": "This menu won't show dropdown items"
          },
          {
            "type": "range",
            "id": "container_width",
            "label": "Column width",
            "default": 25,
            "min": 15,
            "max": 95,
            "unit": "%"
          }
        ]
      },
      {
        "type": "newsletter",
        "name": "Newsletter and social",
        "limit": 1,
        "settings": [
          {
            "type": "checkbox",
            "id": "show_footer_title",
            "label": "Show heading",
            "default": true
          },
          {
            "type": "paragraph",
            "content": "Any customers who sign up will have an account created for them in Shopify. [View customers](/admin/customers)."
          },
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Sign up and save"
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "info": "Optional",
            "default": "<p>Subscribe to get special offers, free giveaways, and once-in-a-lifetime deals.</p>"
          },
          {
            "type": "range",
            "id": "container_width",
            "label": "Column width",
            "default": 25,
            "min": 15,
            "max": 95,
            "unit": "%"
          }
        ]
      },
      {
        "type": "custom",
        "name": "Custom text",
        "settings": [
          {
            "type": "checkbox",
            "id": "show_footer_title",
            "label": "Show heading",
            "default": true
          },
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Custom text"
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "default": "<p>Add your own custom text here.</p>"
          },
          {
            "type": "range",
            "id": "container_width",
            "label": "Column width",
            "default": 25,
            "min": 15,
            "max": 95,
            "unit": "%"
          }
        ]
      }
    ],
    "default": {
      "settings": {},
      "blocks": [
        {
          "type": "menu",
          "settings": {}
        },
        {
          "type": "logo_social",
          "settings": {}
        }
      ]
    }
  }
{% endschema %}

 

KetanKumar
Shopify Partner
24919 2496 9027

@Kaisa 

can you please share this file code 

footer-newsletter
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Kaisa
Tourist
10 0 5

Hi @KetanKumar I hope this is what you are after:

{%- style -%}
  .newsletter-{{ section.id }} {
    background-color: {{ section.settings.color_background }};
    color: {{ section.settings.color_text }};
  }

  .newsletter-{{ section.id }} .newsletter__input::-webkit-input-placeholder { color: {{ section.settings.color_text }}; }
  .newsletter-{{ section.id }} .newsletter__input::-moz-placeholder { color: {{ section.settings.color_text }}; }
  .newsletter-{{ section.id }} .newsletter__input::-ms-input-placeholder { color: {{ section.settings.color_text }}; }
{%- endstyle -%}

<div class="newsletter-section newsletter-{{ section.id }}{% if section.settings.color_background == settings.color_body_bg %} newsletter-section--with-divider{% endif %}">
  <div class="page-width text-center">
    {%- if section.settings.title != blank -%}
      <p class="h3">{{ section.settings.title | escape }}</p>
    {%- endif -%}
    {%- if section.settings.text != blank -%}
      <div class="rte">{{ section.settings.text }}</div>
    {%- endif -%}

    {%- render 'newsletter-form', section_id: section.id, snippet_context: 'section' -%}
  </div>
</div>

{% schema %}
  {
    "name": "Newsletter",
    "settings": [
      {
        "type": "paragraph",
        "content": "Customers who subscribe will have their email address added to the 'accepts marketing' [customer list](/admin/customers?query=&accepts_marketing=1)."
      },
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Sign up and save"
      },
      {
        "type": "richtext",
        "id": "text",
        "label": "Subheading",
        "default": "<p>Subscribe to get special offers, free giveaways, and once-in-a-lifetime deals.</p>"
      },
      {
        "type": "color",
        "id": "color_background",
        "label": "Background",
        "default": "#f9f9f9"
      },
      {
        "type": "color",
        "id": "color_text",
        "label": "Text",
        "default": "#1c1d1d"
      }
    ],
    "presets": [
      {
        "name": "Newsletter",
        "category": "Promotional"
      }
    ]
  }
{% endschema %}
KetanKumar
Shopify Partner
24919 2496 9027

@Kaisa 

thanks but one more file 

newsletter-form
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Kaisa
Tourist
10 0 5

Hi @KetanKumar , I have gone through all my files, and that one is non-existent? Let me know if you think I missed something here?

Appreciate your help!

Kaisa
Tourist
10 0 5

Hi @KetanKumar , I have this one. Can you let me know if this is what you are looking for?

 

 

{%- if section.settings.mode != 'disabled' -%}

<div
  id="NewsletterPopup-{{ section.id }}"
  class="modal modal--square modal--mobile-friendly"
  data-section-id="{{ section.id }}"
  data-section-type="newsletter-popup"
  data-delay-days="{{ section.settings.popup_days }}"
  data-delay-seconds="{{ section.settings.popup_seconds }}"
  data-test-mode="{% if section.settings.mode == 'testing' %}true{% else %}false{% endif %}">
  <div class="modal__inner">
    <div class="modal__centered medium-up--text-center">
      <div class="modal__centered-content">

        <div class="newsletter">
          {%- if section.settings.popup_title != blank -%}
            <h3>{{ section.settings.popup_title }}</h3>
          {%- endif -%}

          {%- if section.settings.popup_image -%}
            <div class="image-wrap small--hide" style="height: 0; padding-bottom: {{ 100 | divided_by: section.settings.popup_image.aspect_ratio }}%;">
              {%- assign img_url = section.settings.popup_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
              <img class="lazyload lazypreload" role="presentation"
                  data-src="{{ img_url }}"
                  data-widths="[540, 720, 900, 1080]"
                  data-aspectratio="{{ section.settings.popup_image.aspect_ratio }}"
                  data-sizes="auto"
                  alt="{{ section.settings.popup_image.alt }}">
            </div>
          {%- endif -%}

          {%- if section.settings.popup_text != blank -%}
            <div class="rte">
              {{ section.settings.popup_text }}
            </div>
          {%- endif -%}

          {%- if section.settings.enable_newsletter -%}
            <div class="popup-cta">
              {%- render 'newsletter-form', section_id: section.id, snippet_context: 'popup' -%}
            </div>
          {%- endif -%}

          {%- if section.settings.enable_button -%}
            <div class="popup-cta">
              <a href="{{ section.settings.button_link }}" class="btn js-modal-close">
                {{ section.settings.button_label }}
              </a>
            </div>
          {%- endif -%}

         <button type="button" class="text-close js-modal-close">{{ section.settings.close_text }}</button>
        </div>
      </div>

      <button type="button" class="modal__close js-modal-close text-link">
        <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 64 64"><path d="M19 17.61l27.12 27.13m0-27.12L19 44.74"/></svg>
        <span class="icon__fallback-text">{{ 'general.accessibility.close_modal' | t | json }}</span>
      </button>
    </div>
  </div>
</div>

{%- endif -%}

{% schema %}
  {
    "name": "Popup",
    "class": "index-section--hidden",
    "settings": [
      {
        "type": "select",
        "id": "mode",
        "label": "Display mode",
        "default": "disabled",
        "options": [
          {
            "value": "enabled",
            "label": "Enabled"
          },
          {
            "value": "testing",
            "label": "Test mode"
          },
          {
            "value": "disabled",
            "label": "Disabled"
          }
        ],
        "info": "Test mode displays your popup each time even after dismissing it. Switch to Enabled once you are happy with how your popup looks."
      },
      {
        "type": "range",
        "id": "popup_seconds",
        "label": "Delay",
        "info": "Delay is disabled in theme editor for visibility",
        "default": 5,
        "min": 2,
        "max": 60,
        "step": 1,
        "unit": "sec"
      },
      {
        "type": "range",
        "id": "popup_days",
        "label": "Frequency",
        "default": 30,
        "info": "Number of days before a dismissed popup reappears",
        "min": 2,
        "max": 30,
        "step": 1,
        "unit": "day"
      },
      {
        "type": "header",
        "content": "Content"
      },
      {
        "type": "text",
        "id": "popup_title",
        "label": "Heading",
        "default": "Sign up and save"
      },
      {
        "type": "image_picker",
        "id": "popup_image",
        "label": "Image",
        "info": "Does not appear on mobile in order to meet Google's [interstitial guidelines](https://webmasters.googleblog.com/2016/08/helping-users-easily-access-content-on.html) for improved SEO"
      },
      {
        "type": "richtext",
        "id": "popup_text",
        "label": "Text",
        "default": "<p>Entice customers to sign up for your mailing list with discounts or exclusive offers. Include an image for extra impact.</p>"
      },
      {
        "type": "text",
        "id": "close_text",
        "label": "Close button text",
        "default": "No thanks"
      },
      {
        "type": "header",
        "content": "Newsletter"
      },
      {
        "type": "paragraph",
        "content": "Every sign up will create a Customer on your store. [View customers](/admin/customers?query=&accepts_marketing=1)."
      },
      {
        "type": "checkbox",
        "id": "enable_newsletter",
        "label": "Enable newsletter",
        "default": true
      },
      {
        "type": "header",
        "content": "Button"
      },
      {
        "type": "text",
        "id": "button_label",
        "label": "Button label",
        "default": "Optional button"
      },
      {
        "type": "url",
        "id": "button_link",
        "label": "Button link"
      },
      {
        "type": "checkbox",
        "id": "enable_button",
        "label": "Enable button",
        "default": false
      }
    ],
    "blocks" : []
  }
{% endschema %}