Shopify Custom Footer

Bymamunmondol 
{% comment %}
  Section: Custom Footer
  File: sections/custom-footer.liquid
{% endcomment %}

<footer class="custom-footer">
  <div class="footer-main">
    <div class="footer-brand">
      {% if section.settings.logo != blank %}
        <a href="/" class="footer-logo-img">
          <img
            src="{{ section.settings.logo | image_url: width: 160 }}"
            alt="{{ shop.name }}"
            loading="lazy"
            width="120"
          >
        </a>
      {% else %}
        <a href="/" class="footer-logo-text">{{ section.settings.brand_name | default: shop.name }}</a>
      {% endif %}

      {% if section.settings.tagline != blank %}
        <p class="footer-tagline">{{ section.settings.tagline }}</p>
      {% endif %}

      <div class="footer-social">
        {% if section.settings.facebook_url != blank %}
          <a href="{{ section.settings.facebook_url }}" class="social-icon" aria-label="Facebook" target="_blank" rel="noopener">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
          </a>
        {% endif %}
        {% if section.settings.instagram_url != blank %}
          <a href="{{ section.settings.instagram_url }}" class="social-icon" aria-label="Instagram" target="_blank" rel="noopener">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>
          </a>
        {% endif %}
        {% if section.settings.tiktok_url != blank %}
          <a href="{{ section.settings.tiktok_url }}" class="social-icon" aria-label="TikTok" target="_blank" rel="noopener">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.89-2.89 2.89 2.89 0 0 1 2.89-2.89c.28 0 .54.04.79.1V9.01a6.32 6.32 0 0 0-.79-.05 6.34 6.34 0 0 0-6.34 6.34 6.34 6.34 0 0 0 6.34 6.34 6.34 6.34 0 0 0 6.33-6.34V8.69a8.18 8.18 0 0 0 4.78 1.52V6.75a4.85 4.85 0 0 1-1.01-.06z"/></svg>
          </a>
        {% endif %}
        {% if section.settings.youtube_url != blank %}
          <a href="{{ section.settings.youtube_url }}" class="social-icon" aria-label="YouTube" target="_blank" rel="noopener">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46A2.78 2.78 0 0 0 1.46 6.42 29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58 2.78 2.78 0 0 0 1.95 1.96C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.96-1.96A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58zM9.75 15.02V8.98L15.5 12l-5.75 3.02z"/></svg>
          </a>
        {% endif %}
      </div>
    </div>

    <div class="footer-menus">
      {% for block in section.blocks %}
        {% if block.type == 'menu_column' %}
          <div class="footer-menu-col" {{ block.shopify_attributes }}>
            {% if block.settings.heading != blank %}
              <h4 class="footer-col-heading">{{ block.settings.heading }}</h4>
            {% endif %}
            {% if block.settings.menu != blank %}
              {% assign nav = linklists[block.settings.menu] %}
              {% if nav %}
                <ul class="footer-menu-list">
                  {% for link in nav.links %}
                    <li><a href="{{ link.url }}">{{ link.title }}</a></li>
                  {% endfor %}
                </ul>
              {% endif %}
            {% endif %}
          </div>
        {% endif %}
      {% endfor %}
    </div>
  </div>

  <div class="footer-bottom">
    <p class="footer-copy">
      &copy; {{ 'now' | date: '%Y' }}
      {% if section.settings.copyright_text != blank %}
        {{ section.settings.copyright_text }}
      {% else %}
        {{ shop.name }} &mdash; Powered by Shopify
      {% endif %}
    </p>

    <div class="footer-payments">
      {% if section.settings.show_bkash %}
        <span class="pay-badge">bKash</span>
      {% endif %}
      {% if section.settings.show_nagad %}
        <span class="pay-badge">Nagad</span>
      {% endif %}
      {% if section.settings.show_visa %}
        <span class="pay-badge">VISA</span>
      {% endif %}
      {% if section.settings.show_mastercard %}
        <span class="pay-badge">Mastercard</span>
      {% endif %}
      {% if section.settings.show_cod %}
        <span class="pay-badge">COD</span>
      {% endif %}
    </div>
  </div>
</footer>

