Liquid、JavaScriptなどに関する質問
Shopify初心者です。
Dawn 11.0.0 のテーマを使用し、サイトヘッダーのロゴをオンライン>カスタマイズから画像アップするのではなく、SVGで出力したいと考えております。
新しく「svg-logo.liquid」という名前のスニペットを作成してSVGデータを書くところまでは完了したのですが、header.liquidのどこにどのように{% render 'svg-logo' %}を置くとヘッダーロゴとして反映されるのかがわからず困っております。
※外部サイトを読み漁った結果、以下でヘッダーロゴのSVG出力ができるのかなと考えた次第です。
・新しくスニペットを作ってSVGの内容を記載する
・header.liquidに該当スニペットにリンクする記載をする
そもそも考え方から間違っているようでしたらそこも含めてご教示いただけますと幸いです。
何卒よろしくお願いいたします。
解決済! ベストソリューションを見る。
成功
ご質問いただいているsvg-logo.liquidの表示方法ですが、header.liquidに記述するコードはご記載いただいている{% render 'svg-logo' %}で問題ないと思います。
header.liquid内の反映箇所については、PCのロゴ位置により2通りの可能性がありますので、それぞれ記載させていただきます。
ロゴをクリックした際のリンク先についてはDawnテーマのリンクをそのまま継承となります。
以上でSVGファイルが表示されるかと思いますので、サイズ等を調整いただければと思います。
ご参考まで
(キュー小坂)
成功
ご質問いただいているsvg-logo.liquidの表示方法ですが、header.liquidに記述するコードはご記載いただいている{% render 'svg-logo' %}で問題ないと思います。
header.liquid内の反映箇所については、PCのロゴ位置により2通りの可能性がありますので、それぞれ記載させていただきます。
ロゴをクリックした際のリンク先についてはDawnテーマのリンクをそのまま継承となります。
以上でSVGファイルが表示されるかと思いますので、サイズ等を調整いただければと思います。
ご参考まで
(キュー小坂)
わかりやすくご説明下さりありがとうございました。
無事設定できました。
追加で恐縮ですが、ヘッダーロゴのサイズをレスポンシブで設定したい場合には、SVGを記載したスニペット内にクラスを振って、header.liquid内に↓こんな感じの新たにサイズを指定する必要があるということでしょうか?
※現状、PCとSPが同じサイズで表示されてしまっております。
{
"type": "range",
"id": "logo_width",
"min": 50,
"max": 250,
"step": 10,
"default": 100,
"unit": "t:sections.header.settings.logo_width.unit",
"label": "t:sections.header.settings.logo_width.label"
},
※上記はほかのサイトから引用したもので、恥ずかしながら意味を理解できておりません…
ご教示いただけますと幸いです。
何卒よろしくお願いいたします。
いつもShopifyをご利用いただき、ありがとうございます。 Shopifyは、皆様の日本語での利用体験の向上に努めております。さらなる改善のために皆様のご意見をお寄せい...
By JasonH May 9, 2025Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025