アイキャッチ画像

アイキャッチ画像は、サイトのほとんどのエリアで商品の代表画像として表示されるため、顧客に最初に見てもらいたい画像を使用してください。画像は以下の領域に表示されます。

• ストア ページ
• 商品ブロック
• 概要ブロック
• 商品詳細ページ

既定では、商品エディターに表示される最初の画像がアイキャッチ画像になります。別のアイキャッチ画像を設定するには、画像にカーソルを合わせ、[サムネイルに設定] をクリックします。または、[•••] をクリックしてアイキャッチ画像を変更することもできます。

Additional images

追加画像を使用すると、顧客は商品を包括的に見ることができます。商品の細部を写した写真や、異なる角度から撮影した写真、利用シーンがわかる写真を表示できます。

追加画像は商品詳細ページに表示されます。商品エディターでは、最初の画像より後の画像はすべて追加画像です。画像をクリックしてドラッグすると、順序を変更できます。

バリエーションの画像

商品詳細ページでは、バリエーション画像が追加画像のギャラリー内に表示されます。バリエーション画像を使用すると、各商品バリエーションの見た目を表示できます。たとえば、バリエーション画像を使用して、様々なサイズや色の商品を表示します。既定では、顧客がドロップダウンメニューからバリエーションを選択するまで、アイキャッチ画像が表示されます。

バリエーション画像を追加または変更する手順は以下のとおりです。

1. 商品エディターで、バリエーション セクションまでスクロールし、[すべて編集] をクリックします。または、メインの商品エディターでバリエーションをクリックし、[画像を追加] をクリックしてバリエーション画像を追加します。
2. バリエーションの横にある画像アップロード アイコンをクリックします。
3. [+] をクリックして画像をアップロードするか、アップロード済みの画像を選択します。
4. [適用] をクリックします。

バージョン7.0では、画像の表示はテンプレートのストア ページのタイプによって異なります。

アイキャッチ画像

アイキャッチ画像は、ストア ページ上の商品サムネイルを含め、サイトのほとんどのエリアで商品の代表画像として表示されます。そのため、多くの顧客に最初に見てもらいたい画像を使用してください。画像は以下の領域に表示されます。

• クラシックまたはユニーク ストア ページ。
• 商品詳細ページ (最初の画像として)。
• [ストア ページ] パネルまたは [商品] パネル。
• 商品ブロックと[概要ブロック。

アイキャッチ画像を設定するには、商品エディターで画像にカーソルを合わせ、 [サムネイルに設定] をクリックします。

商品エディターの最初の画像は、アイキャッチ画像とは異なる場合でも、商品詳細ページでは最初の画像として表示されます。

Additional images

追加画像を使用すると、顧客は商品を包括的に見ることができます。商品の細部を写した写真や、異なる角度から撮影した写真、利用シーンがわかる写真を表示できます。追加画像は次の場所に表示されます。

• 商品詳細ページ。
• ホバー時に表示される2枚目の画像 (アドバンス ストア ページのみ)。

最初の画像より後の画像はすべて追加画像です。画像をクリックしてドラッグすると、順序を変更できます。

バリエーションの画像

商品詳細ページでは、バリエーション画像が追加画像のギャラリー内に表示され、各商品バリエーションの見た目を示します。たとえば、バリエーション画像を使用して、様々なサイズや色の商品を表示します。既定値では、顧客がドロップダウンメニューからバリエーションを選択するまで、商品のアイキャッチ画像が表示されます。

バリエーション画像を変更する手順は以下のとおりです。

1. 商品エディターで、[在庫] までスクロールします。
2. [バリエーション] で [すべて編集] をクリックします。
3. バリエーションの横にあるアップロードボタンをクリックし、画像を選択するか、画像をアップロードします。
4. [適用] をクリックします。
5. [戻る] をクリックし、[保存] をクリックします。

セクション スタイルと [サイト スタイル] パネルの [商品アイテム] 微調整オプションを使用して、商品画像の表示形式をカスタマイズします。

商品セクションのスタイルを設定する

ストア セクションでの商品のアイキャッチ画像の表示形式を変更するには、セクションにカーソルを合わせ、鉛筆アイコンをクリックします。

間隔、列、縦横比、テキストの配置を変更できます。また、商品価格を表示または非表示にすることもできます。色を変更するには、[色] をクリックします。

ヒント：商品画像がトリミングされて表示される場合は、トリミングに関する一般的な問題のトラブルシューティングをご覧ください。

商品詳細ページのスタイルを設定する

商品詳細ページでの商品の表示形式を変更するには、以下の手順に従います。

1. ページを編集し、[デザインを編集] をクリックします。
2. セクション スタイルを開き、レイアウト ドロップダウン メニューをクリックします。
3. レイアウトを選択します。
4. [保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了] > [保存] の順にクリックしてエディターを閉じます。

画像の縦横比、テキストの配置、商品ギャラリーのデザインなどの要素のスタイルを設定できます。トリミングした画像を追加した後に、焦点を使用して、その画像の焦点を変更することもできます。

一貫したデザインを実現するために、これらのスタイルの変更はストア内のすべての商品に適用されます。特定の商品に対してこれらの設定を編集することはできません。

[サイト スタイル] パネルを使用して、商品画像の表示形式をカスタマイズします。使用可能なレイアウトとスタイルオプションは、テンプレート ファミリーのストア ページ タイプによって異なります。

クラシックストア ページでの商品画像の微調整オプション

以下は、クラシック ストア ページでの画像固有の微調整オプションです。

• ストア ページ: [商品アイテムのサイズ]、[商品画像自動切り抜き]、[商品の背景色] の各微調整オプションを使用して、ストア ページでの商品画像の表示スタイルを調整します。
• アイテム ページ: [商品ギャラリーのサイズ] と [商品ギャラリー自動切り抜き] の各微調整オプションを使用して、詳細ページの画像のサイズと切り抜きを設定します。

アドバンス ストア ページでの商品画像の微調整オプション

以下は、アドバンス ストア ページの画像固有の微調整オプションです。

• ストア ページ: [商品: レイアウト] セクションの [画像の縦横比] 微調整オプションを使用して、ストア ページの画像の形状を設定します。画像は、形状に合わせて自動的にトリミングされます。
• アイテム ページ: [商品: ギャラリー セクション]にある微調整オプション ([デザイン]、[縦横比]、[サムネイルの配置位置]、[サムネイルの幅] など) を使用して、詳細ページの画像のスタイルを設定します。

個別のストア ページでの商品画像の微調整オプション

以下のテンプレートで商品画像のスタイルを設定する方法については、それぞれのテンプレートガイドをご覧ください。

• Galapagos
• Supply