Prestige Theme – Add Date Of Birth field to newsletter pop-up and section

[flowature]

Hey everyone! I am looking to add a field for the Newsletter sign up and pop-up…can someone please provide guidance on how to do so?

[diego_ezfy]

Hey @flowature ,

If the popup is already built-in the theme, you can:

1. Find the popup file
2. Copy one of the existing input fields in this file (likely an element)
3. Paste it and change its name

This is an overly simplified explanation of how the process typically goes, some Javascript coding may be required to capture the additional input depending on how it’s coded. I’d need to take a look into the code to be able to provide any further insight.

Thanks.

Kind regards,
Diego

[flowature]

Thank you @diego_ezfy !

In the end, I needed to use this code:

{%- unless request.page_type == 'captcha' or section.settings.show_only_on_index and template != 'index' -%}
  {%- unless section.settings.show_only_for_visitors and customer -%}
    {%- assign posted_successfully = false -%}
    {%- assign newsletter_id = 'newsletter-' | append: section.id -%}

    {%- capture temporary -%}
      {%- form 'customer', id: newsletter_id, class: 'form' -%}
        {%- assign posted_successfully = form.posted_successfully? -%}
      {%- endform -%}
    {%- endcapture -%}

    
  {%- endunless -%}
{%- endunless -%}

{% schema %}
{
  "name": "Newsletter Popup",
  "class": "shopify-section--popup",
  "settings": [
    {
      "type": "paragraph",
      "content": "Configure the settings for the newsletter popup."
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "Color Scheme",
      "default": "scheme-3"
    },
    {
      "type": "range",
      "id": "apparition_delay",
      "min": 0,
      "max": 15,
      "step": 1,
      "unit": "sec",
      "label": "Apparition Delay",
      "default": 5
    },
    {
      "type": "checkbox",
      "id": "show_only_on_index",
      "label": "Show Only on Home Page",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "hide_for_account_holders",
      "label": "Hide for Account Holders",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_only_once",
      "label": "Show Only Once",
      "default": true
    },
    {
      "type": "inline_richtext",
      "id": "title",
      "label": "Popup Title",
      "default": "Signup for our newsletter"
    },
    {
      "type": "inline_richtext",
      "id": "content",
      "label": "Popup Content",
      "default": "Describe what your customers will receive when subscribing to your newsletter."
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text",
      "default": "Subscribe"
    },
    {
      "type": "checkbox",
      "id": "show_birthday_field",
      "label": "Show Birthday Field",
      "default": false
    }
  ]
}
{% endschema %}

Now, the issue is that the icon is black rather than white. Any chance you know how to change that?

I tried adding this Custom CSS, but it wouldn’t let me save it as [type=date] was not recognised…

/* Change the color of the calendar icon to white */
.form input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1); /* Invert the colors to make it white */
}