There are template tags that display the various Social media images and their respective code. See the section Social Media on http://shopsite.com/help/11.2/en-US/templates/custom.template.cheatsheet.all.html for a list of the template tags.
In addition there is an option "reverse" to the [-- SOCIAL_FOLLOW --] tag which is not documented. The tag [-- SOCIAL_FOLLOW --] displays the images in a left to right order (Facebook, Twitter, GooglePlus, Pinterest). If you add the "reverse" option it switches the order to the exact opposite (Pinterest, GooglePlus, Twitter, Facebook). As the help page explains using the [-- SOCIAl_FOLLOW --] tag is equivalent to [-- Facebook_Follow --][-- Twitter_Follow --][-- GooglePlus_Follow --][-- Pinterest_Follow --] and the reverse option would be the same as those tags in reverse order. The advantage of using the [-- Social_Follow --] tag is that when a new "Social Media" app comes allong and it is added to ShopSite you would just have to enable the feature and publish and it would display. Using the individual tags you would need to modify your template and add the new tag and any associated formatting.
Since I don't know which template you are using or if it is using the individual tags or the combined tag it is hard to say what the styles would be. In my test store with the Curved theme enabled this is the code generated by the the [-- Social_Follow --] tag
- Code: Select all
<span id="social_media">
<a href="http://my.domain.com/index.html" class="social_follow fb_follow" target="_blank"> <img class="social_follow fb_follow" src="http://my.domain.com/shopsite-images/en-US/logo/facebook.png" alt="Like our Facebook Page" title="Like our Facebook Page"></a>
<a href="http://twitter.com/jim" class="social_follow twtr_follow" target="_blank"><img class="social_follow twtr_follow" src="http://my.domain.com/shopsite-images/en-US/logo/twitter.png" alt="Follow us on Twitter" title="Follow us on Twitter"></a>
<a class="social_follow gplus_follow" href="https://plus.google.com/1234/about" target="_blank"><img class="social_follow gplus_follow" src="http://my.domain.com/shopsite-images/en-US/logo/googleplus.png" alt="Follow us on Google Plus" title="Follow us on Google Plus"></a>
<a href="http://pinterest.com/jim/" class="social_follow pt_follow" target="_blank"><img class="social_follow pt_follow" src="http://my.domain.com/shopsite-images/en-US/logo/pinterest.png" alt="Follow me on Pinterest" title="Follow me on Pinterest" /></a>
</span>
So there is a style for the span called social_media, a style for facebook "social_follow fb_follow" , a style for twitter ocial_follow twtr_follow, as style for GooglePlus "social_follow gplus_follow" and a style for pintrest "social_follow pt_follow". So those (or the equilivant ones in your template) would be what you would need to edit to make changes to the layout.