オンラインストア用に独自のアナウンスバーをコーディングする方法

公開: 2021-08-15
注：ストアのコードに変更を加える前に、必ずサイトをバックアップしてください。

このようなバナーを見たことがあると思います。 それらは通常、Webサイトの最上部にあります。

ウェブサイトアナウンスバーの例

私は実際にあなたがそれらをいつも見ているに違いない、そして正当な理由がある。 アナウンスバーは、重要な情報、タイムリーな情報、重要な情報を顧客に伝えるためのシンプルでありながら非常に効果的な方法です。

販売、ソーシャルメディアアカウントへのリンク、配送プロモーション（送料無料など）、制作の遅延、新しいブログ投稿のお知らせなどを発表するのに最適な場所です。 時には商人はそれらを電子メールのキャプチャに使用することさえあります。

自分で構築するコツをつかんだら、それをカスタマイズして、ほぼすべてのことを実行できます。 最良の部分は、ストアにアプリをインストールするためにアプリをインストールする必要がないことです。

このチュートリアルでは、カスタムのShopifyテーマセクションを使用してこのアナウンスバーを作成します。

アナウンスバーをShopifyにする方法
ただし、開始する前に、必要なすべてのものを計画する必要があります。

マッピングを取得しましょう！

どのような機能が必要ですか？

必要な、または必要なすべての機能について考えるのに少し時間がかかることが重要です。 このチュートリアルでは、アナウンスバーセクション用に次の編集可能な機能を構築します。

  • テキスト（太字や斜体などの基本的なスタイルでテキストやリンクを追加する機能）
  • 文字サイズ
  • テキストの色
  • 背景色
  • ボーダの色
  • ボーダーサイズ
  • パディング

セクションファイルを作成する

Shopifyダッシュボードにログインし、[オンラインストア] > [テーマ]に移動します。

Shopifyテーマのカスタマイズチュートリアル

広告

[アクション]というラベルの付いたドロップダウンメニューをクリックし、[コードの編集]をクリックします。

Shopifyアナウンスバーのカスタマイズチュートリアル

ファイルブラウザペインで、 Sectionsというフォルダを探し、それを展開します。 [新しいセクションを追加]リンクをクリックします。

Shopifyでアナウンスバーをカスタマイズする

新しいテーマセクションのアナウンスバーに名前を付けましょう。

アナウンスバーの追加

ファイルが作成されると、次の事前入力された定型セクションコードが表示されます。

