Updating the Footer Links for Social Media

Article Number: 401 | Rating: 5/5 from 1 votes | Last Updated: Thu, Jan 10, 2013 at 3:53 PM

Purpose:

To explain how to update the social media footer links used in the Informative Footer of the Celebrity theme. While the Customer Service links and About Us links automatically link to the corresponding pages on your storefront, the social media links are unique to your business and need to be updated to meet your needs.

Solution:

Select CMS / Static Blocks and select the Celebrity Theme - Footer Links (Informative) block.
Replace the href="javascript:void();" references with valid HTML links. (NOTE: The javascript:void() in the default code simply prevents these links from actually working in your storefront since they don't point anywhere (yet). When inserting the real links, you should replace javascript:void() with the valid URL.
The social media icons used in the footer area are determined by the style (e.g., the class="twitter" reference adds the Twitter icon to the beginning of the link). The icons can be controlled by editing the CSS, or by simply removing the class references and inserting image icons as desired (see YouTube example below).
Save your changes.

For Example:

Default Code:

<li><span>Connect with Us</span>
<ul class="footer-social">
<li><a class="twitter" href="javascript:void();" target="_blank">Twitter</a></li>
<li><a class="facebook" href="javascript:void();" target="_blank">Facebook</a></li>
<li><a class="google" href="javascript:void();" target="_blank">Google</a></li>
<li><a class="email" href="javascript:void();">Email</a></li>
</ul>

Revised Code with Sample Links:

<li><span>Connect with NCR!</span>
<ul class="footer-social">
<li><a class="facebook" href=" http://www.facebook.com/ncrcorp " target="_blank">Facebook</a></li>
<li><a class="twitter" href=" http://twitter.com/#!/ncrcorporation " target="_blank">Twitter</a></li>
<li><img src="{{media url="wysiwyg/youtube.png"}}" alt="" /><a href=" http://www.youtube.com/ncrcorporation " target="social" style="padding-left: 7px;">YouTube</a></li>

<li><a class="email" href=" mailto:info@ncrretailonline.com ">Email</a></li>
</ul>

For the email link, you could alternatively link to your Contact Us page or link to your email signup form:

To link to the Contact Us page:
<li><a class="email" href="{{store url="contact"}}">Email</a></li>
To use the link as an email signup (assuming that you are using a third-party email solution like NCR Customer Connect instead of the built-in newsletter option):
<li><a class="email" href=" https://www.radiantretailapps.com/CustomerConnect/OptIn.aspx?a=8F-CoQ13lE6ruRz3NZ8enw " target="_blank">Join Our Email List</a></li>