Facebook
From Chartreuse Meerkat, 3 Years ago, written in Plain Text.
Embed
Download Paste or View Raw
Hits: 150
  1. {% assign design_link = 'http://boostertheme.com/' %}
  2. <footer class="site-footer" role="contentinfo">
  3.   <div class="page-width">
  4.     <div class="grid grid--no-gutters">
  5.       {% for block in section.blocks %}
  6.         <div class="grid__item seaction_gape {% if forloop.length >= 4 %}large-up--one-quarter medium--one-third{% elsif forloop.length == 3 %}medium-up--one-third{% elsif forloop.length == 2 %}medium-up--one-half{% endif %}" {{ block.shopify_attributes }}>
  7.           {% if block.type == 'logo' %}
  8.           <style>
  9.             .footer_logo .desktop_logo img{
  10.               width:{{block.settings.desktop_logo_size}};
  11.             }
  12.           </style>
  13.           <ul class="footer_logo">
  14.             {% if template.name == 'index' %}
  15.             <h1 class="h2 site-header__logo" itemscope itemtype="http://schema.org/Organization">
  16.               {% else %}
  17.               <div class="h2 site-header__logo" itemscope itemtype="http://schema.org/Organization">
  18.                 {% endif %}
  19.                 {% if block.settings.logo %}
  20.                 {%- assign img_url = block.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
  21.                 <a href="/" itemprop="url" class="desktop_logo site-header__logo-image">
  22.                   {% capture logo_alt %}{{ block.settings.logo.alt | default: shop.name }}{% endcapture %}
  23.                   <img class="lazyload js"
  24.                        src="{{ block.settings.logo | img_url: '300x300' }}"
  25.                        data-src="{{ img_url }}"
  26.                        data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
  27.                        data-aspectratio="{{ block.settings.logo.aspect_ratio }}"
  28.                        data-sizes="auto"
  29.                        alt="{{ logo_alt | escape }}"
  30.                        >
  31.                   <noscript>
  32.                     {% capture image_size %}300x{% endcapture %}
  33.                     <img src="{{ block.settings.logo | img_url: image_size }}"
  34.                          srcset="{{ block.settings.logo | img_url: image_size }} 1x, {{ block.settings.logo | img_url: image_size, scale: 2 }} 2x"
  35.                          alt="{{ block.settings.logo.alt | default: shop.name }}"
  36.                          itemprop="logo"
  37.                          >
  38.                   </noscript>
  39.                 </a>
  40.                 {% else %}
  41.                 <a class="site-header__logo-link" href="/" itemprop="url">{{ shop.name }}</a>
  42.                 {% endif %}
  43.                 {% if template.name == 'index' %}
  44.                 </h1>
  45.               {% else %}
  46.               </div>
  47.             {% endif %}
  48.  
  49.  
  50.           </ul>
  51.  
  52.           {% elsif block.type == 'link_list' %}
  53.             <div class="footer_menu site-footer__linklist">
  54.               {% if block.settings.menu != blank %}
  55.                 <h5 class="footer_title">{{ linklists[block.settings.menu].title }}</h5>
  56.                 <div class="toggle_content">
  57.                   <ul>
  58.                     {% for link in linklists[block.settings.menu].links %}
  59.                       <li><a href="{{ link.url }}">{{ link.title }}</a></li>
  60.                     {% endfor %}
  61.                   </ul>
  62.                 </div>
  63.               {% else %}
  64.                 <h6>Menu title<span class="right icon-down-arrow"></span></h6>
  65.                 <div class="toggle_content">
  66.                   <ul>
  67.                     <li><p>{{ 'homepage.onboarding.no_content' | t }}</p></li>
  68.                   </ul>
  69.                 </div>
  70.               {% endif %}
  71.             </div>
  72.  
  73.           {% elsif block.type == 'text' %}
  74.             <div class="footer_content">
  75.               {% if block.settings.logo_footer%}
  76.               <style>
  77.                 .footer_logo-1 .desktop_logo img{
  78.                   width:{{block.settings.desktop_logo_size}};
  79.                 }
  80.               </style>
  81.               <ul class="footer_logo-1">
  82.                 {% if template.name == 'index' %}
  83.                 <h1 class="h2 site-header__logo" itemscope itemtype="http://schema.org/Organization">
  84.                   {% else %}
  85.                   <div class="h2 site-header__logo" itemscope itemtype="http://schema.org/Organization">
  86.                     {% endif %}
  87.                     {% if block.settings.logo %}
  88.                     {%- assign img_url = block.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
  89.                     <a href="/" itemprop="url" class="desktop_logo site-header__logo-image">
  90.                       {% capture logo_alt %}{{ block.settings.logo.alt | default: shop.name }}{% endcapture %}
  91.                       <img class="lazyload js"
  92.                            src="{{ block.settings.logo | img_url: '300x300' }}"
  93.                            data-src="{{ img_url }}"
  94.                            data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
  95.                            data-aspectratio="{{ block.settings.logo.aspect_ratio }}"
  96.                            data-sizes="auto"
  97.                            alt="{{ logo_alt | escape }}"
  98.                            >
  99.                       <noscript>
  100.                         {% capture image_size %}300x{% endcapture %}
  101.                         <img src="{{ block.settings.logo | img_url: image_size }}"
  102.                              srcset="{{ block.settings.logo | img_url: image_size }} 1x, {{ block.settings.logo | img_url: image_size, scale: 2 }} 2x"
  103.                              alt="{{ block.settings.logo.alt | default: shop.name }}"
  104.                              itemprop="logo"
  105.                              >
  106.                       </noscript>
  107.                     </a>
  108.                     {% else %}
  109.                     <a class="site-header__logo-link" href="/" itemprop="url">{{ shop.name }}</a>
  110.                     {% endif %}
  111.                     {% if template.name == 'index' %}
  112.                     </h1>
  113.                   {% else %}
  114.                   </div>
  115.                 {% endif %}
  116.  
  117.  
  118.               </ul>
  119.               {% endif %}
  120.               {% if block.settings.title != blank %}
  121.                 <h5 class="footer_title">{{ block.settings.title }}</h5>
  122.                {% endif %}
  123.               {% if block.settings.content != blank %}
  124.                 <div class="toggle_content">
  125.                   {{ block.settings.content }}
  126.                 </div>  
  127.               {% endif %}
  128.             </div>
  129.      
  130.           {% elsif block.type == 'customer_shopify' %}
  131.          
  132.           {% if settings.mailchimp_link != blank %}
  133.  
  134.           <div class="site-footer__newsletter newsletter">
  135.             <span class="message"></span>
  136.  
  137.             <form action="{{ settings.mailchimp_link }}" method="post" name="mc-embedded-subscribe-form" id="contact_form" target="_blank">
  138.               <label for="Email" class="h5">{{ 'general.newsletter_form.newsletter_email' | t }}</label>
  139.               <div class="input-group">
  140.                 <input type="email" id="Email" class="input-group__field newsletter__input" value="" name="EMAIL" class="contact_email" placeholder="{{ 'general.newsletter_form.email_placeholder' | t }}">
  141.                 <span class="input-group__btn">
  142.                   <button type="submit" class="btn newsletter__submit" name="subscribe" id="Subscribe" value="{{ 'general.newsletter_form.submit' | t }}">
  143.                     <span class="newsletter__submit-text--large">{{ 'general.newsletter_form.submit' | t }}</span>
  144.                   </button>
  145.                 </span>                
  146.               </div>
  147.             </form>      
  148.  
  149.           </div>
  150.  
  151.           {% elsif settings.klaviyo_link != blank %}
  152.  
  153.           <div class="site-footer__newsletter newsletter">
  154.          
  155.             <form action="{{ settings.klaviyo_link }}" method="post" class="klaviyo_styling klaviyo_standard_embed_LPUfWW" id="email_signup" target="_blank" novalidate="novalidate">
  156.               <input type="hidden" name="g" value="LPUfWW">
  157.               <input type="hidden" name="$fields" value="firstName,lastName"/>
  158.               <label for="Email" class="h5">{{ 'general.newsletter_form.newsletter_email' | t }}</label>
  159.               <div class="input-group klaviyo_field_group">
  160.                 <input type="email" id="k_id_email" class="input-group__field contact_email newsletter__input" value="" name="EMAIL" class="contact_email" placeholder="{{ 'general.newsletter_form.email_placeholder' | t }}">
  161.                 <div class="klaviyo_messages">
  162.                   <div class="success_message" style="display:none;"></div>
  163.                   <div class="error_message" style="display:none;"></div>
  164.                 </div>
  165.                 <span class="input-group__btn">
  166.                   <button type="submit" class="btn newsletter__submit klaviyo_submit_button" name="subscribe" id="btnSubmit" value="{{ 'general.newsletter_form.submit' | t }}">
  167.                     <span class="newsletter__submit-text--large">{{ 'general.newsletter_form.submit' | t }}</span>
  168.                   </button>
  169.                 </span>                
  170.               </div>
  171.             </form>
  172.  
  173.           </div>
  174.  
  175.           {% else %}
  176.          
  177.           <div class="site-footer__newsletter newsletter">
  178.             <span class="message"></span>
  179.             {% form 'customer' %}
  180.             {{ form.errors | default_errors }}
  181.             {% if form.posted_successfully? %}
  182.             <span class="message">{{ 'general.newsletter_form.confirmation' | t }}</span>
  183.             {% else %}
  184.             <label for="Email" class="h5">{{ 'general.newsletter_form.newsletter_email' | t }}</label>
  185.             <div class="input-group">
  186.               <input type="hidden" name="contact[tags]" value="newsletter">
  187.               <input type="hidden" name="challenge" value="false" />
  188.               <input type="email"
  189.                      name="contact[email]"
  190.                      id="Email"
  191.                      class="input-group__field newsletter__input"
  192.                      value="{% if customer %}{{ customer.email }}{% endif %}"
  193.                      placeholder="{{ 'general.newsletter_form.email_placeholder' | t }}"
  194.                      autocorrect="off"
  195.                      autocapitalize="off">
  196.               <span class="input-group__btn">
  197.                 <button type="submit" class="btn newsletter__submit" name="commit" id="Subscribe">
  198.                   <span class="newsletter__submit-text--large">{{ 'general.newsletter_form.submit' | t }}</span>
  199.                 </button>
  200.               </span>
  201.             </div>
  202.             {% endif %}
  203.             {% endform %}
  204.           </div>
  205.           {% endif %}
  206.          
  207.           {% elsif block.type == 'empty' %}
  208.             <div class="empty-column"></div>
  209.  
  210.           {% endif %}
  211.  
  212.           {% assign social_media_column = section.settings.social_media_column | plus: 0  %}
  213.  
  214.           {% if block.settings.social_icons_footer %}
  215.             {% assign social_icons = true %}
  216.             <div class="footer-social-icons">
  217.               {% include 'social-icons' %}
  218.             </div>
  219.           {% endif %}
  220.  
  221.         </div>
  222.        
  223.       {% endfor %}
  224.  
  225.      
  226.     </div>
  227.     <div class="grid">
  228.     <div class="grid__item medium-up--one-whole footer_credits">
  229.         <p class="credits">
  230.           © {{ "now" | date: "%Y" }}
  231.           {% if section.settings.shop_name != blank %}
  232.           <a href="/">{{ section.settings.shop_name }}</a>
  233.           {% else %}
  234.            {{ shop.name | link_to: '/' }}
  235.           {% endif %}
  236.  
  237.           <a href='{{ design_link }}'>{{ 'general.copyright_credit.designer_credits_html' | t }}</a>
  238.          
  239.           {% if section.settings.display_shopify_by %} &
  240.           <a href="https://www.shopify.in/?ref=limitless-theme&utm_campaign=footer-link" target="_blank">Powered by shopify</a>.
  241.           {% endif %}
  242.         </p>
  243.  
  244.         {% if section.settings.display_payment_methods %}
  245.         <div class="site-footer__payment-icons site-footer__payment-icons--right">
  246.           <ul class="payment-icons list--inline">
  247.             {% if section.settings.pay_discover %}  
  248.             <li>
  249.               <span class="icon-fallback-text" title="{{ 'discover' | replace: '_',' '}}">
  250.                 {% include 'icon-discover' %}
  251.                 <span class="fallback-text">{{ 'discover' | replace: '_',' '}}</span>
  252.               </span>
  253.             </li>
  254.             {% endif %}
  255.  
  256.             {% if section.settings.pay_diners_club %}  
  257.             <li>
  258.               <span class="icon-fallback-text" title="{{ 'diners_club' | replace: '_',' '}}">
  259.                 {% include 'icon-diners_club' %}
  260.                 <span class="fallback-text">{{ 'diners_club' | replace: '_',' '}}</span>
  261.               </span>
  262.             </li>
  263.             {% endif %}
  264.  
  265.             {% if section.settings.pay_american_express %}  
  266.             <li>
  267.               <span class="icon-fallback-text" title="{{ 'american_express' | replace: '_',' '}}">
  268.                 {% include 'icon-american_express' %}
  269.                 <span class="fallback-text">{{ 'american_express' | replace: '_',' '}}</span>
  270.               </span>
  271.             </li>
  272.             {% endif %}
  273.  
  274.             {% if section.settings.pay_paypal %}  
  275.             <li>
  276.               <span class="icon-fallback-text" title="{{ 'paypal' | replace: '_',' '}}">
  277.                 {% include 'icon-paypal' %}
  278.                 <span class="fallback-text">{{ 'paypal' | replace: '_',' '}}</span>
  279.               </span>
  280.             </li>
  281.             {% endif %}
  282.  
  283.             {% if section.settings.pay_master %}  
  284.             <li>
  285.               <span class="icon-fallback-text">
  286.                 {% include 'icon-master' %}
  287.                 <span class="fallback-text">{{ 'master' | replace: '_',' '}}</span>
  288.               </span>
  289.             </li>
  290.             {% endif %}
  291.  
  292.             {% if section.settings.pay_visa %}  
  293.             <li>
  294.               <span class="icon-fallback-text" title="{{ 'visa' | replace: '_',' '}}">
  295.                 {% include 'icon-visa' %}
  296.                 <span class="fallback-text">{{ 'visa' | replace: '_',' '}}</span>
  297.               </span>
  298.             </li>
  299.             {% endif %}
  300.  
  301.           </ul>        
  302.         </div>
  303.      
  304.         {% endif %}
  305.       </div>
  306.     </div><!--end footer_credits-->
  307.   </div>
  308. </footer>
  309.  
  310. {% schema %}
  311.  
  312. {
  313.   "name": "Footer",
  314.   "class": "footer-section",
  315.   "max_blocks": 4,
  316.   "settings": [
  317.     {
  318.       "type": "header",
  319.       "content": "Footer [NEED HELP?](https://help.boostertheme.com/hc/en-us/articles/360002081334-How-to-setup-the-Footer-in-Booster-2-0)"
  320.     },
  321.     {
  322.       "type": "text",
  323.       "id": "shop_name",
  324.       "label": "Shop Name"
  325.     },
  326.     {
  327.       "type": "checkbox",
  328.       "id": "display_shopify_by",
  329.       "label": "Show theme powered by shopify",
  330.       "default": true
  331.     },
  332.     {
  333.       "type": "checkbox",
  334.       "id": "display_payment_methods",
  335.       "label": "Show payment method icons",
  336.       "default": true
  337.     },
  338.         {
  339.       "type": "header",
  340.       "content": "Payment icons"
  341.     },
  342.     {
  343.       "type": "checkbox",
  344.       "id": "pay_visa",
  345.       "label": "Show Visa",
  346.       "default": true
  347.     },
  348.     {
  349.       "type": "checkbox",
  350.       "id": "pay_master",
  351.       "label": "Show Mastercard",
  352.       "default": true
  353.     },
  354.     {
  355.       "type": "checkbox",
  356.       "id": "pay_american_express",
  357.       "label": "Show American Express",
  358.       "default": true
  359.     },
  360.     {
  361.       "type": "checkbox",
  362.       "id": "pay_paypal",
  363.       "label": "Show PayPal",
  364.       "default": true
  365.     },
  366.     {
  367.       "type": "checkbox",
  368.       "id": "pay_diners_club",
  369.       "label": "Show Diners Club",
  370.       "default": true
  371.     },
  372.     {
  373.       "type": "checkbox",
  374.       "id": "pay_discover",
  375.       "label": "Show Discover",
  376.       "default": true
  377.     }
  378.   ],
  379.   "blocks": [
  380.     {
  381.       "type": "logo",
  382.       "name": "Logo",
  383.       "settings": [
  384.         {
  385.           "type": "image_picker",
  386.           "id": "logo",
  387.           "label": "Desktop Logo"
  388.         },
  389.         {
  390.           "type": "select",
  391.           "id": "desktop_logo_size",
  392.           "label": "Logo size in %",
  393.           "options": [
  394.             {
  395.               "value": "30%",
  396.               "label": "30"
  397.             },
  398.             {
  399.               "value": "35%",
  400.               "label": "35"
  401.             },
  402.             {
  403.               "value": "50%",
  404.               "label": "50"
  405.             },
  406.             {
  407.               "value": "60%",
  408.               "label": "60"
  409.             },
  410.             {
  411.               "value": "70%",
  412.               "label": "70"
  413.             },
  414.             {
  415.               "value": "75%",
  416.               "label": "75"
  417.             },
  418.             {
  419.               "value": "90%",
  420.               "label": "90"
  421.             },
  422.             {
  423.               "value": "100%",
  424.               "label": "100"
  425.             }
  426.           ]
  427.         },
  428.         {
  429.           "type": "checkbox",
  430.           "id": "social_icons_footer",
  431.           "label": "Show social media footer icons",
  432.           "default": false
  433.         }
  434.       ]
  435.     },
  436.     {
  437.       "type": "link_list",
  438.       "name": "Menu",
  439.       "settings": [
  440.         {
  441.           "type": "link_list",
  442.           "id": "menu",
  443.           "label": "Menu",
  444.                   "default": "footer"
  445.         },
  446.         {
  447.           "type": "checkbox",
  448.           "id": "social_icons_footer",
  449.           "label": "Show social media footer icons",
  450.           "default": false
  451.         }
  452.       ]
  453.     },
  454.         {
  455.       "type": "customer_shopify",
  456.       "name": "Newsletter",
  457.       "settings": [
  458.         {
  459.           "type": "paragraph",
  460.           "content": "Any customers who sign up will have an account created for them in Shopify. [View customers](/admin/customers?query=&accepts_marketing=1)"
  461.         },
  462.         {
  463.           "type": "checkbox",
  464.           "id": "social_icons_footer",
  465.           "label": "Show social media footer icons",
  466.           "default": false
  467.         }
  468.       ]
  469.     },
  470.     {
  471.       "type": "text",
  472.       "name": "Text",
  473.       "settings": [
  474.                 {
  475.           "type": "checkbox",
  476.           "id": "logo_footer",
  477.           "label": "Enable logo",
  478.           "default": false
  479.         },
  480.                 {
  481.           "type": "image_picker",
  482.           "id": "logo",
  483.           "label": "Desktop Logo"
  484.         },
  485.         {
  486.           "type": "select",
  487.           "id": "desktop_logo_size",
  488.           "label": "Logo size in %",
  489.           "options": [
  490.             {
  491.               "value": "30%",
  492.               "label": "30"
  493.             },
  494.             {
  495.               "value": "35%",
  496.               "label": "35"
  497.             },
  498.             {
  499.               "value": "50%",
  500.               "label": "50"
  501.             },
  502.             {
  503.               "value": "60%",
  504.               "label": "60"
  505.             },
  506.             {
  507.               "value": "70%",
  508.               "label": "70"
  509.             },
  510.             {
  511.               "value": "75%",
  512.               "label": "75"
  513.             },
  514.             {
  515.               "value": "90%",
  516.               "label": "90"
  517.             },
  518.             {
  519.               "value": "100%",
  520.               "label": "100"
  521.             }
  522.           ]
  523.         },
  524.         {
  525.           "type": "text",
  526.           "id": "title",
  527.           "label": "Heading",
  528.           "default": "Title"
  529.         },
  530.         {
  531.           "type": "richtext",
  532.           "id": "content",
  533.           "label": "Text",
  534.           "default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
  535.         },
  536.         {
  537.           "type": "checkbox",
  538.           "id": "social_icons_footer",
  539.           "label": "Show social media footer icons",
  540.           "default": false
  541.         }
  542.       ]
  543.     },
  544.     {
  545.       "type": "empty",
  546.       "name": "Empty column",
  547.       "settings": [
  548.         {
  549.           "type": "checkbox",
  550.           "id": "social_icons_footer",
  551.           "label": "Show social media footer icons",
  552.           "default": false
  553.         }
  554.       ]
  555.     }
  556.   ],
  557.   "default": {
  558.     "blocks": [
  559.       {
  560.         "type": "logo"
  561.       },
  562.       {
  563.         "type": "link_list"
  564.       },
  565.       {
  566.         "type": "link_list"
  567.       },
  568.       {
  569.         "type": "text"
  570.       }
  571.     ]
  572.   }
  573. }
  574.  
  575. {% endschema %}
  576.  
  577.  
  578.  
  579.  
  580.