Add input field to email signup - Dawn Theme

Store Design
1

Does anyone know how to add an input field (First Name) to the email signup section in the Dawn Theme?

2

Hi @kacyb03

To add a First Name field to your email signup form, please follow those steps:

  1. Go to your Theme > Edit code > Sections > Open newletter.liquid and replace the code in this file with the following code.
{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}
{{ 'newsletter-section.css' | asset_url | stylesheet_tag }}

  

    {%- for block in section.blocks -%}
      {%- case block.type -%}
        {%- when '@app' -%}
          {% render block %}
        {%- when 'heading' -%}
          ## {{ block.settings.heading | escape }}
        {%- when 'paragraph' -%}
          {{ block.settings.text }}

        {%- when 'email_form' -%}
          
            {% form 'customer', class: 'newsletter-form' %}
            
			
            
              

                

					
					
				
	
				
				  
                  
                  
                

                {%- if form.errors -%}
                  <small>{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
                {%- endif -%}
              

              {%- if form.posted_successfully? -%}
                ### {% render 'icon-success' %}{{ 'newsletter.success' | t }}
              {%- endif -%}
            {% endform %}
          

      {%- endcase -%}
    {%- endfor -%}
  

{% schema %}
{
  "name": "t:sections.newsletter.name",
  "tag": "section",
  "class": "spaced-section spaced-section--full-width",
  "settings": [
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.newsletter.settings.color_scheme.options__1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.newsletter.settings.color_scheme.options__2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.newsletter.settings.color_scheme.options__3.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.newsletter.settings.color_scheme.options__4.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.newsletter.settings.color_scheme.options__5.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.newsletter.settings.color_scheme.label"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "default": true,
      "label": "t:sections.newsletter.settings.full_width.label"
    },
    {
      "type": "paragraph",
      "content": "t:sections.newsletter.settings.paragraph.content"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.newsletter.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Subscribe to our emails",
          "label": "t:sections.newsletter.blocks.heading.settings.heading.label"
        }
      ]
    },
    {
      "type": "paragraph",
      "name": "t:sections.newsletter.blocks.paragraph.name",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "default": "

Be the first to know about new collections and exclusive offers.

",
          "label": "t:sections.newsletter.blocks.paragraph.settings.paragraph.label"
        }
      ]
    },
    {
      "type": "email_form",
      "name": "t:sections.newsletter.blocks.email_form.name",
      "limit": 1
    },
    {
      "type": "@app"
    }
  ],
  "presets": [
    {
      "name": "t:sections.newsletter.presets.name",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "paragraph"
        },
        {
          "type": "email_form"
        }
      ]
    }
  ]
}
{% endschema %}
  1. Once done, go to your Theme > Customize > Homepage > Add section > Search for Email Signup > Add Email Sign up
    Now you will have a sign-up form with First Name and Email.

Screenshot_1.png
Screenshot_1.png1919Ă—923 179 KB

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any questions!

3 Likes
3

Thank you so much! This worked perfectly!

1 Like
4

You’re welcome! :slightly_smiling_face:

5

Does documentation exist for all of the available fields that can be added? For example, in your code you use “contact[first_name]”. Where did you learn that was available?

Thanks.

6

it didnt work for my for some reason. Do you know why?

This is what I did with your suggested code:

Thanks,Lisa

7

See attached code, sorry

8

I have added the first name field to my newsletter sign up. Very happyt with that! Now I would like to add some padding tot the bottom of the newsletter sign up block as the email sign up form is now set completely on the bottom and this doesn’t look right. There is no background color between that and the next block. Is this possible to add?

1 Like
9

Hello,

After adding this code I get a error message. Can you please tell me how to fix this?

missing translation: “t:sections.newsletter.settings.color_scheme.label” is not present in any of the [“nl-NL”, “nl”, “en”] schema locale files

10

Thanks for the help

11

https://shopify.dev/docs/themes/customer-engagement/add-contact-form here you go!