Adding some space above the checkbox in my creating an account form (Dawn theme)

Store Design
, , ,

Topic summary

A user needed to add spacing above the newsletter subscription checkbox in their Shopify Dawn theme’s account registration form, as it appeared too close to the password field.

Solution Provided:

  • Add CSS to customer.css targeting .customer .accepts-marketing with padding-top: 20px
  • This successfully resolved the spacing issue

Follow-up Request:
The user then asked how to make the newsletter checkbox pre-selected by default. They mentioned reading about adding a checked attribute to the <input> element.

Additional Solution:

  • A complete code replacement for main-register.liquid was provided
  • The code includes the checkbox pre-selection functionality

Status: The initial spacing problem is resolved. The implementation of the pre-checked checkbox appears to be in progress with code provided but no confirmation of testing yet.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

I am trying to add some space above the checkbox in my ‘creating an account form’ (see screenshot and link below).

https://77af35.myshopify.com/account/register

Andrecolap_0-1711067687659.png
Andrecolap_0-1711067687659.png2880×1800 245 KB

the line with the checkbox and the Subscribe text is too close to the password field.

I am pasting below the code in the main-register.liquid that generate that page. Let me know what you think, thanks.

{{ ‘customer.css’ | asset_url | stylesheet_tag }}

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

{{ 'customer.register.title' | t }}

{%- form 'create_customer', novalidate: 'novalidate' -%} {%- if form.errors -%}

{{ 'templates.contact.form.error_heading' | t }}

{%- endif -%}
{{ 'customer.register.first_name' | t }}
{{ 'customer.register.last_name' | t }}
{{ 'customer.register.email' | t }}
{%- if form.errors contains 'email' -%} {{ form.errors.translated_fields.email | capitalize }} {{ form.errors.messages.email }}. {%- endif -%}
{{ 'customer.register.password' | t }}
{%- if form.errors contains 'password' -%} {{ form.errors.translated_fields.password | capitalize }} {{ form.errors.messages.password }}. {%- endif -%}

Subscribe to our newsletter

{{ 'customer.register.submit' | t }} {%- endform -%}

{% schema %}
{
“name”: “t:sections.main-register.name”,
“settings”: [
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 36
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 36
}
]
}
{% endschema %}

2

Add This css in customer.css

.customer .accepts-marketing {
    padding-top: 20px;
}

more Info:-

please Contect Me on mail => raj.s.hopiant@gmail.com

3

thank you @Raj-webdesigner it works.

I would like to have the newsletter subscription checkbox pre-selected (checked) by default and one an article I read I can achieve this by adding the “checked” attribute to the checkbox element.

Could you tell me how do I actually do that?

Many thanks

4

Put This Code On Actual Code On main-register.liquid

{{ 'customer.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

@media screen and (min-width: 750px) {
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top }}px;
    padding-bottom: {{ section.settings.padding_bottom }}px;
  }
}
{%- endstyle -%}

  
  # 
    {{ 'customer.register.title' | t }}
  
  {%- form 'create_customer', novalidate: 'novalidate' -%}
    {%- if form.errors -%}
      ## 
        
        {{ 'templates.contact.form.error_heading' | t }}
      
      
        {%- for field in form.errors -%}
          - {%- if field == 'form' -%}
                {{ form.errors.messages[field] }}
              {%- else -%}
              
                  {{ form.errors.translated_fields[field] | capitalize }}
                  {{ form.errors.messages[field] }}
              
              {%- endif -%}
          
        {%- endfor -%}
      

    {%- endif -%}
    
      
      
    

    
      
      
    

    
      
      
    

    {%- if form.errors contains 'email' -%}
      
        
        {{ form.errors.translated_fields.email | capitalize }}
        {{ form.errors.messages.email }}.
      
    {%- endif -%}
    

      
      
    

    {%- if form.errors contains 'password' -%}
      
        
        {{ form.errors.translated_fields.password | capitalize }}
        {{ form.errors.messages.password }}.
      
    {%- endif -%}
    

      

      
      
    

    
  {%- endform -%}

{% schema %}
{
  "name": "t:sections.main-register.name",
  "settings": [
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ]
}
{% endschema %}