← back to Dw Theme Frontpage Cta
sections/footer.liquid
497 lines
<script
type="application/json"
data-section-type="static-footer"
data-section-id="{{ section.id }}"
>
</script>
{% liquid
assign hasNewsletter = false
assign blockCount = 0
for block in section.blocks
assign blockCount = blockCount | plus: 1
case block.type
when 'newsletter'
assign hasNewsletter = true
endcase
endfor
assign show_follow_on_shop = false
assign country_selector = section.settings.show_currency_selector
assign locale_selector = section.settings.show_locale_selector
assign show_payment_types = false
assign right_column_item_count = 0
assign total_item_count = 0
assign additional_sub_footer_right_class = ''
if shop.features.follow_on_shop? and section.settings.show_follow_on_shop
assign show_follow_on_shop = true
assign total_item_count = total_item_count | plus: 1
endif
if shop.enabled_payment_types.size > 0 and section.settings.footer-payment-options
assign show_payment_types = true
assign right_column_item_count = right_column_item_count | plus: 1
assign total_item_count = total_item_count | plus: 1
endif
if country_selector or locale_selector
assign right_column_item_count = right_column_item_count | plus: 1
assign total_item_count = total_item_count | plus: 1
endif
if right_column_item_count == 1
if country_selector or locale_selector
assign additional_sub_footer_right_class = 'sub-footer-right--selectors-only'
else
assign additional_sub_footer_right_class = 'sub-footer-right--payments-only'
endif
endif
%}
{% capture footer_right_column %}
{%- if right_column_item_count > 0 -%}
<div class="sub-footer-right {{ additional_sub_footer_right_class }}">
{%- if country_selector or locale_selector -%}
{% comment %}Inject @pixelunion/shopify-cross-border/cross-border begin{% endcomment %}
<div class="shopify-cross-border">
{% if locale_selector and localization.available_languages.size > 1 %}
{% comment %}Inject @pixelunion/shopify-cross-border/multi-language begin{% endcomment %}
{% comment %} Generate a "random" number so ids are unique {% endcomment %}
{% assign unique_id = "now" | date: "%N" | modulo: 1000 %}
<noscript>
{%- form 'localization' -%}
<details class="disclosure">
<summary>
<span class="disclosure__toggle">
{{ form.current_locale.endonym_name | capitalize }}
</span>
</summary>
<div class="disclosure-list disclosure-list--visible">
{% for locale in form.available_locales %}
<div class="disclosure-list__item-wrapper disclosure-list__item">
<input
type="radio"
id="{{ locale.iso_code }}"
name="locale_code"
value="{{ locale.iso_code }}"
{% if locale.iso_code == form.current_locale.iso_code %}checked{% endif %}
>
<label class="disclosure-list__item--label" for="{{ locale.iso_code }}">{{ locale.endonym_name | capitalize }}</label>
</div>
{% endfor %}
<button class="disclosure__submit" type="submit">{{ 'general.language.submit_button_label' | t }}</button>
</div>
</details>
{%- endform -%}
</noscript>
{%- form 'localization' -%}
<div class="selectors-form__item selectors-form--no-js-hidden">
<div class="disclosure" data-disclosure-locale>
<h2 class="visually-hidden" id="lang-heading-{{ unique_id }}">
{{ 'general.language.dropdown_label' | t }}
</h2>
<button
type="button"
class="disclosure__toggle"
aria-expanded="false"
aria-controls="lang-list-{{ unique_id }}"
aria-describedby="lang-heading-{{ unique_id }}"
data-disclosure-toggle
>
{{ form.current_locale.endonym_name | capitalize }}
</button>
<ul id="lang-list-{{ unique_id }}" class="disclosure-list" data-disclosure-list>
{% for locale in form.available_locales %}
<li>
<a class="disclosure-list__item {% if locale.iso_code == form.current_locale.iso_code %}disclosure-list__item--current{% endif %}" href="#" lang="{{ locale.iso_code }}" {% if locale.iso_code == form.current_locale.iso_code %}aria-current="true"{% endif %} data-value="{{ locale.iso_code }}" data-disclosure-option>
<span class="disclosure-list__option">{{ locale.endonym_name | capitalize }}</span>
</a>
</li>
{%- endfor -%}
</ul>
<input type="hidden" name="locale_code" id="LocaleSelector-{{ unique_id }}" value="{{ form.current_locale.iso_code }}" data-disclosure-input/>
</div>
</div>
{%- endform -%}
{% comment %}Inject @pixelunion/shopify-cross-border/multi-language end{% endcomment %}
{% endif %}
{% if country_selector and localization.available_countries.size > 1 %}
{% comment %}Inject @pixelunion/shopify-cross-border/multi-country begin{% endcomment %}
{% comment %} Generate a "random" number so ids are unique {% endcomment %}
{% assign unique_id = "now" | date: "%N" | modulo: 1000 %}
<noscript>
{%- form 'localization' -%}
<details class="disclosure">
<summary>
<span class="disclosure__toggle">
{{ localization.country.name }} ({{ localization.country.currency.iso_code }}{% if localization.country.currency.symbol %}{{ localization.country.currency.symbol }}{% endif %})
</span>
</summary>
<div class="disclosure-list disclosure-list--visible">
{% for country in localization.available_countries %}
<div class="disclosure-list__item-wrapper disclosure-list__item">
<input
type="radio"
id="{{ country.iso_code }}"
name="country_code"
value="{{ country.iso_code }}"
{% if country.iso_code == localization.country.iso_code %}checked{% endif %}
>
<label class="disclosure-list__item--label" for="{{ country.iso_code }}">{{ country.name }} ({{ country.currency.iso_code }}{%- if country.currency.symbol -%} {{ country.currency.symbol }}{%- endif -%})</label>
</div>
{% endfor %}
<button class="disclosure__submit" type="submit">{{ 'general.country.submit_button_label' | t }}</button>
</div>
</details>
{%- endform -%}
</noscript>
{%- form 'localization' -%}
<div class="selectors-form__item selectors-form--no-js-hidden">
<div class="disclosure" data-disclosure-country>
<h2 class="visually-hidden" id="country-heading-{{ unique_id }}">
{{ 'general.country.dropdown_label' | t }}
</h2>
<button
type="button"
class="disclosure__toggle"
aria-expanded="false"
aria-controls="country-list-{{ unique_id }}"
aria-describedby="country-heading-{{ unique_id }}"
data-disclosure-toggle
>
{{ localization.country.name }}
<span class="disclosure-list__option-code">
({{ localization.country.currency.iso_code }}
{% if localization.country.currency.symbol %} {{ localization.country.currency.symbol }}{% endif %})
</span>
</button>
<ul id="country-list-{{ unique_id }}" class="disclosure-list" data-disclosure-list>
{% for country in localization.available_countries %}
<li>
<a class="disclosure-list__item {% if country.iso_code == localization.country.iso_code %}disclosure-list__item--current{% endif %}" href="#" {% if country.iso_code == localization.country.iso_code %}aria-current="true"{% endif %} data-value="{{ country.iso_code }}" data-disclosure-option>
<span class="disclosure-list__option">{{ country.name }}</span>
<span class="disclosure-list__option-code">
({{ country.currency.iso_code }}
{% if country.currency.symbol %} {{ country.currency.symbol }}{%- endif -%})
</span>
</a>
</li>
{%- endfor -%}
</ul>
<input type="hidden" name="country_code" id="CountrySelector-{{ unique_id }}" value="{{ localization.country.iso_code }}" data-disclosure-input/>
</div>
</div>
{%- endform -%}
{% comment %}Inject @pixelunion/shopify-cross-border/multi-country end{% endcomment %}
{% endif %}
</div>
{% comment %}Inject @pixelunion/shopify-cross-border/cross-border end{% endcomment %}
{%- endif -%}
{%- if show_payment_types -%}
<div class="subfooter__payment-types">
{%- for type in shop.enabled_payment_types -%}
{{ type | payment_type_svg_tag }}
{%- endfor -%}
</div>
{%- endif -%}
</div>
{%- endif -%}
{% endcapture %}
<footer
class="
main-footer
{% if hasNewsletter %}upper-footer-has-newsletter{% endif %}
"
>
{% assign linklistCount = 0 %}
{% for i in (1..3) %}
{% capture linklistOption %}footer-linklist-{{ i }}{% endcapture %}
{% capture linklist %}{{ section.settings[linklistOption] }}{% endcapture %}
{% if linklist.size > 0 %}
{% assign linklistCount = linklistCount | plus: 1 %}
{% endif %}
{% endfor %}
{% if section.blocks.size > 0 %}
<div class="upper-footer upper-footer-item-count-{{ blockCount }}">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'rich-text' -%}
<div class="upper-footer-item footer-blurb">
{% if section.settings.headings %}
<h3 class="section-title">
{{- block.settings.heading | escape -}}
</h3>
{% endif %}
<div class="rte">{{ block.settings.rich_text }}</div>
</div>
{%- when 'social-links' -%}
<div class="upper-footer-item footer-linklist">
{% if section.settings.headings %}
<h3 class="section-title">
{{- 'layout.footer.social_heading'| t -}}
</h3>
{% endif %}
{% render 'social' %}
</div>
{%- when 'menu' -%}
{% assign linklist = linklists[block.settings.menu] %}
{% if linklist.links.size > 0 %}
<div class="upper-footer-item footer-linklist">
{% if section.settings.headings %}
<h3 class="section-title">
{{- linklist.title -}}
</h3>
{% endif %}
<ul>
{% for link in linklist.links %}
<li><a href="{{ link.url }}" {% if link.url contains 'http://' or link.url contains 'https://' %}target="_blank"{% endif %}>{{ link.title }}</a></li>
{% endfor %}
</ul>
</div>
{% endif %}
{%- when 'newsletter' -%}
<div class="mailing-list">
{% if section.settings.headings %}
<h3 class="section-title">
{{- 'general.newsletter.title' | t -}}
</h3>
{% endif %}
{% form 'customer' %}
{% if form.posted_successfully? %}
<p class="mailing-list-success">
{{ 'general.newsletter.success' | t }}
</p>
{% else %}
<p class="mailing-list-error">
{{ form.errors | default_errors }}
</p>
{% endif %}
<div class="mailing-list-input">
<input class="mailing-list-email input" name="contact[email]" type="email" placeholder="your@email.com" value="">
<input type="hidden" class="input" id="contact_tags" name="contact[tags]" value="prospect,newsletter"/>
<div class="mailing-list-submit">
<input class="submit input" name="subscribe" type="submit" value="{{ 'general.newsletter.subscribe' | t }}">
</div>
</div>
{% endform %}
</div>
{%- endcase -%}
{%- endfor -%}
</div>
{% endif %}
<div>
<img src="{{ 'Screen_Shot_2019-01-13_at_11.18.49_AM.png' | file_img_url: '125x' }}" width="125px" height="62"/>
<img src="{{ 'architecture_digest.png' | file_img_url: '125x' }}" width="125px" height="75"/>
<img src="{{ 'Screen_Shot_2019-01-13_at_4.19.27_PM.png' | file_img_url: '125x' }}" width="125px" height="46"/>
</div>
<div
class="
subfooter
{% if total_item_count == 0 %}subfooter--layout-copyright-only{% endif %}
{% if total_item_count == 1 %}subfooter--layout-column{% endif %}
"
>
{%- if right_column_item_count > 0 -%}
<div class="sub-footer__row sub-footer__row--first">
{%- if show_follow_on_shop -%}
{{ shop | login_button: action: 'follow' }}
{%- endif -%}
{{ footer_right_column }}
</div>
{%- endif -%}
<div
class="
sub-footer__row
{% if right_column_item_count > 0 %}
sub-footer__row--second
{% else %}
sub-footer__row--first
{% endif %}
"
>
{% capture year %}{{ "now" | date: "%Y" }}{% endcapture %}
{% capture shopName %}{{ shop.name | link_to: routes.root_url -}}{% endcapture %}
<p class="copyright-wrapper" role="contentinfo">
{{ 'general.general.copyright_html' | t: year: year, shop_name: shopName }}
{{ powered_by_link }}
</p>
{{ footer_right_column }}
{%- if show_follow_on_shop and right_column_item_count == 0 -%}
{{ shop | login_button: action: 'follow' }}
{%- endif -%}
</div>
</div>
</footer>
{%- comment -%}
Shop-by-Color tab handle fix (Steve 2026-07-09). The /pages/shop-by-color page
body links 6 color tiles to collection handles that 404 (a -wallcovering- vs
-wallpaper- naming mismatch). The page body needs write_content scope to edit
directly; until that lands, correct the 6 dead hrefs client-side on that page
ONLY. Inert on every other page. Remove once the page body is fixed.
{%- endcomment -%}
{%- if request.path contains '/pages/shop-by-color' -%}
<script>
(function(){
var FIX={
'blue-wallpaper-collection':'blue-wallpaper',
'yellow-wallcovering-collection':'yellow-wallpaper-collection',
'orange-wallcovering-collection':'orange',
'red-wallcovering-collection':'red-wallpaper-collection',
'grey-wallcovering':'grey-silver',
'white-wallcovering-collection':'white-wallpaper-collection'
};
function fixOne(a){
var h=a.getAttribute('href')||'';
for(var bad in FIX){
if(h.indexOf('/collections/'+bad)===0 || h==='/collections/'+bad){
a.setAttribute('href', h.replace('/collections/'+bad, '/collections/'+FIX[bad]));
if(a.dataset && a.dataset.handle===bad) a.dataset.handle=FIX[bad];
break;
}
}
}
function run(){ document.querySelectorAll('a[href*="/collections/"]').forEach(fixOne); }
if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',run);}else{run();}
})();
</script>
{%- endif -%}
{% schema %}
{
"name": "Footer",
"max_blocks": 5,
"settings": [
{
"type": "checkbox",
"id": "headings",
"label": "Show footer headings",
"default": true
},
{
"type": "header",
"content": "Follow on Shop",
"info": "Display follow button for your storefront on the Shop app. [Learn more](https:\/\/help.shopify.com\/manual\/online-store\/themes\/customizing-themes\/follow-on-shop)"
},
{
"type": "checkbox",
"id": "show_follow_on_shop",
"label": "Enable Follow on Shop",
"default": true
},
{
"type": "header",
"content": "Language Selector",
"info": "To add a language, go to your [language settings.](/admin/settings/languages)"
},
{
"type": "checkbox",
"id": "show_locale_selector",
"label": "Show language selector",
"default": true
},
{
"type": "header",
"content": "Country Selector",
"info": "To add a country, go to your [payment settings.](/admin/settings/payments)"
},
{
"type": "checkbox",
"id": "show_currency_selector",
"label": "Show country selector",
"default": true
},
{
"type": "header",
"content": "Payment icons"
},
{
"type": "checkbox",
"id": "footer-payment-options",
"label": "Show payment icons"
}
],
"blocks": [
{
"type": "rich-text",
"name": "Rich text",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Rich text"
},
{
"type": "richtext",
"id": "rich_text",
"label": "Text",
"default": "<p>Use this section to welcome customers to your store, say a bit about your brand, or share news and seasonal promotions.</p>"
}
]
},
{
"type": "social-links",
"name": "Social links",
"settings": [
{
"type": "paragraph",
"content": "Social media account settings can be found in the \"social media\" section of \"theme settings\"."
}
],
"limit": 1
},
{
"type": "menu",
"name": "Menu",
"settings": [
{
"type": "link_list",
"id": "menu",
"label": "Menu",
"info": "This menu won't show dropdown items.",
"default": "main-menu"
}
]
},
{
"type": "newsletter",
"name": "Newsletter",
"settings": [
],
"limit": 1
}
]
}
{% endschema %}