Notice: End-of-Life Announcement for all Shopify themes by Barrel > Read More

Close

Remove diamonds from horizontal divider in the footer

This tutorial was written for version 1.0.7 of the Mosaic theme, but it should work for (almost) every other version of the theme as well.

In our Mosaic theme, the horizontal divider in the footer looks like this:

Screen Shot 2016-03-23 at 08.55.43

This tutorial will show you how to remove the diamonds in the middle, so that it just looks like this:

Screen Shot 2016-03-23 at 08.55.58

 

Steps:

  1. Go to Edit HTML/CSS to edit the theme code. Shopify has a guide on how to do this here.
  2. In the Snippets folder, open the file called site-footer.liquid.
  3. The first 4 lines of code in this file should look like this:
    <section class="container-wrap">
     <footer class="site-footer container pad-lg">
     <div class="footer-inner row row-lg inline u-center">
     <span class="icon-divider"></span>

    Delete the code in red above. The first 4 lines should now look like this:

    <section class="container-wrap">
     <footer class="site-footer container pad-lg">
     <div class="footer-inner row row-lg inline u-center">
     <span class=""></span>
  4. Now go down to around line 151, and look for these 4 lines of code:
    <div class="footer-sub row row-lg inline">
      <span class="icon-divider"></span>
    
      {% if settings.social_in_footer %}
        <ul class="footer-social-mobile">

    This code adds another horizontal divider with diamonds on the mobile version of the theme. Delete the code in red above. These 4 lines should now look like this:

    <div class="footer-sub row row-lg inline">
      <span class=""></span>
    
      {% if settings.social_in_footer %}
        <ul class="footer-social-mobile">

That’s it!