Snsアイコンをヘッダーに表示したい

日本語 ディスカッション 技術的なQ＆A
2

頂いているコードの3行目 {%- if social_icons -%} の部分がheader.liquid内に記述のない条件分岐のため、その中に記載をされている内容が出力をされていない状況かと思います。

SNSを表示するために必要な部分のみを抜粋すると、以下のようなコードになります。

{%- assign socials = "Facebook Twitter Pinterest Instagram Tumblr Snapchat YouTube Vimeo" | split: ' ' -%}

  {%- for social in socials -%}
    {%- assign social_link = social | prepend: 'social_' | append: '_link' | downcase -%}
    {%- assign icon_link = social | prepend: 'icon-' | downcase -%}
    {%- if settings[social_link] != blank -%}
      - {%- include icon_link -%}
            {{ social }}
        
      
    {%- endif -%}
  {%- endfor -%}

デフォルトのDebutテーマの「header.liquid」内に上記コードを追加したところ、アイコンが表示されることを確認いたしました。

サーチやアカウントのアイコンと並べて表示する場合、112行目 div class=“site-header__icons-wrapper”の下辺りに追加いただくと良いかと思います。（デザインは適宜CSSで調整ください）

ご参考になりましたら幸いです。