{%- comment -%}

Determine number of columns

{%- endcomment -%}

{%- assign column_number = section.blocks.size | plus: 0 -%}

<!-- site footer -->

<footer id="section-footer" class="site-footer" role="contentinfo" data-section-
id="{{ section.id }}" data-section-type="footer-section">

{%- if section.blocks.size > 0 -%}

<div class="box">
<div class="wrapper">
<div class="grid grid-spacer main-footer">
<!-- Blocks -->
{%- for block in section.blocks -%}
{%- assign footer_column_class = 'full' -%}

{%- case block.settings.column_width -%}

{%- when 1 -%}
{%- assign footer_column_class = 'large--one-fifth medium--one-fifth'
-%}
{%- when 2 -%}
{%- assign footer_column_class = 'large--two-fifths medium--two-
fifths' -%}
{%- when 3 -%}
{%- assign footer_column_class = 'large--three-fifths medium--three-
fifths' -%}
{%- when 4 -%}
{%- assign footer_column_class = 'large--four-fifths medium--four-
fifths' -%}
{%- endcase -%}

<div class="grid__item {{ footer_column_class }} footer-item footer-

{{ block.type }}" {{ block.shopify_attributes }}>
{%- unless block.settings.title == blank -%}
<h6 class="site-footer__linktitle h4">{{ block.settings.title |
escape }}</h6>
{%- endunless -%}

{%- unless block.settings.subtitle == blank -%}

<p>{{ block.settings.subtitle | escape }}</p>
{%- endunless -%}

{%- case block.type -%}

{%- when "html" -%}
{%- if block.settings.html_area != blank -%}
<div class="site-footer__custom_html">
{{ block.settings.html_area }}
</div>
{%- endif -%}
{%- when 'newsletter' -%}
{%- render 'newsletter-form' -%}
{%- when 'text' -%}
{%- if block.settings.image != blank or block.settings.svg != blank -%}
{%- if block.settings.img_url != blank -%}
<a href="{{ block.settings.img_url }}" class="image-link">
 {%- endif -%}

{%- if block.settings.svg != blank -%}

{%- assign footer_logo = block.settings.svg -%}
{%- assign footer_logo_type = 'svg' -%}
{%- elsif block.settings.image != blank -%}
{%- assign footer_logo = block.settings.image -%}
{%- assign footer_logo_type = 'retina' -%}
{%- endif -%}

{%- if footer_logo != blank -%}

<img class="footer-logo imgset spacer-bottom lazyload radius-none"
{% render 'lazysizes', img: footer_logo, img_type: footer_logo_type,
img_width: block.settings.logo_width %}
alt="{{ shop.name }}">
{%- endif -%}

{%- if block.settings.img_url != blank -%}

</a>
{%- endif -%}
{%- endif -%}
{%- if block.settings.text != blank -%}
<div class="site-footer__rte rte">
{{ block.settings.text }}
</div>
{%- endif -%}

{%- if section.settings.show_social_media -%}

<div class="wrapper" style="margin-top: 24px;">
<div class="grid align-center small--text-center">
{%- if section.settings.social_title != blank -%}
<h6 class="h4 footer-social-
title">{{ section.settings.social_title }}</h6>
{%- endif -%}
<div class="grid__item {% if section.settings.social_title !=
blank %}medium--six-twelfths large--six-twelfths medium--text-right large--text-
right{% else %}text-center{% endif %}">
{%- render 'social-medias' -%}
</div>
</div>
</div>
{%- endif -%}

{%- if block.settings.email or block.settings.phone -%}

<ul class="no-bullets site-footer__linklist ">
{%- if block.settings.email -%}
<li>
<a href="mailto:{{ shop.email | escape }}">
<span class="{{settings.icon}} icon-width" aria-
hidden="true">email</span>
{{ shop.email }}
</a>
</li>
{%- endif -%}
{%- if block.settings.phone -%}
 <li>
<a href="tel:{{ shop.phone | remove: '-' | replace: ' ', '' }}">
<span class="{{settings.icon}} icon-width" aria-
hidden="true">phone</span>
{{ shop.phone }}
</a>
</li>
{%- endif -%}
</ul>
{%- endif -%}
{%- when 'link_list' -%}
<ul class="no-bullets site-footer__linklist ">
{%- for link in linklists[block.settings.footer_link_list].links -%}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{%- endfor -%}
</ul>
{%- when 'product' -%}
{%- assign feature_product = all_products[block.settings.product] -%}

{%- if block.settings.product != blank -%}

{%- assign emptyState = false -%}
{%- else -%}
{%- assign emptyState = true -%}
{%- endif -%}

<div class="grid">
{%- render 'product-grid-item' with feature_product as product,
emptyState: emptyState, current: 1 -%}
</div>
{%- when 'featured_collection' -%}
{%- assign limit = block.settings.collection_limit -%}

{%- if block.settings.collection == blank or

collections[block.settings.collection].products_count == 0 -%}
{%- assign emptyState = true -%}
{%- else -%}
{%- assign emptyState = false -%}
{%- endif -%}

<div class="dbtfy-footer_feature-collection">
<div id="ProductGrid-{{ section.id }}"
class="grid grid-small slick slick-product-grid"
data-arrows="{{ block.settings.arrows }}"
data-dots="{{ block.settings.dots }}"
data-autoplay="{{ block.settings.autoplay }}"
data-autoplayspeed="{{ block.settings.autoplayspeed | times:
1000 }}"
data-slidetoshow="1" >

