How can I add a GDPR tickbox to my Blockshop theme newsletter form?

Store Design
1

Hello,

I’m using the Blockshop theme and wondered what’s the best way to add a GDPR tickbox?

I’d prefer the tickbox to be underneath the firstname, lastname and email fields, but be on the same row as the submit button. See drawing below:

Preview of my site is: https://0z643a959gijuq04-345362.shopifypreview.com

Thank you in advance!!

Hannah

GDPR.jpg
GDPR.jpg656×163 8.78 KB

2

Hi @hannahdossary ,

If you have experience with coding, you can go to the newsletter.liquid file and add fields for the form following these instructions: https://shopify.dev/themes/customer-engagement/add-contact-form#checkbox-type

If it is too complicated for you, please send me the code of newsletter file, I will help you to check and add it

3

@LitCommerce thanks for sharing that link. I’ve added the tickbox but it shows up in the same row as the fields. do you know what CSS i can add so that it jumps onto the next line with the button?

https://260g06z8g4bow56s-345362.shopifypreview.com

do i need to add a new div class for both checkbox and submit button?

thanks for your help!!

Hannah

4

Hi @hannahdossary ,

I need to edit the HTML again, with the current HTML, it will be difficult to display like the demo you want.

Please send me the code of newsletter file, I will help you to check and edit it.

5

Of course, here is the full .liquid code:

{%- liquid
  assign email_placeholder_t = 'sections.newsletter.email_placeholder' | t
  assign button_t = 'sections.newsletter.button' | t

  assign bg_color = section.settings.background-color
  assign form_id = 'newsletter--' | append: section.id
  assign heading = section.settings.heading | escape
  assign light_text = section.settings.light-text
  assign spacing_above = section.settings.spacing-above
  assign spacing_below = section.settings.spacing-below
  assign subheading = section.settings.newsletter--subheading

  assign button_type = 'button'
  if light_text
    assign button_type = 'inverted-button'
  endif
-%}

{% comment %} View {% endcomment %}

  

    {% if heading != blank %}
      ## {{ heading }}
    {% endif %}

    {% if subheading != blank %}
      
        {{ subheading }}
      

    {% endif %}

    
      {% form 'customer', id: form_id, class: 'newsletter--form' %}
        

          
          
          
          
           

             

          
            
          

         
         
        

        {% if form.errors %}
          

          {% for field in form.errors %}
            {{ field }} {{ form.errors.messages[field] }}
          {% endfor %}
          

        {% endif %}

        {% if form.posted_successfully? %}
          
        {% endif %}

        

          {% comment %} remove the below line to display reCAPTCHA badge {% endcomment %}
          {{ 'shopify.online_store.spam_detection.disclaimer_html' | t }}
        

      {% endform %}

    

  

{% schema %}
  {
    "name": "Newsletter",
    "settings": [
      {
        "id": "background-color",
        "label": "Background color",
        "type": "select",
        "options": [
          { "label": "None", "value": "none" },
          { "label": "Light", "value": "light" },
          { "label": "Dark", "value": "dark" },
          { "label": "Accent", "value": "accent" }
        ],
        "default": "none"
      },
      {
        "id": "light-text",
        "label": "Use light text color",
        "type": "checkbox",
        "default": false
      },
      {
        "id": "spacing-above",
        "label": "Spacing above",
        "type": "checkbox",
        "default": true
      },
      {
        "id": "spacing-below",
        "label": "Spacing below",
        "type": "checkbox",
        "default": true
      },
      {
        "type": "text",
        "id": "heading",
        "label": "Heading",
        "default": "Subscribe to our newsletter"
      },
      {
        "type": "richtext",
        "id": "newsletter--subheading",
        "label": "Subheading",
        "default": "

A short sentence describing what someone will receive by subscribing

"
      },
      {
        "type": "paragraph",
        "content": "Customers who subscribe will have their email address added to the “accepts marketing” [customer list](/admin/customers?query=&accepts_marketing=1)"
      }
    ],
    "presets": [{
      "name": "Newsletter"
    }],
    "blocks" : []
  }
{% endschema %}
6

I figured it out! I had to change the html in newsletter.liquid so each row is now a new div class:


      {% form 'customer', id: form_id, class: 'newsletter--form' %}

i then added the following CSS:

.secondrow{
  padding-top: 20px;
  display: inline-flex;
  align-items: center;
}

.flexbox-gap .secondrow {
    gap: 12px;
}
1 Like
7

Olá,
O suporte da Shopify indicou este link para que eu consiga adicionar Caixa De Seleção GDPR na Newsletter da minha loja. Estou usando o tema Taste, não consegui localizar no código onde colocar os scripts que mencionou aqui. Pode me ajudar?

8

Olá Tiago,

Sorry I don’t speak Portuguese but I’m hoping you can Google Translate the above solution.

If you can try to duplicate the newsletter file (so you have the original code), and then replace the entire code with the solution above, it might work. although the code is different for each theme.

Can you share the link to your website here so myself and others can try to help?

Thanks

Hannah