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

Store Design
1

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

1 Like
2

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

3

Hi @BrentonLoui

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

4

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

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

  1. 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

tag. It will look like this. https://prnt.sc/6lrku7FPyPgh

  1. 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

  1. 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

  1. 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

  1. Save changes.

I hope the solution helps you.

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

Thank you.

5

https://957edc.myshopify.com/