How can I add the checkbox after a newsletter signup

Store Design
, ,

Topic summary

Main issue: add a consent checkbox directly below the newsletter email field in a Shopify theme, ensuring it’s required before submission. The current approach uses an absolutely positioned div for the checkbox and label, which renders misaligned/overlayed, as shown in the shared screenshots.

Latest update: The requester cannot share store URL/password, but provided the full newsletter Liquid section code. The checkbox block is placed inside the form, after the input row and submit button, with inline styles (position: absolute; z-index: 2; margin-top: 55px) and a Polish consent text including a link (“tutaj”).

Technical context: Shopify “form ‘customer’” for newsletter, hidden contact[tags]=newsletter, floating label input, and a compact layout (newsletter–compact). The checkbox lacks a name/id and relies on HTML “required” for validation, but its absolute positioning likely breaks layout and accessibility.

Outcome/status: No solution provided yet; access request was declined. The thread is open, awaiting guidance on proper placement, CSS (non-absolute), and integrating the checkbox into form validation and theme styles.

Media: Screenshots are central to show the incorrect positioning and desired placement.

Summarized with AI on January 22. AI used: gpt-5.
1

Good morining,

I have problem to add the checkbox in the newsletter signup.

I want to add this in the part below

Donaaa_0-1691039615883.png
Donaaa_0-1691039615883.png1427×350 13.9 KB

When I added a code

Wyrażam zgodę na przesyłanie do mnie informacji handlowych i marketingowych oraz na przetwarzanie moich danych osobowych do celów związanych z przesyłaniem do mnie informacji handlowych i marketingowych przezZapoznałem/am się z informacjami o przetwarzaniu moich danych osobowych dostępnymi tutaj.

And then it is shown in this way

Donaaa_1-1691040125624.png
Donaaa_1-1691040125624.png1729×468 20.9 KB

2

Hey @Donaaa
Kindly share your Store URL and Password if enabled

3

Unfortunately I can’t do it. I can only send you the full newsletter code.

#shopify-section-{{ section.id }} { background: {{ section.settings.background }}; color: {{ section.settings.text }}; }
{%- if section.settings.title != blank -%}

{{ section.settings.title | escape }}

{%- endif -%}

{%- if section.settings.content != blank -%}

{{ section.settings.content }}
{%- endif -%}

{%- assign newsletter_id = ‘newsletter-’ | append: section.id -%}

{%- form 'customer', id: newsletter_id, class: 'form newsletter__form' -%} {%- if form.posted_successfully? -%}

{{ 'home_page.newsletter.success' | t }}

{%- else -%} {%- if form.errors -%}

{{ form.errors.messages['email'] }}

{%- endif -%}
{{ 'home_page.newsletter.input' | t }}
{{ 'home_page.newsletter.submit' | t }}
{%- endif -%}
Wyrażam zgodę na przesyłanie do mnie informacji handlowych i marketingowych oraz na przetwarzanie moich danych osobowych do celów związanych z przesyłaniem do mnie informacji handlowych i marketingowych. Zapoznałem/am się z informacjami o przetwarzaniu moich danych osobowych dostępnymi tutaj.
{%- endform -%}

{% schema %}
{
“name”: “Newsletter”,
“settings”: [
{
“type”: “paragraph”,
“content”: “Customers who subscribe will have their email address added to the "accepts marketing" customer list.”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“default”: “Newsletter”
},
{
“type”: “richtext”,
“id”: “content”,
“label”: “Text”,
“default”: “

A short sentence describing what someone will receive by subscribing

”
},
{
“type”: “color”,
“id”: “background”,
“label”: “Background”,
“default”: “#1e2d7d”
},
{
“type”: “color”,
“id”: “text”,
“label”: “Text”,
“default”: “#ffffff”
}
],
“presets”: [
{
“category”: “Promotional”,
“name”: “Newsletter”,
“settings”: {}
}
]
}
{% endschema %}