How can I move my built-in Social Media Icons to the top of my store?

  • 0
  • 1
  • Question
  • Updated 4 years ago
  • Answered
Many people have been asking how to move the built-in Social Media Icons to the top of their store. This tutorial will show you how!


1.) Login to your Control Panel and click Design


2.) Choose the Template Files tab.


3.) Scroll down to the Panels folder and expand it using the plus(+) sign.


4.) Find the Footer.html file and click Edit.


5.) Find %%Panel.SocialLinks%% (typically on line 13), select it, right-click, and choose cut. Click save in the top-left corner.


6.) Return to the Panels folder and scroll to the Header.html file and click Edit.


7.) Place your cursor after %%Panel.HeaderSearch%% (typically on line 11) and hit enter to create a new line. Right-click and choose "paste." Click save in the top-left corner.


8.) Return to the Design area and scroll to the Styles folder and expand it using the plus (+) sign..


9.) Find the Styles.css file and click Edit.


10.) Scroll to the#socnet ID (typically around line 3006) and add the following: margin-left: 650px;

(please note you may want to adjust that number based on the number of social icons you are using - this is simply an example)


**NOTE** If you are using certain themes like Bride To Be you may see duplicate images like below.


If your template behaves in this way, copy the code below and paste it to the bottom of your Styles.css file and it should resolve the issue for you.

#socnet li {
list-style: none;
list-style-type: none;
display: inline !important;
width: 28px!important;
height: 28px!important;
.SocialConnect li a{
width: 28px!important;
height: 28px!important;

11.) Click Save in the top left and you're done!

Photo of Drew N

Drew N, Community Manager

  • 244,466 Points 100k badge 2x thumb

Posted 4 years ago

  • 0
  • 1

Be the first to post a reply!