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 Mirai Dec 3, 2023すべてのShopifyアカウントはデフォルトではmyshopify.comのURLと関連付けられており、これはアカウント設定時に使用したビジネス名に基づいて作成されます。しかし、オ...
By Nina_13 Nov 26, 2023このトピックは英語版コミュニティの投稿:Shopify Web Pixel Manager Sandbox FAQの日本翻訳です。
By Mirai Nov 19, 2023