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"
},
※上記はほかのサイトから引用したもので、恥ずかしながら意味を理解できておりません…
ご教示いただけますと幸いです。
何卒よろしくお願いいたします。
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024