Argento Pure 2.0 Footer

Social icons

You can add or remove additional links in Cms > Static Blocks > footer_social block.

Here is a full list of supported icons right “from the box”:

<div class="block block-social">
    <ul class="icons">
        <li class="twitter"><a href="twitter.com">Twitter</a></li>
        <li class="facebook"><a href="facebook.com">Facebook</a></li>
        <li class="youtube"><a href="youtube.com">YouTube</a></li>
        <li class="rss"><a href="rss.com">Rss</a></li>
        <li class="gplus"><a href="plus.google.com">Google+</a></li>
        <li class="linkedin"><a href="linkedin.com">LinkedIn</a></li>
        <li class="pinterest"><a href="pinterest.com">Pinterest</a></li>
    </ul>
</div>

You can add icon of any other site or service (instagram, wikipedia, vimeo etc). Use custom CSS code below to do this:

.footer-cms .block-social .icons .custom_class_name { background: <default_color>; }
.footer-cms .block-social .icons .custom_class_name:hover { background: <hover_color>; }
.footer-cms .block-social .icons .custom_class_name a:before { content: '\<fa_hex_code>'; }

custom_class_name - replace with your CSS class name.

<default_color> - color of icon.

<hover_color> - color of icon when cursor points on it.

\<fa_hex_code> - hex code of font-awesome symbol (if hex code is [], then <fa_hex_code> = f259). Font-awesome symbols with its codes you can find at Font-Awesome Cheatsheet.

Add modified custom CSS to your theme. And add html to footer_social block.

<li class="custom_class_name"><a href="someurl">icon title</a></li>

Add instagram to social icons

Here is ready to use CSS and HTML code according to instruction above.

Custom CSS:

.footer-cms .block-social .icons .instagram { background: #ccc; }
.footer-cms .block-social .icons .instagram:hover { background: #325b83; }
.footer-cms .block-social .icons .instagram a:before { content: '\f16d'; }

HTML for footer_social:

<li class="instagram"><a href="instagram.com">Instagram</a></li>

Company information, Call Us

You can add or remove additional links, change phone number and text in Cms > Static Blocks > footer block.

Short footer layout

Short footer layout is used on checkout page to increase conversion rate.

You can disable short footer using custom layout update file

<short_header_footer>
    <reference name="footer">
        <action method="setTemplate"><template>page/html/footer.phtml</template></action>
    </reference>
</short_header_footer>