Shopify. How to add one more links block in footer

In this tutorial you will learn how to add one more links block in footer position of Shopify template.

Shopify. How to add one more links block in footer

1. Log into your Admin panel and navigate to Themes menu.

2. Click on Customize Theme button. Click on the Edit HTML/CSS button.

3. Open theme.liquid file under Layout tab.

4. Search for footer and copy one of the existing blocks. In this example we are going to add a new block list with links to pages. Therefore, we are going to copy the same.

5. Paste our copied code prior to the closing </div> of the whole footer container.

   <div class="col-sm-2 col-xs-6 footer_block footer_block__5 wow">
   <h3>{{ settings.footer_block5_title }}</h3>
   <ul>
   {% for link in linklists[settings.footer_block5_list].links limit:7 %}
   <li {% if link.active %}class="active"{% endif %}>{{ link.title | link_to: link.url }}</li>
   {% endfor %}
   </ul>
   </div>

6. Replace block__# number precisely to the next value, for example, change footer_block__1 to footer_block__5 and footer_block1_list to footer_block5_list.

   

7. In order to fit five blocks in footer, we need to decrease the width for our blocks. This can be done by changing the “col-sm-3” class to “col-sm-2”.

8. Click on Save button to save changes.

9. Select settings.html file under Configs tab on your left hand side.

10. Search for footer section. We are going to duplicate a portion of this table in order to use it for our new one:

    

    <tr>
    <td>Footer block #5 (links list, max 7 links)</td>
    <td><label for="footer_block5_title">Title</label></td>
    <td><label for="footer_block5_list">Content</label></td>
    </tr>
    <tr>
    <td></td>
    <td><input type="text" name="footer_block5_title" id="footer_block5_title" class="long" /></td>
    <td><select class="linklist" name="footer_block5_list" id="footer_block5_list"></select></td>
    </tr>

11. Click on Save button to save our changes.

12. Click on Customize theme button to proceed.

13. Select Navigation menu on your left hand side. Click on the Add a link list button.

14. Specify the desired name in the Name field. Also, add needed links/pages they will be linked to in the Links section below.

15. Click on the Save Links button when you are done:

    

16. Go back to the Themes menu. Open our footer section in the Custom blocks tab.

17. Give a new title to your block and select newly added links under Content drop down selection:

    

18. Save your changes by clicking on Publish changes button below.

19. Reload your site to preview the changes.

Thank you for reading this tutorial. Now you know how to add more links block in footer position of Shopify template.

Feel free to check the detailed video tutorial below:

Shopify. How to add one more links block in footer