{%- if emptyState -%}

{%- for i in (1..limit) -%}
{%- capture current -%}{% cycle 1, 2, 3, 4, 5, 6 %}{%-
endcapture -%}
{%- render 'product-grid-item', emptyState: emptyState,
current: current -%}
{%- endfor -%}
{%- else -%}
{%- for product in
collections[block.settings.collection].products limit: limit -%}
 {%- capture current -%}{% cycle 1, 2, 3, 4, 5, 6 %}{%-
endcapture -%}
{%- render 'product-grid-item' with product as product,
current: current -%}
{%- endfor -%}
{%- endif -%}
</div>
</div>
{%- when 'collection_list' -%}
{% assign collection_1 = collections[block.settings.collection_1] %}
{% assign collection_2 = collections[block.settings.collection_2] %}
{% assign collection_3 = collections[block.settings.collection_3] %}
{% assign collection_4 = collections[block.settings.collection_4] %}

{%- if collection_1 != blank or collection_2 != blank or collection_3 !

= blank or collection_4 != blank -%}
<div class="grid grid-spacer grid-small">
{%- if collection_1 != blank -%}
{% render 'collection-grid-item' with collection_1 as collection,
grid_item_width: 'full', class: 'box-small', no_heading_tag: true %}
{%- endif -%}

{%- if collection_2 != blank -%}

{% render 'collection-grid-item' with collection_2 as collection,
grid_item_width: 'full', class: 'box-small', no_heading_tag: true %}
{%- endif -%}

{%- if collection_3 != blank -%}

{% render 'collection-grid-item' with collection_3 as collection,
grid_item_width: 'full', class: 'box-small', no_heading_tag: true %}
{%- endif -%}

{%- if collection_4 != blank -%}

{% render 'collection-grid-item' with collection_4 as collection,
grid_item_width: 'full', class: 'box-small', no_heading_tag: true %}
{%- endif -%}
</div>
{%- endif -%}
{%- when 'featured_blog' -%}
{%- assign blog = blogs[block.settings.blog] -%}
{%- assign limit = 1 -%}

{%- if blog.articles_count == 0 or blog == blank -%}

{%- assign emptyState = true -%}
{%- else -%}
{%- assign emptyState = false -%}
{%- endif -%}
<div class="grid">
{%- if emptyState -%}
{%- for i in (1..limit) -%}
{%- capture current -%}{% cycle 1, 2 %}{%- endcapture -%}
{%- render 'article-grid-item', emptyState: emptyState, current:
current -%}
{%- endfor -%}
{%- else -%}
{%- for article in blog.articles limit: limit -%}
{%- render "article-grid-item" with article as article, blog:
blog, no_heading_tag: true, emptyState: emptyState -%}
{%- endfor -%}
 {%- endif -%}
</div>
{%- when 'featured_article' -%}
{%- assign article = articles[block.settings.article] -%}
{%- assign articleUrl = article.url | split: '/' -%}
{%- assign blogHandle = articleUrl[2] -%}
{%- assign blog = blogs[blogHandle] -%}
{%- assign limit = 1 -%}

{%- if article == blank -%}

