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

  • 0
  • 1
  • Question
  • Updated 4 years ago
  • Answered
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members. The community moderator provided the following reason for archiving: Archived

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

design2013-05-15_1805.png

2.) Choose the Template Files tab.

template_files2013-05-15_1805.png

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

panels2013-05-15_1829.png

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

footer2013-05-16_1529.png

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

cutfromfooter2013-05-16_1541.png

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

header2013-05-16_1536.png

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.

headerpaste2013-05-16_1541.png

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

stylesfolder2013-05-16_1536.png

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

styles2013-05-16_1537.png

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)

leftmargin2013-05-16_1559.png

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

duplicate2013-06-18_1054.png

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

  • 252,538 Points 100k badge 2x thumb

Posted 4 years ago

  • 0
  • 1

There are no replies.

This conversation is no longer open for comments or replies.