Zenn
⛳

Shopifyテーマ「Dawn」のフッターをよくあるフッターへカスタマイズ

2024/01/03に公開
CSS
Shopify
Liquid
tech

こんばんは。PeiWebです。今回は、shopifyテーマ「Dawn」のフッターをカスタイズしていきます。

完成形

まずは、完成形を見ていきます。

PC版

PC版PC版

sp版(スマホ版)

sp版sp版

赤枠のところを実装していきます。
主にロゴ/複数のメニュー表示/SNSアイコンの表示を実装していきます。

参考までに、デフォルトのテーマは以下のようになっております。
デフォルトのフッターデフォルトのヘッダー
正直、メール登録しかないので味気ないですね笑

それでは、実装していきます。

メニューの作成

まず、フッターに使用するメニューの作成を行なっていきます。
「メニューの追加」をクリックして、以下のようにFooter Menu/Footer Menu2を作成します。
メニューを追加メニューの追加

上記の「メニューの追加」をクリックすると以下の画面に遷移します。
以下の画像のようにFooter menu/ Footer Menu2に、「メニューの追加」 と 「ハンドル名の設定」を行います。
メニューを追加メニュー追加の詳細画面(Footer Menu1)

メニューを追加メニュー追加の詳細画面(Footer Menu2)

ここまでで、準備が完了したので実際にカスタマイズに移っていきます。

Liquidを用いたカスタマイズ

Footerのカスタマイズは footer.liquid で行なっていきます。

