ドキュメントCommerceはじめに

ストアフロントのブランディング

Last update: Fri May 17 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • トピック：

作成対象：

  • 初心者
  • 中級
  • 管理者
  • リーダー
  • ユーザー

最初にあなたがやりたいことの 1 つは次のとおりです ロゴの変更 ヘッダー内および お気に入りのアップロード ブラウザーの場合。 次に、以下を行います ようこそメッセージを追加 および 著作権表示の更新 フッターで。 これらのタスクは、すぐに対処できるシンプルなデザイン要素です。 ストアが開発中の間に、次の操作を実行できます デモの保存に関する通知を表示を選択し、起動する準備が整ったら削除します。

ストアフロントブランディング要素

ロゴをアップロード

ヘッダー内のロゴのサイズと場所は、ストアテーマによって決まります。 ロゴは、GIF、PNG またはJPG（JPEG）ファイルタイプとして保存し、ストアの管理者からアップロードできます。

ヘッダー内のロゴ

ロゴ画像はサーバー上の次の場所にあります。 という名前の任意の画像ファイル logo.svg は、デフォルトのテーマロゴとして使用されます。

フルパス - app/design/frontend/[vendor]/[theme]/web/images/logo.svg

相対パス - images/logo.svg

テーマで使用されるロゴやその他の画像のサイズがわからない場合は、ブラウザーでページを開き、画像を右クリックして、要素を調べます。

NOTE
ヘッダーのロゴに加えて、のロゴも表示されます メールテンプレート およびに PDF請求書 およびその他の営業文書 メールテンプレートと請求書に使用されるロゴは、サイズの要件が異なり、別々にアップロードする必要があります。

サポートされるロゴファイル形式：

ファイル形式
説明
PNG
（Portable Network Graphics） GIFフォーマットに代わるこの新しいフォーマットは、最大 1600 万色（24 ビット）をサポートします。 可逆圧縮形式では、テキストは鮮明になるが、一部の形式よりもファイルサイズが大きい、高品質のビットマップ画像が生成されます。 PNG 形式は、透明レイヤーをサポートし、オンライン表示とストリーミング用に設計されています。
GIF
（Graphics Interchange Format）広くサポートされている古いビットマップ形式で、256 色（8 ビット）に制限されています。 GIFフォーマットは、単純なアニメーションと透明レイヤーをサポートしています。
JPG（JPEG）
（Joint Photographic Expert Group）ほとんどのデジタルカメラで使用される圧縮ビットマップ形式。 非可逆圧縮によってデータがやや失われますが、テキストのぼやけた点として目立つ場合があります。

  1. 日 Admin サイドバー、に移動 Content > Design>Configuration.

    デザイン設定ページ {width="700"}

  2. 設定するストア表示を見つけて、クリックします Edit が含まれる Action ​列。

  3. を展開 展開セレクター この Header セクション。

    ヘッダー設定 {width="600"}

  4. 新しいロゴをアップロードするには、をクリックします Upload そして、システムからファイルを選択します。

  5. を入力 Logo Image Width および Logo Image Height ピクセル単位。

  6. の場合 Logo Image Alt ​で、画像の上にマウスポインターが置かれたときに表示されるテキストを入力します。

  7. 完了したら、 Save Configuration.

お気に入りの追加

Favicon を短くする お気に入りのアイコン 各ブラウザーページのタブにある小さなアイコンを指します。 ブラウザーによっては、favicon がアドレスバーの URL の直前にも表示されます。

favicon は通常、16 x 16 ピクセルまたは 32 x 32 ピクセルのサイズです。 Commerce は ICO、PNG、APNG、GIF、JPG（JPEG）のファイルタイプを受け入れますが、すべてのブラウザーがこれらのフォーマットをサポートしているわけではありません。 favicon で最も広くサポートされているファイル形式は ICO です。 他の画像ファイルタイプを使用することもできますが、一部のブラウザーではその形式がサポートされていない場合があります。 ICO 画像を生成したり、画像をその形式に変換したりできる無料のツールがオンラインで多数用意されています。

ブラウザータブの Favicon

Commerce では、favicon として以下のファイル形式がサポートされています。

ファイル形式
説明
ICO
この画像ファイル形式は、小さいサイズのコンピューターアイコン画像用に設計されています。 主にMicrosoft® Windows OS で使用される ICO フォーマットは、最大 256 x 256 ピクセルと 8 ビットの透明度を持つ 1600 万色（24 ビット）の画像を含めることができます。
PNG
（Portable Network Graphics） GIFフォーマットに代わるこの新しいフォーマットは、最大 1600 万色（24 ビット）をサポートします。 可逆圧縮形式では、テキストは鮮明になるが、一部の形式よりもファイルサイズが大きい、高品質のビットマップ画像が生成されます。 PNG 形式は、透明レイヤーをサポートし、オンライン表示とストリーミング用に設計されています。
APNG
（Animated Portable Network Graphics）単純なアニメーションをサポートする PNG に似たファイル形式。
GIF
（Graphics Interchange Format）広くサポートされている古いビットマップ形式で、256 色（8 ビット）に制限されています。 GIFフォーマットは、単純なアニメーションと透明レイヤーをサポートしています。
JPG（JPEG）
（Joint Photographic Expert Group）ほとんどのデジタルカメラで使用される圧縮ビットマップ形式。 非可逆圧縮によってデータがやや失われますが、テキストのぼやけた点として目立つ場合があります。

