How to move social media icons in Supply theme footer

New Member
2 0 0

Hello,

I have scoured these forums and still haven't found a suitable solution to my problem...I would like both the legal menu and the social media icons to appear in the footer of my Shopify store.  I am currently using the Supply theme, and when only the legal menu is displayed, my links appear centered on the page alll on one line...this is exactly what I want.

However, when I add the social media icons to the footer, the legal menu becomes left-justified on 2 lines, and the social media icons appear to the right of it.  I would really like the legal menu to display on one line with the social media icons on a separate line above the legal menu.  Can you please help me accomplish this?  I realize that I will likely have to make changes to my footer.liquid file.  I'm just not sure exactly what those changes need to be.

Thanks a bunch!

Monique

0 Likes
Shopify Partner
49 0 3

Hi,

Change footer.liquid according to your requirements.

 

If you need any help in theme customization. Email me at pankajtechcode@gmail.com

0 Likes
New Member
2 0 0

I figured out what coding to change in the footer.liquid file.  For anyone else who may be interested:

1- modify line #68 FROM:

      <div class="grid-item{% if section.settings.social_enabled %} large--two-fifths{% else %} one-whole text-center{% endif %}">

TO:

      <div class="grid-item{% if section.settings.social_enabled %} one-whole text-center {% else %} one-whole text-center{% endif %}">

2- modify line #78 FROM:

      <div class="grid-item{% if section.settings.legal_menu != blank %} large--three-fifths text-right{% else %} one-whole text-center{% endif %}">

TO:

      <div class="grid-item{% if section.settings.legal_menu != blank %} one-whole text-center{% else %} one-whole text-center{% endif %}">

 

This will center the legal menu and social icons on separate lines.  The legal menu will appear above the social icons.  If you want the social icons to appear above the legal menu, continue with the following:

 

3- cut lines #67-76:

{% if section.settings.legal_menu != blank %}
      <div class="grid-item{% if section.settings.social_enabled %} large--two-fifths{% else %} one-whole text-center{% endif %}">

          <ul class="legal-links inline-list">
            {% for link in linklists[section.settings.legal_menu].links %}
              <li><a href="{{ link.url }}">{{ link.title }}</a></li>
            {% endfor %}
          </ul>
      </div>
      {% endif %}

2- paste after line #153

 

If you want the social icons to appear on the same line and have the same issue I was originally having with the legal menu appearing on 2 lines, you can just play with the ratios in steps 1 & 2 above.  For me, one-fifth and four-fifths seemed to work well, but the proportions will really depend on how many items are in your legal menu.

I hope this all makes sense to anyone else who may want to accomplish the same thing as me.  The steps above are for the SUPPLY theme specifically.  Just make sure you make a copy of your footer.liquid file BEFORE making any changes, just in case you need to revert back to the original code.

Cheers!

0 Likes
New Member
4 0 0

Thanks for sharing this fix, Monique.  

0 Likes
New Member
9 0 0

I come across this kind of questions pretty often. Here’s a more detailed guide for newbies. I made it based on the following plugin : https://apps.shopify.com/social-media-icons-app - But it will also suite any code fragment, plugin, or icons.

  1. Find the plugin or the icons
  2. Install the plugin and place the icons
  3. Get the insert code (with no plugin, you can start from here)
  4. Go to Online Store -> Themes -> Edit Code (in actions list)
  5. Find the required section (in this case - footer)
  6. Insert the code to the required place

*How to define the required place. Go to the website and right click on the mouse in the place, where the plugin should be. Check what elements are there and memorize their classes and nesting. Go back to editing of the template, find the elements and insert them there.

       7. Save the changes and go to the website

If you failed with the installation and you are the plugin user (the link is above), you can contact Support team, and they will help you (it’s one of the advantages of this plugin).

I hope it will help those who are just starting!

0 Likes
New Member
1 0 0

Hi there. I can't seem to understand the Step -3 wherein I need to cut the lines and paste after Line 153

0 Likes