How can I move the footer social icons to a different position?

[BrentonLoui]

I would like to relocate the social icon to the position where the Instagram link is currently located in the footer.

[StudioEnchant]

Hey, please provide the store URL along with the storefront password (if enabled). also specify where would you want to move the icons.

[Made4uo-Ribe]

Hi @BrentonLoui 

Would you mind to share your Store URL website? with password if its protected. Thanks!

[BrentonLoui]

https://957edc.myshopify.com/

[Anshul_arora]

Hello @BrentonLoui ,

As per my understanding you are looking to put Instagram icon with Instagram link in your store https://957edc.myshopify.com  footer section https://prnt.sc/p4BgFj3j6qT9

This issue can be resolve by making small changes in your HTML or CSS code.

Please follow the following steps.

1. Please find the code associated with your social media icon in your main-product.liquid file . I have attached the code screenshot and also write the code. So you can easily find the code in your file. https://prnt.sc/t2ZpDSgP0D33

<div class="footer__column footer__column--social">
<ul class="footer__list-social list-unstyled" role="list"><li class="list-social__item">
<a href="http://instagram.com/inthemake.co" class="link link--text list-social__link" aria-describedby="a11y-external-message">
<span class="list-social__text">
<svg viewBox="0 0 18 18" class="icon icon-instagram" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.0013 0.736328C11.2655 0.736328 11.548 0.744661 12.4363 0.786328C13.3238 0.827995 13.928 0.967162 14.4596 1.17383C15.0096 1.38549 15.473 1.67216 15.9363 2.13466C16.36 2.55124 16.6879 3.05515 16.8971 3.61133C17.103 4.14216 17.243 4.74716 17.2846 5.63466C17.3238 6.52299 17.3346 6.80549 17.3346 9.06966C17.3346 11.3338 17.3263 11.6163 17.2846 12.5047C17.243 13.3922 17.103 13.9963 16.8971 14.528C16.6885 15.0845 16.3606 15.5885 15.9363 16.0047C15.5196 16.4283 15.0157 16.7561 14.4596 16.9655C13.9288 17.1713 13.3238 17.3113 12.4363 17.353C11.548 17.3922 11.2655 17.403 9.0013 17.403C6.73714 17.403 6.45464 17.3947 5.5663 17.353C4.6788 17.3113 4.07464 17.1713 3.54297 16.9655C2.98657 16.7567 2.48257 16.4288 2.0663 16.0047C1.64247 15.5881 1.31458 15.0842 1.10547 14.528C0.898802 13.9972 0.759635 13.3922 0.717969 12.5047C0.678802 11.6163 0.667969 11.3338 0.667969 9.06966C0.667969 6.80549 0.676302 6.52299 0.717969 5.63466C0.759635 4.74633 0.898802 4.14299 1.10547 3.61133C1.314 3.05481 1.64197 2.55076 2.0663 2.13466C2.48269 1.71069 2.98666 1.38277 3.54297 1.17383C4.07464 0.967162 4.67797 0.827995 5.5663 0.786328C6.45464 0.747161 6.73714 0.736328 9.0013 0.736328ZM9.0013 4.90299C7.89623 4.90299 6.83643 5.34198 6.05502 6.12338C5.27362 6.90478 4.83464 7.96459 4.83464 9.06966C4.83464 10.1747 5.27362 11.2345 6.05502 12.0159C6.83643 12.7973 7.89623 13.2363 9.0013 13.2363C10.1064 13.2363 11.1662 12.7973 11.9476 12.0159C12.729 11.2345 13.168 10.1747 13.168 9.06966C13.168 7.96459 12.729 6.90478 11.9476 6.12338C11.1662 5.34198 10.1064 4.90299 9.0013 4.90299V4.90299ZM14.418 4.69466C14.418 4.41839 14.3082 4.15344 14.1129 3.95809C13.9175 3.76274 13.6526 3.65299 13.3763 3.65299C13.1 3.65299 12.8351 3.76274 12.6397 3.95809C12.4444 4.15344 12.3346 4.41839 12.3346 4.69466C12.3346 4.97093 12.4444 5.23588 12.6397 5.43123C12.8351 5.62658 13.1 5.73633 13.3763 5.73633C13.6526 5.73633 13.9175 5.62658 14.1129 5.43123C14.3082 5.23588 14.418 4.97093 14.418 4.69466ZM9.0013 6.56966C9.66434 6.56966 10.3002 6.83305 10.7691 7.30189C11.2379 7.77073 11.5013 8.40662 11.5013 9.06966C11.5013 9.7327 11.2379 10.3686 10.7691 10.8374C10.3002 11.3063 9.66434 11.5697 9.0013 11.5697C8.33826 11.5697 7.70238 11.3063 7.23353 10.8374C6.76469 10.3686 6.5013 9.7327 6.5013 9.06966C6.5013 8.40662 6.76469 7.77073 7.23353 7.30189C7.70238 6.83305 8.33826 6.56966 9.0013 6.56966V6.56966Z" fill="currentColor"></path>
</svg>
</span>
<span class="visually-hidden">Instagram</span>
</a>
</li></ul>
</div>

Now, cut the code from the previous section (from "footer-block_left" class.), when you delete the code, it will disappear from the footer section. https://prnt.sc/X882LGrTroPY

2. Now, put the same code in "footer-block_text" class (class can be find in main-product.liquid file). You can also copy the code from step 1.

As you can see when I put the code inside "footer-block_text" class div before <p> tag. It will look like this. https://prnt.sc/6lrku7FPyPgh

3. Next, you have to add CSS code in your .css file, so it will display in same row.

.footer-block__text {
display: flex;
}

Output will look like this https://prnt.sc/cOdNbVlrirbw

4. In the next step, we have to remove the space between icon and text, for this you have to find " .footer_column--social " class code in your .css file and change the min-width to 0rem;

Please take a look at this -> https://prnt.sc/bPMB8-Dhi7PG

5. Next, find the code named with this class -> .footer_list-social .list-social_item in your .css file.

In this css code only change the min-width: 30 px;

After changing output will look like this https://prnt.sc/lt4E2bA6peZy

6. Save changes.

I hope the solution helps you.

Please let me know if you have any query or need any assistance.

Thank you.