<style>
  .custom-footer {
    background-color: {{ section.settings.background_color }};
    color: {{ section.settings.text_color }};
    padding: {{ section.settings.padding_top }}px 32px {{ section.settings.padding_bottom }}px;
  }

  .footer-main {
    max-width: {{ section.settings.max_width }}px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: {{ section.settings.brand_col_width }}fr 3fr;
    gap: 48px;
    padding-bottom: 40px;
    border-bottom: 1px solid {{ section.settings.border_color }};
  }

  .footer-logo-text {
    font-size: {{ section.settings.logo_size }}px;
    color: {{ section.settings.logo_color }};
    text-decoration: none;
    font-weight: 500;
    letter-spacing: .1em;
    display: block;
    margin-bottom: 14px;
    font-family: Georgia, serif;
  }

  .footer-logo-img {
    display: block;
    margin-bottom: 14px;
  }

  .footer-logo-img img {
    max-width: 140px;
    height: auto;
  }

  .footer-tagline {
    font-size: 13px;
    color: {{ section.settings.tagline_color }};
    line-height: 1.7;
    margin: 0 0 20px;
    max-width: 220px;
  }

  .footer-social {
    display: flex;
    gap: 10px;
  }

  .social-icon {
    width: 34px;
    height: 34px;
    border: 1px solid {{ section.settings.border_color }};
    display: flex;
    align-items: center;
    justify-content: center;
    color: {{ section.settings.tagline_color }};
    text-decoration: none;
    transition: border-color .2s, color .2s;
  }

  .social-icon:hover {
    border-color: {{ section.settings.tagline_color }};
    color: {{ section.settings.text_color }};
  }

  .footer-menus {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .footer-col-heading {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: {{ section.settings.heading_color }};
    margin: 0 0 18px;
    font-weight: 500;
    font-family: inherit;
  }

  .footer-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .footer-menu-list li {
    margin-bottom: 10px;
  }

  .footer-menu-list a {
    font-size: 14px;
    color: {{ section.settings.link_color }};
    text-decoration: none;
    transition: color .2s;
  }

  .footer-menu-list a:hover {
    color: {{ section.settings.text_color }};
  }

  .footer-bottom {
    max-width: {{ section.settings.max_width }}px;
    margin: 0 auto;
    padding-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
  }

  .footer-copy {
    font-size: 12px;
    color: {{ section.settings.copy_color }};
    margin: 0;
  }

  .footer-copy a {
    color: {{ section.settings.copy_color }};
    text-decoration: none;
  }

  .footer-payments {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .pay-badge {
    background: {{ section.settings.badge_bg }};
    border: 1px solid {{ section.settings.border_color }};
    padding: 4px 12px;
    font-size: 11px;
    color: {{ section.settings.copy_color }};
    letter-spacing: .04em;
  }

  @media (max-width: 989px) {
    .footer-main {
      grid-template-columns: 1fr;
      gap: 32px;
    }
    .footer-menus {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 749px) {
    .custom-footer {
      padding-left: 16px;
      padding-right: 16px;
    }
    .footer-menus {
      grid-template-columns: 1fr 1fr;
    }
    .footer-bottom {
      flex-direction: column;
      align-items: flex-start;
    }
  }
</style>

{% schema %}
{
  "name": "Custom Footer",
  "tag": "section",
  "class": "section-custom-footer",
  "max_blocks": 4,
  "settings": [
    {
      "type": "header",
      "content": "Background & Layout"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background color",
      "default": "#3B3226"
    },
    {
      "type": "range",
      "id": "max_width",
      "min": 800,
      "max": 1400,
      "step": 20,
      "unit": "px",
      "label": "Max width",
      "default": 1200
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "label": "Padding top",
      "default": 56
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "label": "Padding bottom",
      "default": 28
    },
    {
      "type": "range",
      "id": "brand_col_width",
      "min": 1,
      "max": 3,
      "step": 1,
      "label": "Brand column width ratio",
      "default": 2
    },
    {
      "type": "header",
      "content": "Brand"
    },
    {
      "type": "image_picker",
      "id": "logo",
      "label": "Logo image",
      "info": "If blank, brand name text will show"
    },
    {
      "type": "text",
      "id": "brand_name",
      "label": "Brand name (text logo)",
      "default": "nook"
    },
    {
      "type": "range",
      "id": "logo_size",
      "min": 16,
      "max": 48,
      "step": 2,
      "unit": "px",
      "label": "Logo text size",
      "default": 28
    },
    {
      "type": "text",
      "id": "tagline",
      "label": "Tagline",
      "default": "Smart design for everyday convenience. Handcrafted wall pieces for modern Bangladeshi homes."
    },
    {
      "type": "header",
      "content": "Social Links"
    },
    {
      "type": "url",
      "id": "facebook_url",
      "label": "Facebook URL"
    },
    {
      "type": "url",
      "id": "instagram_url",
      "label": "Instagram URL"
    },
    {
      "type": "url",
      "id": "tiktok_url",
      "label": "TikTok URL"
    },
    {
      "type": "url",
      "id": "youtube_url",
      "label": "YouTube URL"
    },
    {
      "type": "header",
      "content": "Bottom Bar"
    },
    {
      "type": "text",
      "id": "copyright_text",
      "label": "Copyright text",
      "default": "Nook Craft Bangladesh — Powered by Shopify"
    },
    {
      "type": "header",
      "content": "Payment Badges"
    },
    {
      "type": "checkbox",
      "id": "show_bkash",
      "label": "Show bKash",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_nagad",
      "label": "Show Nagad",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_visa",
      "label": "Show VISA",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_mastercard",
      "label": "Show Mastercard",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_cod",
      "label": "Show COD",
      "default": true
    },
    {
      "type": "header",
      "content": "Colors"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Primary text color",
      "default": "#FAF8F3"
    },
    {
      "type": "color",
      "id": "logo_color",
      "label": "Logo text color",
      "default": "#FAF8F3"
    },
    {
      "type": "color",
      "id": "tagline_color",
      "label": "Tagline & icon color",
      "default": "#C9BAA0"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Column heading color",
      "default": "#C9BAA0"
    },
    {
      "type": "color",
      "id": "link_color",
      "label": "Menu link color",
      "default": "#A89880"
    },
    {
      "type": "color",
      "id": "border_color",
      "label": "Border & divider color",
      "default": "#4A3D2E"
    },
    {
      "type": "color",
      "id": "copy_color",
      "label": "Copyright text color",
      "default": "#6B5C40"
    },
    {
      "type": "color",
      "id": "badge_bg",
      "label": "Payment badge background",
      "default": "#2A2018"
    }
  ],
  "blocks": [
    {
      "type": "menu_column",
      "name": "Menu Column",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Column heading",
          "default": "Shop"
        },
        {
          "type": "link_list",
          "id": "menu",
          "label": "Navigation menu",
          "info": "Create menus in Navigation settings"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Custom Footer",
      "blocks": [
        {
          "type": "menu_column",
          "settings": {
            "heading": "Shop"
          }
        },
        {
          "type": "menu_column",
          "settings": {
            "heading": "Help"
          }
        },
        {
          "type": "menu_column",
          "settings": {
            "heading": "Company"
          }
        }
      ]
    }
  ]
}
{% endschema %}

Leave a Reply

Your email address will not be published. Required fields are marked *