footer.liquid
{% comment %}theme-check-disable UndefinedObject{% endcomment %}
{{ 'section-footer.css' | asset_url | stylesheet_tag }}
{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}
{{ 'component-list-menu.css' | asset_url | stylesheet_tag }}
{{ 'component-list-payment.css' | asset_url | stylesheet_tag }}
{{ 'component-list-social.css' | asset_url | stylesheet_tag }}
{{ 'section-footer-custom.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .footer {
    margin-top: {{ section.settings.margin_top | times: 0.75 | round: 0 }}px;
  }

  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .footer {
      margin-top: {{ section.settings.margin_top }}px;
    }

    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

  {%- liquid
    assign has_social_icons = true
    if settings.social_facebook_link == blank and settings.social_instagram_link == blank and settings.social_youtube_link == blank and settings.social_tiktok_link == blank and settings.social_twitter_link == blank and settings.social_pinterest_link == blank and settings.social_snapchat_link == blank and settings.social_tumblr_link == blank and settings.social_vimeo_link == blank
      assign has_social_icons = false
    endif
  -%}
  {%- if section.blocks.size > 0
    or section.settings.show_social and has_social_icons == true
  -%}
<footer class="footer color-{{ section.settings.color_scheme }} gradient section-{{ section.id }}-padding">
  <div class="footer-contents">
    <div class="footer-left">
      <div class="footer-left_items">
        <div class="footer-left_item">
          <a href="" class="footer-left_logo">
            <img src="{{ 'logo.png' | asset_url }}" class="footer-left_logoImg" alt="logo">
          </a>
        </div>
        <div class="footer-left_item social-icons">
          {%- if section.settings.show_social and has_social_icons -%}
            {%- render 'social-icons', class: 'footer__list-social-icons' -%}
          {%- endif -%}
        </div>
        <div class="footer-left_item b-corp_image">
          <img src="{{ 'b-corp.png' | asset_url }}" alt="b-corp">
        </div>
      </div>
    </div>
    <div class="footer-right">
      <ul class="footer-menu">
        {% for link in linklists.footer-menu01.links %}
          <li class="footer-menu_list"><a href="{{ link.url }}">{{ link.title }}</a></li>
        {% endfor %}
      </ul>
      <ul class="footer-menu">
        {% for link in linklists.footer-menu02.links %}
          <li class="footer-menu_list"><a href="{{ link.url }}">{{ link.title }}</a></li>
        {% endfor %}
      </ul>
    </div>
    </div>
  <div class="footer__content-bottom-wrapper page-width{% if section.settings.enable_country_selector == false and section.settings.enable_language_selector == false %} footer__content-bottom-wrapper--center{% endif %}">
    <div class="footer__copyright caption">
      <small class="copyright__content">&copy; PeiWeb.inc
      </small>
    </div>
  </div>
  {%- endif -%}

  </div>
</footer>

{% schema %}
{
  "name": "t:sections.footer.name",
  "blocks": [
    {
      "type": "@app"
    },
    {
      "type": "link_list",
      "name": "t:sections.footer.blocks.link_list.name",
      "settings": [
        {
          "type": "inline_richtext",
          "id": "heading",
          "default": "Quick links",
          "label": "t:sections.footer.blocks.link_list.settings.heading.label"
        },
        {
          "type": "link_list",
          "id": "menu",
          "default": "footer",
          "label": "t:sections.footer.blocks.link_list.settings.menu.label",
          "info": "t:sections.footer.blocks.link_list.settings.menu.info"
        }
      ]
    },
    {
      "type": "brand_information",
      "name": "t:sections.footer.blocks.brand_information.name",
      "settings": [
        {
          "type": "checkbox",
          "id": "show_social",
          "default": true,
          "label": "t:sections.footer.blocks.brand_information.settings.show_social.label",
          "info": "t:sections.footer.blocks.brand_information.settings.show_social.info"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.footer.blocks.text.name",
      "settings": [
        {
          "type": "inline_richtext",
          "id": "heading",
          "default": "Heading",
          "label": "t:sections.footer.blocks.text.settings.heading.label"
        },
        {
          "type": "richtext",
          "id": "subtext",
          "default": "<p>Share contact information, store details, and brand content with your customers.</p>",
          "label": "t:sections.footer.blocks.text.settings.subtext.label"
        }
      ]
    },
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "range",
          "id": "image_width",
          "min": 50,
          "max": 550,
          "step": 5,
          "unit": "px",
          "label": "Image width",
          "default": 100
        },
        {
          "type": "select",
          "id": "alignment",
          "label": "Image alignment on large screen",
          "options": [
            {
              "value": "",
              "label": "Left"
            },
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "center"
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "header",
      "content": "t:sections.footer.settings.header__2.content",
      "info": "t:sections.footer.settings.header__2.info"
    },
    {
      "type": "checkbox",
      "id": "show_social",
      "default": true,
      "label": "t:sections.footer.settings.show_social.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.spacing"
    },
    {
      "type": "range",
      "id": "margin_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.footer.settings.margin_top.label",
      "default": 0
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "link_list"
      },
      {
        "type": "text"
      }
    ]
  }
}
{% endschema %}

順番に解説していきます。

1.ソーシャルアイコンの評価

  {%- liquid
    assign has_social_icons = true
    if settings.social_facebook_link == blank and settings.social_instagram_link == blank and settings.social_youtube_link == blank and settings.social_tiktok_link == blank and settings.social_twitter_link == blank and settings.social_pinterest_link == blank and settings.social_snapchat_link == blank and settings.social_tumblr_link == blank and settings.social_vimeo_link == blank
      assign has_social_icons = false
    endif
  -%}

ソーシャルアイコンの有無を判定します。
各SNSアイコンのリンクが空である場合、「has_social_icons」変数にfalseを割り当てます。この変数は、SNSアイコンが存在するかどうかを示すために使用されます。
以下の画像のように、ShopifyのSNSリンクは「テーマ設定」> 「SNS」から設定できます。
SNSリンクの設定SNSリンクの設定

2.条件分岐

  {%- if section.blocks.size > 0
   or section.settings.show_social and has_social_icons == true
 -%}

以下のいずれかの条件が当てはまっていたら、フッターを表示させる仕様になっております。

  • セクション内に1つ以上のブロックがある場合（section.blocks.size > 0）、
    or
  • セクションの設定で「show_social」が有効であり、かつ変数「has_social_icons」がtrueである場合

3.ソーシャルアイコンの表示

<div class="footer-left_item social-icons">
 {%- if section.settings.show_social and has_social_icons -%}
   {%- render 'social-icons', class: 'footer__list-social-icons' -%}
 {%- endif -%}
</div>

SNSを表示させるかどうかのチェックボックス「show_social」がチェックされており('true')
前の部分で判定した「has_social_icons」が'true'である場合に条件が成立します。

条件が成立したら、renderタグを使用して'social-icons'のスニペットを呼び出しています。
(templates/social-icons.liquidのファイルを呼び出しております。)

4.フッターメニューの表示

次に、フッターメニューを表示させるコードの解説です。

   <div class="footer-right">
     <ul class="footer-menu">
       {% for link in linklists.footer-menu01.links %}
         <li class="footer-menu_list"><a href="{{ link.url }}">{{ link.title }}</a></li>
       {% endfor %}
     </ul>
     <ul class="footer-menu">
       {% for link in linklists.footer-menu02.links %}
         <li class="footer-menu_list"><a href="{{ link.url }}">{{ link.title }}</a></li>
       {% endfor %}
     </ul>
   </div>

ポイントは以下のコードです。

 {% for link in linklists.footer-menu01.links %}
        <li class="footer-menu_list"><a href="{{ link.url }}">{{ link.title }}</a></li>
      {% endfor %}

footer-menu01という名前のリンクリストからリンクを抽出して表示するためのものです。
Liquidのforループを使用して、footer-menu01の各リンクに対して繰り返し処理が行われます。各リンクはli要素の中にあり、その中にはリンクのURLとタイトルが表示されています。
この「footer-menu01」は、「メニュー作成」のセクション時に設定したメニューのハンドル名です。
以下の画像の右側のところですね！
メニューを追加メニュー追加の詳細画面(Footer Menu1)

同様に、「footer-menu02」の方も以下のように実装し、リンクとタイトルを表示させております。

      {% for link in linklists.footer-menu02.links %}
        <li class="footer-menu_list"><a href="{{ link.url }}">{{ link.title }}</a></li>
      {% endfor %}

5.CSSの読み込み

以下のコードで、「section-footer-custom.css」を読み込んでおります。

{{ 'section-footer-custom.css' | asset_url | stylesheet_tag }}

「assets/section-footer-custom.css」を作成し、以下のコードを貼り付けてください。
CSSなので解説は省略します。

section-footer-custom.css
.footer .footer-contents{
    padding: 0 20px;
    width: 100%;
    text-align: center;
}   
@media screen and (min-width: 768px) {
    .footer .footer-contents{
        padding: 0px 140px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        text-align: auto;
    }
}

.footer-contents .footer-left .footer-left_logo{
    display: inline-block;
    height: 35px;
}
@media screen and (min-width: 768px) {
    .footer-contents .footer-left .footer-left_logo{
        height: 28px;
    }
}
.footer-contents .footer-left .footer-left_logoImg{
    height: 35px;
    object-fit: cover;
}
@media screen and (min-width: 768px) {
    .footer-contents .footer-left .footer-left_logoImg{
        height: 28px;
    }
}

.list-social{
    justify-content: center;
}
.footer-contents .footer-right{
    display: none;
}   
@media screen and (min-width: 768px) {
    .footer-contents .footer-right{
        display: flex;
        justify-content: space-between;
        align-items: top;
        flex-wrap: wrap;
        gap  : 40px;
    }   
    .footer-contents .footer-right .footer-menu{
        list-style: none;
        font-size: 14px;
        line-height: 2.2;
    }
    .footer-contents .footer-right a{
        text-decoration: none;
        color: #252525;
    }
}

.footer-contents .footer__content-bottom{
    border-top: none!important;
}
.footer__content-bottom-wrapper{
    justify-content: center;
    margin-top: 60px;
    margin-bottom: 90px;
    font-size: 12px;
}
@media screen and (min-width: 768px) {
    .footer__content-bottom-wrapper{
        margin-bottom: 120px;
    }
}
.footer-left_item.social-icons{
    padding: 20px 0;
}
.list-social__item .icon{
    width: 3rem;
    height: 3rem;
}
.list-social__link{
    padding: 0.3rem;
}

最後に、、、
少しでも参考になれば記事にイイねしていただけますと嬉しいです。

Webサイト & ECサイト構築のご相談・ご依頼はTwitterのDMまでお願いいたします！
お待ちしております^^
https://twitter.com/pei_traveler

Discussion