FROM CACHE - jp_header
解決済

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

猫好き初心者
Shopify Partner
12 0 0

Shopify初心者です。

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

 

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

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

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

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

 

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

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

1 件の受理された解決策

Qcoltd
Shopify Partner
1051 429 417

成功

@猫好き初心者

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

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

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

 

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

Qcoltd_0-1692691920055.png

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

 

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

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

 

以上でSVGファイルが表示されるかと思いますので、サイズ等を調整いただければと思います。

 

ご参考まで
(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1051 429 417

成功

@猫好き初心者

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

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

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

 

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

Qcoltd_0-1692691920055.png

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

 

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

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

 

以上でSVGファイルが表示されるかと思いますので、サイズ等を調整いただければと思います。

 

ご参考まで
(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
猫好き初心者
Shopify Partner
12 0 0

わかりやすくご説明下さりありがとうございました。

無事設定できました。

 

追加で恐縮ですが、ヘッダーロゴのサイズをレスポンシブで設定したい場合には、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"
},

 

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

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

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