{%- assign emptyState = true -%}
{%- else -%}
{%- assign emptyState = false -%}
{%- endif -%}
<div class="grid">
{%- if emptyState -%}
{%- render 'article-grid-item', emptyState: emptyState, current: 1
-%}
{%- else -%}
{%- render "article-grid-item" with article as article, blog: blog,
no_heading_tag: true, emptyState: emptyState -%}
{%- endif -%}
</div>
{%- endcase -%}
</div>
{%- endfor -%}
</div>
</div>
</div>
{%- endif -%}

<div class="bottom-footer">
<div class="wrapper">
<div class="grid align-center small--text-center">
<div class="grid__item {% if section.settings.show_payment_icons %}large--
six-twelfths medium--six-twelfths{% else %}text-center{% endif %}">
<p class="credentials text-small">
<span>Copyright &copy; {{ 'now' | date: '%Y' }} {{ shop.name | link_to:
routes.root_url }}</span>

{%- if section.settings.custom_credential != blank -%}

<span class="rte"> | {{ section.settings.custom_credential |remove:
'<p>' | remove: '</p>' }}</span>
{%- endif -%}

{%- if section.settings.show_shopify_footer -%}

<span> | Powered by <a href="https://www.shopify.com/?
ref=debutify&utm_campaign=theme-footer" target="_blank" rel="nofollow"
title="Create your own online store with Shopify">Shopify</a></span>
{%- endif -%}

{%- if section.settings.show_debutify_footer -%}

<span> | Theme by <a href="https://debutify.com?
utm_source={{ shop.domain }}&utm_medium=referral&utm_campaign=product-theme-footer-
link" target="_blank" rel="nofollow" title="The World's #1 Free Shopify
Theme">Debutify</a></span>
{%- endif -%}
</p>
</div>
 {%- if section.settings.show_payment_icons -%}
<div class="grid__item large--six-twelfths medium--six-twelfths large--
text-right medium--text-right">
{%- render 'payment-icons' -%}
</div>
{%- endif -%}
</div>
</div>
</div>

</footer>

