Liquid、JavaScriptなどに関する質問
「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リンクアイコンをヘッダー内メインメニューに出力したい
ご教示いただきたくよろしくお願い致します。
解決済! ベストソリューションを見る。
成功
頂いているコードの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で調整ください)
ご参考になりましたら幸いです。
成功
頂いているコードの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で調整ください)
ご参考になりましたら幸いです。
返信が大変遅くなり申し訳ありません!
ご教示いただいた内容で記載したところ無事表示できました。
希望通りの実装ができて感動しております。
ありがとうございました!
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024