Dawn 11.0.0 ヘッダーロゴをSVGで出力する方法

[猫好き初心者]

Shopify初心者です。

Dawn 11.0.0 のテーマを使用し、サイトヘッダーのロゴをオンライン>カスタマイズから画像アップするのではなく、SVGで出力したいと考えております。

新しく「svg-logo.liquid」という名前のスニペットを作成してSVGデータを書くところまでは完了したのですが、header.liquidのどこにどのように{% render 'svg-logo' %}を置くとヘッダーロゴとして反映されるのかがわからず困っております。

※外部サイトを読み漁った結果、以下でヘッダーロゴのSVG出力ができるのかなと考えた次第です。

・新しくスニペットを作ってSVGの内容を記載する

・header.liquidに該当スニペットにリンクする記載をする

そもそも考え方から間違っているようでしたらそこも含めてご教示いただけますと幸いです。

何卒よろしくお願いいたします。

[Qcoltd · Accepted solution]

@猫好き初心者様

ご質問いただいているsvg-logo.liquidの表示方法ですが、header.liquidに記述するコードはご記載いただいている{% render 'svg-logo' %}で問題ないと思います。

header.liquid内の反映箇所については、PCのロゴ位置により2通りの可能性がありますので、それぞれ記載させていただきます。

ロゴをクリックした際のリンク先についてはDawnテーマのリンクをそのまま継承となります。

デスクトップのロゴ位置が中央を選択している場合

1. header.liquid内で『{%- if section.settings.logo_position == 'middle-center' -%}』を検索してください。
   ※デフォルトheader.liquidで有れば210行目あたりにあるかと思います。
2. 1の5行下にある『{%- if settings.logo != blank -%}』から『{%- endif -%}』までを『{% render 'svg-logo' %}』に変更
   下記画像で選択されているエリア
   

 

デスクトップのロゴ位置が中央以外を選択している場合

1. header.liquid内で『{%- if section.settings.logo_position != 'middle-center' -%}』を検索してください。
   ※デフォルトheader.liquidで有れば170行目あたりにあるかと思います。
2. 1の5行下にある『{%- if settings.logo != blank -%}』から『{%- endif -%}』までを『{% render 'svg-logo' %}』に変更
   下記画像で選択されているエリア
   

以上で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"
},

※上記はほかのサイトから引用したもので、恥ずかしながら意味を理解できておりません…

ご教示いただけますと幸いです。

何卒よろしくお願いいたします。