{% schema %}
{
"name": "Footer",
"class": "footer-section",
"settings": [
{
"type": "header",
"content": "Social media"
},
{
"type": "checkbox",
"id": "show_social_media",
"label": "Show social media icons",
"default": true
},
{
"type": "text",
"id": "social_title",
"label": "Heading",
"default": "Follow-us on social media!"
},
{
"type": "header",
"content": "Payment methods"
},
{
"type": "checkbox",
"id": "show_payment_icons",
"label": "Show payment icons",
"default": true,
"info": "Add custom icons in Theme settings > Advanced settings"
},
{
"type": "header",
"content": "Credentials"
},
{
"type": "checkbox",
"id": "show_shopify_footer",
"label": "Show powered by Shopify",
"default": true
},
{
"type": "checkbox",
"id": "show_debutify_footer",
"label": "Show theme by Debutify",
 "default": true
},
{
"type": "richtext",
"id": "custom_credential",
"label": "Custom credential"
}
],
"blocks" : [
{
"type": "html",
"name": "HTML",
"settings": [
{
"type": "range",
"id": "column_width",
"min": 1,
"max": 5,
"step": 1,
"label": "Column width",
"default": 1
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Heading"
},
{
"type": "text",
"id": "subtitle",
"label": "Subheading"
},
{
"type": "html",
"id": "html_area",
"label": "Custom HTML"
}
]
},
{
"type": "link_list",
"name": "Menu",
"settings": [
{
"type": "range",
"id": "column_width",
"min": 1,
"max": 5,
"step": 1,
"label": "Column width",
"default": 1
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Quick Links"
},
 {
"type": "text",
"id": "subtitle",
"label": "Subheading"
},
{
"type": "link_list",
"id": "footer_link_list",
"label": "Menu",
"default": "footer"
}
]
},
{
"type": "text",
"name": "Store details",
"settings": [
{
"type": "range",
"id": "column_width",
"min": 1,
"max": 5,
"step": 1,
"label": "Column width",
"default": 2
},
{
"type": "image_picker",
"id": "image",
"label": "Logo"
},
{
"type": "text",
"id": "svg",
"label": "SVG Logo",
"placeholder": "logo.svg",
"info": "[How to upload an SVG file?]
(https:\/\/help.debutify.com\/en\/articles\/5056796-how-to-upload-a-svg-file-in-
debutify-theme)"
},
{
"type":"url",
"id":"img_url",
"label":"Logo link"
},
{
"type": "range",
"id": "logo_width",
"label": "Logo width",
"min": 100,
"max": 300,
"step": 2,
"unit": "px",
"default": 150
},
{
"type": "text",
"id": "title",
"label":"Heading",
 "default": "About Us"
},
{
"type": "text",
"id": "subtitle",
"label": "Subheading"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default":"<p>Share store details, promotions, or brand content with
your customers.</p>"
},
{
"type": "checkbox",
"id": "email",
"label":"Show email address",
"default": true
},
{
"type": "checkbox",
"id": "phone",
"label":"Show phone number",
"default": true
}
]
},
{
"type": "newsletter",
"name": "Newsletter",
"limit": 1,
"settings": [
{
"type": "range",
"id": "column_width",
"min": 1,
"max": 5,
"step": 1,
"label": "Column width",
"default": 2
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Subscribe to our newsletter"
},
{
"type": "text",
"id": "subtitle",
"label": "Subheading",
"default": "A short sentence describing what someone will receive by
subscribing"
},
{
"type": "paragraph",
"content": "Any customers who sign up will have an account created for
them in Shopify. [View customers](/admin/customers?query=&accepts_marketing=1)"
 }
]
},
{
"type": "product",
"name": "Featured product",
"settings": [
{
"type": "range",
"id": "column_width",
"min": 1,
"max": 5,
"step": 1,
"label": "Column width",
"default": 1
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Featured product"
},
{
"type": "text",
"id": "subtitle",
"label": "Subheading"
},
{
"type": "product",
"id": "product",
"label": "Product"
}
]
},
{
"type": "featured_collection",
"name": "Featured collection",
"settings": [
{
"type": "range",
"id": "column_width",
"min": 1,
"max": 5,
"step": 1,
"label": "Column width",
"default": 1
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Featured collection"
},
{
"type": "text",
"id": "subtitle",
"label": "Subheading"
},
{
 "type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "range",
"id": "collection_limit",
"min": 1,
"max": 10,
"step": 1,
"label": "Number of products to show",
"default": 3
},
{
"type": "header",
"content": "Carousel options"
},
{
"type": "checkbox",
"id": "arrows",
"label": "Show arrows",
"default": false
},
{
"type": "checkbox",
"id": "dots",
"label": "Show dots",
"default": false
},
{
"type": "checkbox",
"id": "autoplay",
"label": "Auto rotate",
"default": false
},
{
"type": "range",
"id": "autoplayspeed",
"label": "Rotation speed",
"min": 3,
"max": 10,
"step": 1,
"unit": "s",
"default": 5
}
]
},
{
"type": "collection_list",
"name": "Collection list",
"settings": [
{
"type": "range",
"id": "column_width",
"min": 1,
"max": 5,
"step": 1,
"label": "Column width",
"default": 2
 },
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Featured collections"
},
{
"type": "text",
"id": "subtitle",
"label": "Subheading"
},
{
"type": "collection",
"id": "collection_1",
"label": "Collection"
},
{
"type": "collection",
"id": "collection_2",
"label": "Collection"
},
{
"type": "collection",
"id": "collection_3",
"label": "Collection"
},
{
"type": "collection",
"id": "collection_4",
"label": "Collection"
}
]
},
{
"type": "featured_blog",
"name": "Featured blog",
"settings": [
{
"type": "range",
"id": "column_width",
"min": 1,
"max": 5,
"step": 1,
"label": "Column width",
"default": 2
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Featured blog"
},
{
"type": "text",
"id": "subtitle",
"label": "Subheading"
},
{
 "type": "blog",
"id": "blog",
"label": "Blog"
}
]
},
{
"type": "featured_article",
"name": "Featured article",
"settings": [
{
"type": "range",
"id": "column_width",
"min": 1,
"max": 5,
"step": 1,
"label": "Column width",
"default": 2
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Featured article"
},
{
"type": "text",
"id": "subtitle",
"label": "Subheading"
},
{
"type": "article",
"id": "article",
"label": "Article"
}
]
}
],
"default": {
"blocks": [
{
"type": "text"
},
{
"type": "link_list"
},
{
"type": "newsletter"
}
]
}
}
{% endschema %}