カタログの画像とビデオ

一定の割合で高品質の画像を使用すると、カタログが商業的な魅力を持つプロフェッショナルな外観になります。 1 つの製品に複数の画像が含まれる大きなカタログがある場合、管理する製品画像は数千とは言わないまでも、数百個にすることが簡単にできます。 始める前に、画像ファイルの命名規則を確立し、必要に応じてオリジナルを見つけられるように整理します。

1 つの製品画像が、カタログ全体で異なるサイズでレンダリングされます。 ページ上の画像コンテナの表示サイズは、テーマのスタイルシートで定義します。 ただし、ストア内の画像の表示場所は、画像に割り当てられた役割によって決まります。 メインの商品画像、つまり ベース 画像は、ズームに必要な倍率を生み出すのに十分な大きさにする必要があります。 メイン画像に加えて、同じ画像の小さなバージョンが製品一覧に表示されたり、買い物かごにサムネールとして表示されたりする場合があります。 必要な最大サイズの画像をアップロードするか、Adobe Stock の画像を使用し、それぞれの使用に必要なサイズをCommerceでレンダリングできます。 すべての役割に同じ画像を使用することも、各役割に異なる画像を割り当てることもできます。 デフォルトでは、アップロードされた最初の画像が 3 つの役割すべてに割り当てられます。

ストアフロントメディアブラウザー

製品ページのメディアブラウザーには、製品に関連する複数の画像、ビデオ、スウォッチが表示されます。 各サムネールで、製品の異なるビューやバリエーションを表示できます。 買い物客は、サムネールをクリックして、メディアアセットを参照できます。 メディアブラウザーの位置はテーマによって異なりますが、デフォルトの位置は製品ページのメイン画像のすぐ下です。 アクセシビリティコントロールについては、 ナビゲーションアクセシビリティを参照してください。

画像のズーム

ベース画像がズーム効果を作成するのに十分な大きさである場合、ユーザーはマウスポインターを置くと、画像の拡大部分を表示できます。 ズームが有効な場合、ユーザーはメイン画像をクリックし、カーソルを動かして画像の様々な部分を拡大できます。 拡大された選択が画像の右側に表示されます。

ライトボックスとスライダー

製品画像のプレゼンテーションを向上させるために使用できるサードパーティのライトボックスやスライダーが多数あります。 Commerce Marketplace で拡張機能を探します。

リソースのトラブルシューティング

画像とビデオの問題のトラブルシューティングについて詳しくは、Commerce サポートナレッジベースの次の記事を参照してください。