手順 1:favicon の作成

  1. 任意の画像エディターを使用して、ロゴの 16 x 16 または 32 x 32 のグラフィック画像を作成します。

  2. （オプション）使用可能なオンラインツールのいずれかを使用して、ファイルを.ico 形式に変換し、コンピューターに保存します。

手順 2:favicon をストアにアップロードする

  1. 日 Admin サイドバー、に移動 Content > Design>Configuration.

  2. グリッドで、設定するストア表示を見つけて、クリックします Edit が含まれる Action ​列。

  3. 次の下 Other Settings、を展開 展開セレクター この​ HTML Head ​セクション。

    HTMLヘッドの設定 {width="600"}

  4. 現在の favicon を削除するには、 削除 （ ごみ箱アイコン ）アイコンをクリックします。

  5. クリック Upload 準備した favicon ファイルを開きます。

    Uploaded favicon {width="400"}

  6. 完了したら、 Save Configuration.

手順 3：キャッシュを更新

  1. キャッシュを更新するように求められたら、 Cache Management ワークスペースの上部にあるメッセージのリンク。

  2. リストで、 Page Cache マークされているチェックボックス Invalidated.

  3. を設定 Actions 対象： Refresh をクリックして、 Submit.

  4. 新しいお気に入りを表示するには、ストアフロントに戻ってブラウザーを更新します。

ようこそメッセージの変更

ヘッダーのウェルカムメッセージが展開され、ログインした顧客の名前が表示されます。 ストアを起動する前に、必ずデフォルトを変更してください ようこそ 各ストア表示のテキスト。

ようこそメッセージ

  1. 日 Admin サイドバー、に移動 Content > Design>Configuration.

  2. グリッドで、設定するストア表示を見つけて、クリックします Edit が含まれる Action ​列。

  3. 次の下 Other Settings、を展開 展開セレクター この​ Header ​セクション。

  4. の場合 Welcome Text ​で、ストアのヘッダーに表示するようこそメッセージのテキストを入力します。

    ヘッダー設定 {width="600"}

  5. 完了したら、 Save Configuration.

  6. ページキャッシュを更新するよう求められたら、 Cache Management ワークスペースの上部にあるリンクをクリックし、指示に従ってキャッシュを更新します。

著作権表示の変更

ストアの各ページのフッターには著作権表示が表示されます。 ベストプラクティスとして、著作権表示には現在の年を含め、自社をサイト上のコンテンツの法的所有者として識別する必要があります。

著作権表示の例

この © 文字コードは、次の例に示すように、著作権記号を挿入するために使用されます。

  • 長い形式の例

    Copyright © 2013-present Luma, Inc. All rights reserved.

  • 短い形式の例

    © 2021 Luma, Inc. All rights reserved.

著作権表示を更新するには：

  1. 日 Admin サイドバー、に移動 Content > Design>Configuration.

  2. グリッドで、設定するストア表示を見つけて、クリックします Edit が含まれる Action ​列。

  3. 次の下 その他の設定、を展開 展開セレクター この Footer セクション。

    フッターデザイン設定 {width="600"}

  4. の場合 Copyright ​を選択し、各ページのフッターに表示する著作権表示を入力します。

    の使用 © 著作権記号を挿入するための文字コード。

  5. 完了したら、 Save Configuration.

デモ用ストア通知の設定

店舗がオンラインでも建設中の場合は、ページの上部に店舗デモ通知を表示して、店舗がまだ営業していないことを知らせることができます。 準備ができたら 運用開始 ​メッセージを削除するだけです。 窓にぶら下がっている看板を反転させることに似ています クローズ 対象： 開く. デモ通知の形式は、ストアのテーマによって決まります。

ストアフロントデモのお知らせ

  1. 日 Admin サイドバー、に移動 Content > Design>Configuration.

  2. グリッドで、設定するストア表示を見つけて、クリックします Edit が含まれる Action ​列。

  3. 次の下 Other Settings、を展開 展開セレクター この​ HTML Head ​セクション。

    HTMLヘッド {width="600"}

  4. 一番下までスクロールし、 Display Demo Store Notice ご希望に合わせてください。

  5. 完了したら、 Save Configuration.

  6. キャッシュの更新を求めるメッセージが表示されたら、 Cache Management システムメッセージで、手順に従ってキャッシュを更新します。

recommendation-more-help
31746fd0-1ead-45b5-9192-1aaf582c5f66