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で調整ください)
ご参考になりましたら幸いです。
返信が大変遅くなり申し訳ありません!
ご教示いただいた内容で記載したところ無事表示できました。
希望通りの実装ができて感動しております。
ありがとうございました!
Shopifyのチェックアウトは世界一コンバージョン率が高いチェックアウトです。2023年4月に実施された世界3大手マネジメントコンサルティング会社の共同調査によると、Sho...
By Minami_ Apr 11, 2024Shopifyのルーツ Shopifyは、スノーボードをオンラインで販売したいという夢を叶えるために2004年に誕生しました。当時は大企業だけがインターネットで販売す...
By JapanGuru Apr 7, 2024リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024