Liquid Snippets by ALSEL
🧭 ヘッダー/フッター/ナビゲーション中級

フッター

ストア共通のフッターをレスポンシブに表示するセクション。モバイル表示では各ブロックが開閉可能なアコーディオン、デスクトップ表示では複数カラムレイアウトで描画される。

用途
すべてのページ下部に配置し、会社情報・リンク集・ソーシャルメディアアイコン・決済アイコン・著作権表記を一元管理するために使用する。
設置場所
sections/footer.liquid に配置し、theme.liquid の </body> 直前で `{% section 'footer' %}` で呼び出す。このセクションは管理画面で limit: 1 に制限されているため、フッターは1つのセクションインスタンスのみ。
注意点
各ブロックのタイトルは必須で、空にするとレイアウトが崩れるため、ブロック追加時は必ずタイトルを入力する。背景色・文字色・枠線色はテーマの色体系クラス（bg-primary、text-white など）に依存しており、これらが theme CSS で定義されていない場合は表示されない。ソーシャルメディアアイコンと決済アイコンの表示は管理画面のチェックボックスで制御でき、関連スニペット（social-icons、payment-icons）が別途必要である。
タグ:footersectionresponsiveaccordionlayout

コード

367 行 / liquid
<footer 
  id="footer" 
  class="
    small 
    {{ section.settings.bg_color }} 
    {{ section.settings.bg_gradient }}
    {{ section.settings.text_color }} 
    {{ section.settings.border_top_width | prepend: 'border-top-' }}
    {{ section.settings.border_bottom_width | prepend: 'border-bottom-' }}
    {{ section.settings.border_color }} 
    {{ section.settings.pt | prepend: 'pt-' }} 
    {{ section.settings.pb | prepend: 'pb-' }}
    "
  style="
    --bs-bg-opacity: {{ section.settings.bg_opacity | append: '%' }};
    --bs-border-opacity: {{ section.settings.border_opacity | append: '%' }};
  ">
  <div class="container">
    <div
      id="footer-mobile" 
      class="d-desktop-none">
      <div class="mb-8" role="list">
        {% for block in section.blocks %}
          <div class="collapse-wrapper" role="listitem" {{ block.shopify_attributes }}>
            <button
              id="footer-mobile-collapse-btn-{{ forloop.index }}" 
              class="heading {{ block.settings.title_font_size }}" 
              type="button" 
              data-bs-toggle="collapse" 
              data-bs-target="#footer-mobile-collapse-{{ forloop.index }}" 
              aria-expanded="false" 
              aria-controls="footer-mobile-collapse-{{ forloop.index }}">
              {{ block.settings.title }}
              {% render 'svg-icons', icon: 'chevron-down', size: 18 %}
            </button>
            <div id="footer-mobile-collapse-{{ forloop.index }}" class="collapse">
              <div class="collapse-inner">
                {% render 'footer-block', block: block %}
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
    <div 
      id="footer-desktop" 
      class="d-none d-desktop-block">
      <div class="row" role="list">
        {% for block in section.blocks %}
          <div class="footer-block col" role="listitem" {{ block.shopify_attributes }}>
            <h3 class="title {{ block.settings.title_font_size }}">
              <span>
                {{ block.settings.title }}
              </span>
            </h3>
            {% render 'footer-block', block: block %}
          </div>
        {% endfor %}
      </div>
      <hr class="my-8">
    </div>

    <div 
      id="footer-copyright" 
      class="">
      <div class="row align-items-center">
        <div class="col-desktop-5">
          {% if section.settings.social_icons %}
            <div class="social-icons-wrapper text-center text-desktop-start mb-5 mb-desktop-0">
              {% render 'social-icons', icon_size: 18, show_title: false %}
            </div>
          {% endif %}
        </div>
        <div class="col-desktop-8">
          <div class="fs-sm text-center">
            &copy; {{ 'now' | date: "%Y" }} {{ shop.name | replace: ' (', '<span hidden>' | replace: ')', '</span>' }}.
            {% if section.settings.show_powered_by %}
              Theme by <a href="https://www.kondasoft.com" target="_blank" rel="sponsored">KondaSoft</a>,
              Powered by <a href="https://www.shopify.com" target="_blank" rel="sponsored">Shopify</a>
            {% endif %}
          </div>
        </div>
        <div class="col-desktop-5">
          {% if section.settings.show_payment_icons %}
            <div class="payment-icons-wrapper text-center text-desktop-end mt-5 mt-desktop-0">
              {% render 'payment-icons' %}
            </div>
          {% endif %}
        </div>
      </div>
    </div>
    
  </div>
</footer>

{% schema %}
{
  "name": "Footer",
  "limit": 1,
  "settings": [
    {
      "type": "header",
      "content": "Styling"
    },
    {
      "type": "select",
      "id": "bg_color",
      "label": "Background color",
      "default": "bg-body",
      "options": [
        { "value": "bg-primary", "label": "Primary" },
        { "value": "bg-secondary", "label": "Secondary" },
        { "value": "bg-body", "label": "Body" },
        { "value": "bg-white", "label": "White" }
      ]
    },
    {
      "type": "range",
      "id": "bg_opacity",
      "label": "Background opacity",
      "min": 0,
      "max": 100,
      "step": 1,
      "default": 100,
      "unit": "%"
    },
    {
      "type": "select",
      "id": "bg_gradient",
      "label": "Background gradient",
      "options": [
        { "value": "bg-gradient", "label": "Yes" },
        { "value": "", "label": "No" }
      ],
      "default": ""
    },
    {
      "type": "select",
      "id": "text_color",
      "label": "Text color",
      "default": "text-body",
      "options": [
        { "value": "text-primary", "label": "Primary" },
        { "value": "text-secondary", "label": "Secondary" },
        { "value": "text-body", "label": "Body" },
        { "value": "text-white", "label": "White" }
      ]
    },
    {
      "type": "range",
      "id": "border_top_width",
      "label": "Border top width",
      "default": 0,
      "min": 0,
      "max": 16,
      "step": 1,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "border_bottom_width",
      "label": "Border bottom width",
      "default": 0,
      "min": 0,
      "max": 16,
      "step": 1,
      "unit": "px"
    },
    {
      "type": "select",
      "id": "border_color",
      "label": "Border color",
      "default": "border-body",
      "options": [
        { "value": "border-primary", "label": "Primary" },
        { "value": "border-secondary", "label": "Secondary" },
        { "value": "border-body", "label": "Body" },
        { "value": "border-white", "label": "White" }
      ]
    },
    {
      "type": "range",
      "id": "border_opacity",
      "label": "Border opacity",
      "min": 0,
      "max": 100,
      "step": 1,
      "default": 100,
      "unit": "%"
    },
    {
      "type": "header",
      "content": "General"
    },
    {
      "type": "checkbox",
      "id": "social_icons",
      "label": "Show social icons",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_payment_icons",
      "label": "Show payment icons",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_powered_by",
      "label": "Show powered by",
      "default": true
    },
    {
      "type": "header",
      "content": "Spacing"
    },
    {
      "type": "range",
      "id": "pt",
      "label": "Top",
      "min": 0,
      "max": 20,
      "step": 1,
      "default": 10
    },
    {
      "type": "range",
      "id": "pb",
      "label": "Bottom",
      "min": 0,
      "max": 20,
      "step": 1,
      "default": 10
    }
  ],
  "blocks": [
    {
      "type": "richtext",
      "name": "Richtext",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Block Title"
        },
        {
          "type": "select",
          "id": "title_font_size",
          "label": "Title",
          "options": [
            { "value": "fs-sm", "label": "sm" },
            { "value": "fs-md", "label": "md" },
            { "value": "fs-lg", "label": "lg" },
            { "value": "fs-xl", "label": "xl" },
            { "value": "fs-xxl", "label": "xxl" }
          ],
          "default": "fs-lg",
          "info": "Only on desktop"
        },
        {
          "type": "richtext",
          "id": "description",
          "label": "Description",
          "default": "<p>Some description for this block</p>"
        },
        {
          "type": "header",
          "content": "Buttons"
        },
        {
          "type": "text",
          "id": "btn_primary_text",
          "label": "Primary button text",
          "info": "Leave empty to disable"
        },
        {
          "type": "url",
          "id": "btn_primary_url",
          "label": "Primary button URL"
        },
        {
          "type": "select",
          "id": "btn_primary_color",
          "label": "Primary button color",
          "default": "btn-primary",
          "options": [
            { "group": "Solid", "value": "btn-primary", "label": "Primary" },
            { "group": "Solid", "value": "btn-secondary", "label": "Secondary" },
            { "group": "Solid", "value": "btn-white", "label": "White" },
            { "group": "Light", "value": "btn-light-primary", "label": "Primary" },
            { "group": "Light", "value": "btn-light-secondary", "label": "Secondary" },
            { "group": "Light", "value": "btn-light-white", "label": "White" },
            { "group": "Outline", "value": "btn-outline-primary", "label": "Primary" },
            { "group": "Outline", "value": "btn-outline-secondary", "label": "Secondary" },
            { "group": "Outline", "value": "btn-outline-white", "label": "White" }
          ]
        },
        {
          "type": "text",
          "id": "btn_secondary_text",
          "label": "Secondary button text",
          "info": "Leave empty to disable"
        },
        {
          "type": "url",
          "id": "btn_secondary_url",
          "label": "Secondary button URL"
        },
        {
          "type": "select",
          "id": "btn_secondary_color",
          "label": "Secondary button color",
          "default": "btn-secondary",
          "options": [
            { "group": "Solid", "value": "btn-primary", "label": "Primary" },
            { "group": "Solid", "value": "btn-secondary", "label": "Secondary" },
            { "group": "Solid", "value": "btn-white", "label": "White" },
            { "group": "Light", "value": "btn-light-primary", "label": "Primary" },
            { "group": "Light", "value": "btn-light-secondary", "label": "Secondary" },
            { "group": "Light", "value": "btn-light-white", "label": "White" },
            { "group": "Outline", "value": "btn-outline-primary", "label": "Primary" },
            { "group": "Outline", "value": "btn-outline-secondary", "label": "Secondary" },
            { "group": "Outline", "value": "btn-outline-white", "label": "White" }
          ]
        }
      ]
    },
    {
      "type": "menu",
      "name": "Menu",
      "settings": [
        {
          "type": "link_list",
          "id": "menu",
          "label": "Menu"
        },
        {
          "type": "select",
          "id": "title_font_size",
          "label": "Title",
          "options": [
            { "value": "fs-sm", "label": "sm" },
            { "value": "fs-md", "label": "md" },
            { "value": "fs-lg", "label": "lg" },
            { "value": "fs-xl", "label": "xl" },
            { "value": "fs-xxl", "label": "xxl" }
          ],
          "default": "fs-lg",
          "info": "Only on desktop"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Block Title"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Footer"
    }
  ]
}
{% endschema %}

出典・ライセンス

Source:
kondasoft/ks-bootshop/sections/footer.liquid
Repository:
https://github.com/kondasoft/ks-bootshop
License:
MIT

このコードは kondasoft 著作の MIT ライセンスソースです。 原本の著作権は kondasoft が保有します。日本語訳は ALSEL によるものです。

関連項目

🧭 ヘッダー/フッター/ナビゲーション中級

Alpine.js統合のメニュー開閉

Alpine.js の @click ディレクティブと :class バインディングを使ったメニュー開閉コンポーネント。ボタンクリックで open 状態を切り替え、ul 要素に expanded クラスを条件付きで付与する。

📁 theme-tools·MIT·5 行
🧭 ヘッダー/フッター/ナビゲーション初級

ヘッダーのレイアウト構造

Web Component のカスタムエレメント `<c-header>` でラップしたヘッダー要素。Tailwind CSS のユーティリティクラスを使い、レスポンシブなパディングとフレックスボックスレイアウトを実装している。

📁 theme-tools·MIT·14 行
🧭 ヘッダー/フッター/ナビゲーション初級

ナビゲーションバーのロゴ

ストアのロゴをナビゲーションバーに表示し、クリックでホームページに戻るコンポーネント。ロゴ画像がない場合はストア名をテキストで表示する。

📁 ks-bootshop·MIT·18 行
🧭 ヘッダー/フッター/ナビゲーション初級

決済方法アイコン

ストアで有効な決済手段のアイコンをリスト表示するスニペット。Shopify が提供する `payment_type_svg_tag` フィルタを使い、クレジットカード・Apple Pay・Google Pay などのロゴを自動的に描画する。

📁 ks-bootshop·MIT·18 行
🧭 ヘッダー/フッター/ナビゲーション初級

グローバルナビゲーションメニュー

Shopify 管理画面の「メインメニュー」リンクリストをループし、トップレベルメニュー + 1階層のサブメニューを描画するスニペット。link.title と sub_link.title を escape フィルターでエスケープして XSS 対策を施している。

📁 shopify-theme-lab·MIT·19 行
🧭 ヘッダー/フッター/ナビゲーション初級

フッター

ストア共通のフッターセクション。管理画面で設定したフッターメニュー（リンクリスト）をループ表示し、著作権表記を出す。

📁 shopify-theme-lab·MIT·25 行