Dawn - How can I add the registration form as a section in my home page?

Store Design
1

Hi,

I’m using the Dawn 2.0 theme.

https://wortheattt.myshopify.com/

I want to add the registration form part of the Shopify registration page as a section in my home page. I guess the option to do it is to select the liquid section and add a code there to display the registration form.

How can I add the registration form as a section in my home page?

Ben1000_0-1656249356287.png
Ben1000_0-1656249356287.png1096×992 25.9 KB

Thanks

2

Hi @Ben1000 ,

Please go to Customize > Add section > Custom Liquid.

Screenshot.png
Screenshot.png1536×719 27.8 KB

Code:

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

  
  # 
    {{ '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 -%}

Hope it helps!

1 Like
3

Hi @LitCommerce ,

Thank you very much, it works. How can I remove the title of the registration form and minimize the padding before and after? Because even when I minimize the padding to 0 the gap is still very big.

4

Hi @Ben1000 ,

Please change all code:

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

  
  {%- 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 -%}

Hope it helps!

1 Like
5

Hi @LitCommerce ,

Thanks, it looks better, is it possible to minimize more the top padding?

6

Hi @Ben1000 ,

Have you tried changing it with setting ‘Top padding’?

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

1 Like
7

Hi @LitCommerce ,

I tried and still there is a gap above after making top padding to 0px. Is it possible to minimize it more?

8

Hi @Ben1000 ,

Go to Assets > base.css and paste this at the bottom of the file:

#shopify-section-template--14625265319989__1656336802137f043a .customer form {
	margin-top: 0 !important;
}

Hope it helps!

1 Like
9

Hi @LitCommerce ,

Thanks, it helped!

1 Like
10

Hi @Ben1000 ,

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.