Dawn Theme - Add additional sections to Footer

[stephcross]

I’m trying to add a new section above the footer columns using the dawn theme.

What I am trying to achieve is to add the following to the footer

multicolumn block Newsletter block> (move newsletter block up above the footer-block - full width)

I believe this requires modifying the footer.liquid file. Is there an easy way to achieve this?

Thank you!

[dmwwebartisan]

@stephcross

Please share the screenshot of what you want!

Thanks!

[BSS-Commerce]

Hi @stephcross

Please follow these steps:

• File file footer.liquid:

• Find the footer tag in the file:

• Insert the code of the part you want to add right below. For example:

    

      
Block 1

      Block 2

      Block 3

    

    Newsletter block

  

• You can compare between Before and After:

• Before:

• After:

• Here is the result:

I hope that it will work for you.

[stephcross]

Attached is a quick mockup of what we envision.

[BSS-Commerce]

Hi @stephcross

You will find the file footer.liquid:

• Find the footer tag in the file:

• Remove old code, if any:

    

      
Block 1

      Block 2

      Block 3

    

    Newsletter block

  

• Add the following CSS code inside the style just above the footer tag:

.center-flex {
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .full-max-width {
    max-width: 100%;
  }

• Then, add the following code just below the footer. tag:

    

      

        
Icon 1

        Title 1

      

      
        
Icon 2

        Title 2

      

      
        
Icon 3

        Title 3

      

      
        
Icon 4

        Title 4

      

      
        
Icon 5

        Title 5

      

    

    

    {%- if section.settings.newsletter_enable -%}
      

        {%- if section.settings.newsletter_heading != blank -%}
          ## {{ section.settings.newsletter_heading | escape }}
        {%- endif -%}
        {%- form 'customer', id: 'ContactFooter', class: 'full-max-width footer__newsletter newsletter-form center' -%}
          
          

            

              
              
              
            

            {%- if form.errors -%}
              <small>{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
            {%- endif -%}
          

          {%- if form.posted_successfully? -%}
            ### {% render 'icon-success' %}{{ 'newsletter.success' | t }}
          {%- endif -%}
        {%- endform -%}
      

    {%- endif -%}
  

• You can compare the code before and after:

• Before:

• After:

• The newsletter section here is the default newsletter of the Dawn theme

• Here is the final result:

I hope that this can help you solve the issue.

[stephcross]

Thank you! That did the trick