{％スキーマ％}
 {{
 「名前」：「セクション名」、
 "設定"： []
 }
 {％endschema％}

 {％スタイルシート％}
 {％endstylesheet％}

 {％javascript％}
 {％endjavascript％}

これは紛らわしいように見えるかもしれませんが、このチュートリアルの終わりまでには、より理にかなっています。 スキーマタグは、新しいセクションに関するすべての情報を保存する場所です。

コンテンツスキーマの詳細については、Shopifyの包括的なドキュメントをご覧ください。

次に、アナウンスバーをWebサイトに表示する場所に、このファイル/コードへの参照を配置する必要があります。 ウェブサイトの一番上に配置しましょう。

レイアウトフォルダのファイルブラウザにあるtheme.liquidファイルを開きます。

広告

ShopifyLiquidテーマのカスタマイズチュートリアル

開始<body>タグを探して、次のように真下に配置します。

<body class = “ template-{{template | スプリット： '。' | 最初の}}” >
 {％セクション 'announcement_bar'％}

入門

次に、セクションファイルに、アナウンスのクラスを持つdivを追加しましょう。 アナウンスバーに表示するテキストは、このdiv内にラップされます。

<div class = “ announcement” > {{section.settings.announcement_text}} </ div>

div内に表示される、奇妙に見える可能性のあるコードは、「リキッドタグ」と呼ばれます。 液体タグは「中括弧」で囲まれています。 これは、 announcement_textというIDを参照します。これについては、後ほど説明します。

しかし、最初に、入力設定

入力設定は、マーチャントがストアのテーマ設定を構成するために使用します。 マーチャントは、テーマエディターのサイドバーから設定にアクセスします。」 –Shopify

入力設定は、それらすべての利用方法を理解すれば、素晴らしく強力です。 幸いなことに、Shopifyはドキュメントにそれぞれの例を示しています。これらはすべてここにあります。

{％schema％}タグ内のすべてを削除し、次のように置き換えます。 これまでの完全なコードは次のようになります。

<div class = “ announcement” > {{section.settings.announcement_text}} </ div>

{％スキーマ％}
 {{
 「名前」：「アナウンスバー」、
 "設定"： [
 {{
 「タイプ」：「チェックボックス」、
 「id」：「announcement_visibility」、
 「ラベル」：「可視性（オン/オフ）」、
 「デフォルト」：true
 }
 ]
 }
 {％endschema％}

（スタイルシートとJavaScriptタグも削除しました、参考までに）

広告

チェックボックスの入力タイプを選択したのは、セクションの上部にチェックボックスを表示して、バーのオンとオフを切り替えられるようにするためです。

アナウンスバーの設定

チェックボックスを設定したので、コンテナdiv（少し前に作成したもの）を可視性設定を利用した液体タグでラップする必要があります。

アナウンスメントdivを「if」ステートメントでラップします。

{％if section.settings.announcement_visibility％}

<div class = “ announcement” > {{section.settings.announcement_text}} </ div>
 {％endif％}


 {％スキーマ％}
 {{
 「名前」：「アナウンスバー」、
 "設定"： [
 {{
 「タイプ」：「チェックボックス」、
 「id」：「announcement_visibility」、
 「ラベル」：「可視性（オン/オフ）」、
 「デフォルト」：true
 }
 ]
 }
 {％endschema％}

追加した新しい「if」ステートメントは、 announcement_visibilityの一致するIDの設定を調べます。 デフォルトをtrueに設定したため、バーが表示されます。

残りの設定を追加しましょう

スキーマタグ間のコードを次のように置き換えます。

{％スキーマ％}
 {{
 「名前」：「アナウンスバー」、
 "設定"： [
 {{
 「タイプ」：「チェックボックス」、
 「id」：「announcement_visibility」、
 「ラベル」：「可視性（オン/オフ）」、
 「デフォルト」：true
 }、
 {{
 「タイプ」：「リッチテキスト」、
 「id」：「announcement_text」、
 「ラベル」：「テキスト」、
 「デフォルト」：「<P>デフォルト<em>のリッチテキスト</ em>の<a href= \ "https://example.com/\">コンテンツ</a>の</ P>「
 }、
 {{
 「タイプ」：「範囲」、
 「id」：「announcement_text_size」、
 「最小」：12、
 「最大」：24、
 "ステップ1、
 「ユニット」：「px」、
 「ラベル」：「フォントサイズ」、
 「デフォルト」：16
 }、
 {{
 「タイプ」：「色」、
 「id」：「announcement_text_color」、
 「ラベル」：「テキストの色」、
 「デフォルト」：「＃000000」
 }、
 {{
 「タイプ」：「色」、
 「id」：「announcement_bg_color」、
 「ラベル」：「背景色」、
 「デフォルト」：「＃aaa」
 }、
 {{
 「タイプ」：「範囲」、
 「id」：「announcement_border_size」、
 「最小」：0、
 「最大」：10
 "ステップ1、
 「ユニット」：「px」、
 「ラベル」：「境界線のサイズ」、
 「デフォルト」：4
 }、
 {{
 「タイプ」：「色」、
 「id」：「announcement_border_color」、
 「ラベル」：「境界線の色」、
 「デフォルト」：「＃333333」
 }、
 {{
 「タイプ」：「範囲」、
 「id」：「announcement_padding」、
 「最小」：0、
 「最大」：20
 "ステップ1、
 「ユニット」：「px」、
 「ラベル」：「パディング」、
 「デフォルト」：5
 }、
 {{
 「タイプ」：「選択」、
 「id」：「announcement_text_align」、
 「ラベル」：「テキストの配置」、
 「オプション」：[
 {「値」：「左」、「ラベル」：「左」}、
 {“ value”：“ center”、“ label”：“ center”}、
 {「値」：「右」、「ラベル」：「右」}
 ]、
 「デフォルト」：「センター」
 }
 ]

}
 {％endschema％}

ここで開梱するものはたくさんありますが、一度コツをつかめば簡単に把握できます。 設定して設定していきましょう。

広告

リッチテキスト

リッチテキストは、Shopifyが述べているように、本当に役立つのに十分なフォーマットを提供します。「リッチテキスト設定を使用して、基本的なフォーマットのテキストコンテンツを許可できます。 サポートされているフォーマットオプションは、太字、斜体、下線、リンク、および段落です。」 （ソース）

フォントサイズ、パディング、およびボーダーサイズの範囲スライダー

範囲スライダーを使用してテキストサイズを制御しました。 最小サイズと最大サイズ、およびデフォルトを選択できます。 私はpxを使用することを選択しましたが、 emまたは好きなものを使用できます。 次に、この同じ設定のセットを再利用して、アナウンスバーの下の境界線のサイズとパディングを制御します。

テキストと背景色

色設定タイプを使用して、アナウンスバー自体の背景色とテキストの色を構成しました。

選択ドロップダウン

設定の締めくくりとして、テキストの配置にドロップダウンタイプを使用しました。

プリセット（オプション）

プリセットがある場合、セクションはテーマエディターに自動的に表示され、動的セクションになります。 これは、テーマが動的セクションに対して有効になっている場合、ホームページ上でその場所を（上または下に）移動できることを意味します。

CSS

最後に行う必要があるのは、選択したすべてのスタイル構成を取得し、それらをCSSに変換することです。 可視性の「if」ステートメントを開いた直後に、次のスタイルタグを追加してください。

<スタイル>
 。発表 {
 font-size：{{section.settings.announcement_text_size}} px;
 背景色：{{section.settings.announcement_bg_color}};
 border-bottom：{{section.settings.announcement_border_size}} px solid {{section.settings.announcement_border_color}};
 パディング：{{section.settings.announcement_padding}} px;
 text-align：{{section.settings.announcement_text_align}};
 }
 .announcement p {color：{{section.settings.announcement_text_color}};}
 .announcement a {text-decoration：underline;}
 .announcement a：hover {text-decoration：none;}
 </ style>

これは、この旅の始めに作成したアナウンスラッパー要素のスタイルを設定する場所です。 同じ液体タグを使用して、各設定タイプのIDを参照します。 スキーマでIDを参照するときは、その前にsection.settingsを付ける必要があることを覚えておくことが重要です。

最終結果

Shopifyアナウンスバーの設定

Shopifyアナウンスバーのカスタマイズ

そして、そのように、最初のテーマセクションをコーディングしました。 これで、次のセールについて顧客に簡単に警告できます。

これに追加することを検討できることは他にもたくさんあります。 どのページタイプに表示されるかに関する条件文（ホームページのみなど）。

広告

このチュートリアルで学んだこととShopifyの広範なドキュメントを組み合わせることで、テーマセクションを構築して、注目の商品リスト、注目の商品コレクションなど、ほぼすべてのことを実行できます。

戻ってこれをもう一度読み、ドキュメントをチェックして作業を開始してください！ 開発者を必要とせずに、自分でテーマを大幅に改善できます。

ここで完全なコードを参照してください