Shopifyのテーマエディターの解説(告知バー)

Shopifyのテーマエディターの解説をします。

頻繁に使われる「Dawn」というテーマを元に解説していきます。

告知バー

告知バーというのは 今、𓏸𓏸キャンペーン中ですよーといったようにお知らせしたい時に使われるバーになります。

主にキャンペーン商品について入力すると良いということになりますね。

↑画像1

告知バーは画像1のように青いブロックで囲われているものを指します。

「Welcome to our store」と書かれているところになります。

↑画像2

画像1の左側のメニューの「告知バー」をクリックすると、画像2のように左側メニューに表示されます。

現在では最近、機能として追加された「カスタムcss」にて編集することができます。

↑画像3

試しに、pセレクタの中に「font-size:50px」と記入します。

この「Welcome to our store」はpタグで囲われている扱いになっているということですね。

試しに文字色も変えてみましょう。

↑画像4

pセレクタの中に、「color:blue;」と追加で記入し、青色に変更してみました。

画像4の左側メニューの「< 告知バー」をクリックし、下の画面に戻ってください。

左側メニュー欄の[]Welcome to our store をクリックすると、↓の画面に移動します。

↑画像5

この画像5の画面にて告知バーの文字を変更したり、背景の配色を変えることができます。

この「Welcome to our store」という文字を変更するには画像5のところの「テキスト」という枠の中の文字を変えることで変更できます。

↑画像6

テキストアラインメントは画像6のように文字を左寄せにするのか、中央寄せにするのか、右寄せにするのか選択することができます。

↑画像7

左メニューの「配色」をクリックすると、画像8のように表示されます。

↑画像8

配色のパターンが5種類ありますね。

パターンごとの配色の違いは以下の画像の通りです。

↑アクセント1

↑アクセント2

↑背景1

↑背景2

↑反転

今回は背景色のデフォルトが白なので、アクセント1の時と反転の時は色が変わらず黒になっています。

背景1と背景2の違いですが、背景2の方が微妙に灰色になっています。

↑画像9

画像9のリンクをクリックすると、画像10のように表示されます。

↑画像10

これらは、Shopifyの管理画面にて設定したものを表示させるページに移行させたい場合に選択するものです。

サイトのURLを直接入力してリンクを貼ることも出来ます。

ここは告知バーであるため、
例えば冬物衣服のキャンペーンを行っている場合は冬物衣服が一覧で表示させるようにしたいですね。

そうしたい場合は事前に管理画面にて冬物衣服の商品を1つ1つ、コレクションにて登録しておき、

画像10にてコレクションの中の冬物衣服を選択します。

そして、サイト来訪者が告知バーをクリックすることで、冬物衣服の一覧ページが表示される といった仕組みになっています。

↑画像11

最後にこの告知バーのブロック自体を消すには、

画像11の左下の赤丸で囲まれている「ブロックを削除する」をクリックすることで消すことが出来ます。

↑画像12

告知バーを消すことが出来ました。