Storefront のテーマ

Storefront ブランド テーマは、デザイン エージェンシーが作成する最終的なデザインの例です。ブランドのルック アンド フィールを持ち、会社のストアフロント用に新しいブランド テーマを作成するときのインスピレーションとして使用できます。

たとえば、エクスペリエンス エディターでは、Storefront ブランド テーマを使用した登録レンダリングは次のようになります。

ライブ Storefront テンプレート サイトでは、Storefront ブランド テーマを使用した登録レンダリングは次のようになります。

新しい Commerce サイトを作成するときに、新しいテーマを作成することを選択できます。新しいテーマには、Commerce レンダリングのサポートが含まれます。このサポートにはレイアウトは含まれず、コンポーネントのスタイル設定は最小限です。カスタム テーマは、ワイヤーフレーム テーマとして使用することも、変更することもできます。

たとえば、スタイルが設定されていないカスタム テーマを使用した登録レンダリングは次のようになります。

このテーマには、すべてのコンポーネント Sass ファイルが含まれています (一部のファイルは空です)。このため、Creative Exchange を使用してテーマを簡単にエクスポートできます。

ワイヤーフレーム テーマは、通常、新しいサイトのデザインを開始するときに使用するテーマです。このテーマは、情報アーキテクチャ、ビジネス目標、ユーザー フロー、および主要な使いやすさの問題に取り組んでいるときに使用することが多く、このステージでは、社内レビューと反復のためにサイトを同僚と共有する場合があります。

Storefront モックアップ テーマは、テキスト、ラベル、画像などのコンテンツでサイトの更新を開始するときに使用するテーマのタイプの例です。

SXA を使用すると、コンテンツをプレゼンテーションから簡単に分離できるため、コンテンツとデザインに並行して取り組むことができます。つまり、情報アーキテクチャとユーザー フローが決まれば、すぐにサイトへのコンテンツの追加を開始できます。

Storefront モックアップ テーマはグレースケールのテーマであり、最終的なデザインではありませんが、サイトに完成品に近い外観を持たせることができます。

通常、サイトの全体的なデザインが具体化し始めると、反復プロセスでモックアップ テーマを作成します。会社のデザイナーまたは外部のデザイン エージェンシーは、モックアップ テーマを出発点として使用して、最終的なブランド テーマを作成します。

SXA Storefront には 2 つのモックアップ テーマが付属しています。商品画像を持つ Storefront モックアップ テーマでは、カタログの元の画像が表示され、モック画像を持つ Storefront モックアップ テーマでは、商品画像の代わりに一般的なグレースケール画像が表示されます。

たとえば、エクスペリエンス エディターでは、Storefront モックアップ テーマのどちらかを使用した登録レンダリングは次のようになります。