FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

Re: snsアイコンをヘッダーに表示したい

解決済

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

みかん
Shopify Partner
11 0 1

「Debut」テーマを使用しています。

 

カスタマイズ→テーマ設定→sns

上記で設定した項目はfooterで表示されますが、

それをheader内のメインメニューにも表示したいです。

 

footer内のsnsアイコン出力コード(と思われる)箇所を

header内に記載したのですが表示されません。

 

——————————————————————

【コード】

  <div>

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

    {%- if social_icons -%}

      <ul class="list--inline site-footer__social-icons social-icons site-footer__icon-list">

        {%- 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 -%}

            <li class="social-icons__item">

              <a class="social-icons__link" href="{{ settings[social_link] | escape }}" aria-describedby="a11y-external-message">

                {%- include icon_link -%}

                <span class="icon__fallback-text">{{ social }}</span>

              </a>

            </li>

          {%- endif -%}

        {%- endfor -%}

 

        {%- if request.page_type == 'blog' or request.page_type == 'article' -%}

          <li>

            <a class="social-icons__link" href="{{ shop.url }}{{ blog.url }}.atom">

              {% include 'icon-rss' %}

              <span class="icon__fallback-text">RSS</span>

            </a>

          </li>

        {%- endif -%}

      </ul>

    {%- else -%}

    {%- endif -%}

 

  </div>

——————————————————————

 

↑こちらのコードを記載しました。

 

同じコードをfooterにも記載したところ

きちんとsnsアイコンが表示されますが、

headerには表示されません。

 

【やりたいこと】

カスタマイズ→テーマ設定→sns

上記で設定したsnsリンクアイコンをヘッダー内メインメニューに出力したい

 

ご教示いただきたくよろしくお願い致します。

1 件の受理された解決策

株式会社フルバランス
Shopify Partner
1627 578 753

成功

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

 

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

 

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

<ul class="list--inline site-footer__social-icons social-icons site-footer__icon-list">
  {%- 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 -%}
      <li class="social-icons__item">
        <a class="social-icons__link" href="{{ settings[social_link] | escape }}" aria-describedby="a11y-external-message">
          {%- include icon_link -%}
          <span class="icon__fallback-text">{{ social }}</span>
        </a>
      </li>
    {%- endif -%}
  {%- endfor -%}
</ul>

 

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

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

 

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

株式会社フルバランス
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『つくる人、売る人の成長と成功を最大化する。』 株式会社フルバランス

元の投稿で解決策を見る

2件の返信2

株式会社フルバランス
Shopify Partner
1627 578 753

成功

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

 

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

 

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

<ul class="list--inline site-footer__social-icons social-icons site-footer__icon-list">
  {%- 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 -%}
      <li class="social-icons__item">
        <a class="social-icons__link" href="{{ settings[social_link] | escape }}" aria-describedby="a11y-external-message">
          {%- include icon_link -%}
          <span class="icon__fallback-text">{{ social }}</span>
        </a>
      </li>
    {%- endif -%}
  {%- endfor -%}
</ul>

 

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

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

 

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

株式会社フルバランス
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『つくる人、売る人の成長と成功を最大化する。』 株式会社フルバランス
みかん
Shopify Partner
11 0 1

返信が大変遅くなり申し訳ありません!

 

ご教示いただいた内容で記載したところ無事表示できました。

希望通りの実装ができて感動しております。

 

ありがとうございました!