Instantly share code, notes, and snippets.
Created
April 22, 2016 12:40
-
Save levinmejia/741ffae1590d2f99778623c1581d04f3 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<footer class="site-footer small--text-center" role="contentinfo"> | |
<div class="wrapper"> | |
<h1>We love speaking to our customers. Got a question?</h1> | |
<ul> | |
<li><a href="http://www.twitter.com/shopifypartners">@shopifypartners</a></li> | |
<li>1-800-555-1234</li> | |
<li><a href="mailto:hello@myshopemail.com">hello@myshopemail.com</a></li> | |
</ul> | |
<div class="grid-uniform"> | |
{% comment %} | |
Default to 1 footer column (copyright/powered_by/payment_types) | |
{% endcomment %} | |
{% assign num_footer_columns = 1 %} | |
{% comment %} | |
Create an extra menu column if link list has more than 5 links | |
{% endcomment %} | |
{% if linklists.footer.links.size > 0 %} | |
{% comment %} | |
We have a Footer menu that isn't empty, we will need another column | |
{% endcomment %} | |
{% assign num_footer_columns = num_footer_columns | plus: 1 %} | |
{% assign extra_footer_linklist_column = false %} | |
{% assign footer_linklist_count = linklists.footer.links.size %} | |
{% if footer_linklist_count > 5 %} | |
{% assign extra_footer_linklist_column = true %} | |
{% comment %} | |
We split the links so we'll need another column | |
{% endcomment %} | |
{% assign num_footer_columns = num_footer_columns | plus: 1 %} | |
{% endif %} | |
{% comment %} | |
If we have an odd amount of links, we need to show 1 more link in 1st column | |
{% endcomment %} | |
{% assign extra_link = footer_linklist_count | modulo: 2 %} | |
{% comment %} | |
We start with a 2nd column after first column is filled up. | |
{% endcomment %} | |
{% assign footer_linklist_split = footer_linklist_count | divided_by: 2 | plus: extra_link | plus: 1 %} | |
{% endif %} | |
{% comment %} | |
Determine whether there are social links | |
{% endcomment %} | |
{% assign footer_social_enable = false %} | |
{% if | |
settings.social_twitter_link != blank | |
or settings.social_facebook_link != blank | |
or settings.social_pinterest_link != blank | |
or settings.social_google_plus_link != blank | |
or settings.social_instagram_link != blank | |
or settings.social_tumblr_link != blank | |
or settings.social_youtube_link != blank | |
or settings.social_vimeo_link != blank | |
or settings.social_fancy_link != blank | |
%} | |
{% assign footer_social_enable = true %} | |
{% endif %} | |
{% comment %} | |
Calculate the number of footer columns shown. Default to 1. | |
{% endcomment %} | |
{% if footer_social_enable %} | |
{% assign num_footer_columns = num_footer_columns | plus: 1 %} | |
{% endif %} | |
{% case num_footer_columns %} | |
{% when 0 %} | |
{% when 1 %} | |
{% assign footer_column_width = '' %} | |
{% when 2 %} | |
{% assign footer_column_width = 'one-half small--one-whole' %} | |
{% when 3 %} | |
{% assign footer_column_width = 'one-third small--one-whole' %} | |
{% when 4 %} | |
{% assign footer_column_width = 'large--one-quarter medium--one-half' %} | |
{% endcase %} | |
{% if linklists.footer.links.size > 0 %} | |
<div class="grid__item {{ footer_column_width }}"> | |
<ul class="no-bullets site-footer__linklist"> | |
{% for link in linklists.footer.links %} | |
{% comment %} | |
Create a second column | |
{% endcomment %} | |
{% if extra_footer_linklist_column and forloop.index == footer_linklist_split %} | |
</ul> | |
</div> | |
<div class="grid__item {{ footer_column_width }}"> | |
<ul class="no-bullets site-footer__linklist"> | |
{% endif %} | |
<li><a href="{{ link.url }}">{{ link.title }}</a></li> | |
{% endfor %} | |
</ul> | |
</div> | |
{% endif %} | |
<div class="grid__item {{ footer_column_width }}"> | |
<h3>About Us</h3> | |
<p>The Shopify Web Design and Development Blog provides design inspiration, development tips, and business insights for anyone working as a freelancer or agency in the web design space. Our blog gives you the resources and tools you need to push creative boundaries and challenge the status quo when approaching each and every web design project.</p> | |
<p>Subscribe to our email newsletter for regular updates featuring new articles, free resources, and innovative examples of websites that are doing something right.</p> | |
</div> | |
{% if footer_social_enable %} | |
<div class="grid__item {{ footer_column_width }}"> | |
<ul class="no-bullets social-icons"> | |
{% if settings.social_facebook_link != blank %} | |
<li> | |
<a href="{{ settings.social_facebook_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Facebook' }}"> | |
<span class="icon icon-facebook" aria-hidden="true"></span> | |
</a> | |
</li> | |
{% endif %} | |
{% if settings.social_twitter_link != blank %} | |
<li> | |
<a href="{{ settings.social_twitter_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Twitter' }}"> | |
<span class="icon icon-twitter" aria-hidden="true"></span> | |
</a> | |
</li> | |
{% endif %} | |
{% if settings.social_pinterest_link != blank %} | |
<li> | |
<a href="{{ settings.social_pinterest_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Pinterest' }}"> | |
<span class="icon icon-pinterest" aria-hidden="true"></span> | |
</a> | |
</li> | |
{% endif %} | |
{% if settings.social_instagram_link != blank %} | |
<li> | |
<a href="{{ settings.social_instagram_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Instagram' }}"> | |
<span class="icon icon-instagram" aria-hidden="true"></span> | |
</a> | |
</li> | |
{% endif %} | |
{% if settings.social_google_plus_link != blank %} | |
<li> | |
<a href="{{ settings.social_google_plus_link }}" rel="publisher" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Google Plus' }}"> | |
<span class="icon icon-google_plus" aria-hidden="true"></span> | |
Google Plus | |
</a> | |
</li> | |
{% endif %} | |
{% if settings.social_tumblr_link != blank %} | |
<li> | |
<a href="{{ settings.social_tumblr_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Tumblr' }}"> | |
<span class="icon icon-tumblr" aria-hidden="true"></span> | |
Tumblr | |
</a> | |
</li> | |
{% endif %} | |
{% if settings.social_youtube_link != blank %} | |
<li> | |
<a href="{{ settings.social_youtube_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'YouTube' }}"> | |
<span class="icon icon-youtube" aria-hidden="true"></span> | |
YouTube | |
</a> | |
</li> | |
{% endif %} | |
{% if settings.social_vimeo_link != blank %} | |
<li> | |
<a href="{{ settings.social_vimeo_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Vimeo' }}"> | |
<span class="icon icon-vimeo" aria-hidden="true"></span> | |
Vimeo | |
</a> | |
</li> | |
{% endif %} | |
{% if settings.social_fancy_link != blank %} | |
<li> | |
<a href="{{ settings.social_fancy_link }}" title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'Fancy' }}"> | |
<span class="icon icon-fancy" aria-hidden="true"></span> | |
Fancy | |
</a> | |
</li> | |
{% endif %} | |
</ul> | |
</div> | |
{% endif %} | |
</div> | |
<div class="grid__item {{ footer_column_width }}"> | |
<p>© {{ 'now' | date: '%Y' }}, {{ shop.name | link_to: '/' }}<br>{{ powered_by_link }}</p> | |
{% unless shop.enabled_payment_types == empty %} | |
<ul class="inline-list payment-icons"> | |
{% for type in shop.enabled_payment_types %} | |
<li> | |
<span class="icon-fallback-text"> | |
<span class="icon icon-{{ type }}" aria-hidden="true"></span> | |
<span class="fallback-text">{{ type | replace: '_',' ' }}</span> | |
</span> | |
</li> | |
{% endfor %} | |
</ul> | |
{% endunless %} | |
</div> | |
</div> | |
</footer> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment