Shopifyでオリジナルテーマを作成しよう～No.4[フッター作成]～

<footer class="mt-5 py-2 bg-secondary text-white">
  <div class="container">
    <div class="footer_menu d-flex align-items-center justify-content-between">
      <ul class="footer_menu_left no_margin_buttom">
        <li><a href="index.html" class="text-white">ホーム</a></li>
        <li><a href="contact.html" class="text-white">お問い合わせ</a></li>
        <li><a href="policy.html" class="text-white">プライバシーポリシー</a></li>
      </ul>
      <ul class="footer_menu_rigth no_margin_buttom">
        <li><a href="#" class="text-white"><i class="fab fa-instagram"></i></a></li>
        <li><a href="#" class="text-white"><i class="fab fa-facebook-f"></i></a></li>
        <li><a href="#" class="text-white"><i class="fab fa-twitter"></i></a></li>
      </ul>
    </div>
  </div>
</footer>

<ul class="footer_menu_left no_margin_buttom">
        <li><a href="index.html" class="text-white">ホーム</a></li>
        <li><a href="contact.html" class="text-white">お問い合わせ</a></li>
        <li><a href="policy.html" class="text-white">プライバシーポリシー</a></li>
</ul>

<ul class="footer_menu_left no_margin_buttom">
        <!-- footer.linksでフッターメニューに指定したメニューを呼び出す -->
        {% for link in linklists.footer.links %}
        <li><a href="{{ link.url }}" class="text-white">{{ link.title }}</a></li>
        {% endfor %}
</ul>

<ul class="footer_menu_rigth no_margin_buttom">
        <li><a href="#" class="text-white"><i class="fab fa-instagram"></i></a></li>
        <li><a href="#" class="text-white"><i class="fab fa-facebook-f"></i></a></li>
        <li><a href="#" class="text-white"><i class="fab fa-twitter"></i></a></li>
</ul>

<ul class="footer_menu_rigth no_margin_buttom">

        {% if section.settings.instagram != blank %}
        <li>
          <a href="{{section.settings.instagram}}" class="text-white">
            <i class="fab fa-instagram"></i>
          </a>
        </li>
        {% endif %}
        {% if section.settings.facebook != blank %}
        <li>
          <a href="{{section.settings.facebook}}" class="text-white">
            <i class="fab fa-facebook-f"></i>
          </a>
        </li>
        {% endif %}
        {% if section.settings.twitter != blank %}
        <li>
          <a href="{{section.settings.twitter}}" class="text-white">
            <i class="fab fa-twitter"></i>
          </a>
        </li>
        {% endif %}
</ul>

{% schema %}
{
"name": "Footer",
"settings":[
{
"type": "text",
"id": "instagram",
"label": "Instagram Link"
},
{
"type": "text",
"id": "facebook",
"label": "Facebook Link"
},
{
"type": "text",
"id": "twitter",
"label": "Twitter Link"
}
]
}
{% endschema %}

{% schema %}
  {
    "name": "Text Box",
    "settings": [
      {
        "id": "text-box",
        "type": "text",
        "label": "Heading",
        "default": "Title"
      },
      {
        "id": "text",
        "type": "richtext",
        "label": "Add custom text below",
        "default": "<p>Add your text here</p>"
      }
    ]
  }
{% endschema %}

{% schema %}
{
"name": "Footer",
"settings":[
{
"type": "text",
"id": "instagram",
"label": "Instagram Link"
},
{
"type": "text",
"id": "facebook",
"label": "Facebook Link"
},
{
"type": "text",
"id": "twitter",
"label": "Twitter Link"
}
]
}
{% endschema %}

{% if section.settings.instagram != blank %}
        <li>
          <a href="{{section.settings.instagram}}" class="text-white">
            <i class="fab fa-instagram"></i>
          </a>
        </li>
{% endif %}

{% if section.settings.instagram != blank %}

{{section.settings.instagram}}