商品ギャラリーを使用すると、ストアで販売している商品を訪問者に見やすく表示することができます。ギャラリーは任意のページに追加でき、そこにすべての商品を表示するか、厳選したカテゴリーのみを表示するか自由に決めることができます。
ギャラリーの種類は、以下のような「スライダーギャラリー」または「グリッドギャラリー」から好みに応じて選択することができます:
グリッドギャラリーにカテゴリーを表示する
グリッド商品ギャラリーは、多数の商品を表示するのに最適です。商品は、複数の列と行を持つグリッドで表示されます。
サイトには、このグリッドギャラリーが組み込まれた
新しいショップページを追加することができます。また、グリッドギャラリーは、任意のサイトページに追加することもできます。
グリッドギャラリーを追加して表示するカテゴリーを選択する方法:
- ギャラリーを追加したいページに移動します。
- エディタで「サイトに追加」パネルを開きます:
- Wix エディタ:エディタ左側で「パーツを追加」 をクリックします。
- Editor X:Editor X 上部の「要素を追加」 をクリックします。
- 「ショップ」をクリックします。
- 「グリッドギャラリー」をクリックします。
- グリッドギャラリーをサイトページ上の適切な場所にドラッグします。
- エディタでギャラリーをクリックします。
- 「カテゴリーを選択」をクリックします。
- オプションを選択します:
- すべての商品を表示する:「すべての商品」カテゴリーが選択されていることを確認します。
- カテゴリーを表示する:カテゴリーをクリックして選択します。
グリッドギャラリーをカスタマイズする
ギャラリーは、あなたのストアを訪れた顧客が最初に目にするものです。カスタマイズして洗練された印象を与えましょう。
グリッドギャラリーをカスタマイズする方法:
- エディタ内で、カスタマイズしたいギャラリーを含むページまで移動します。
- 「商品ギャラリー」をクリックします。
- 「設定」アイコン をクリックします。
- 実行する内容を選択します:
「レイアウト」タブをクリックし、下記のオプションを使用してギャラリーをカスタマイズします:
- 全幅に引き延ばす:トグルをクリックして、ブラウザの端までギャラリーを拡大します。有効にした場合は、ギャラリーの余白を設定します。「全幅に引き延ばす」を有効にした場合、「ギャラリーレイアウト」セクションの「グリッドの調整」下で「レスポンシブ」を選択することをおすすめします。
- ギャラリーレイアウト:商品の表示スタイルを選択し、商品情報の配置、およびカラムと行の数とそれらの間隔を設定します。
- 画像レイアウト:アップロードした画像の表示方法を選択します。詳細はこちら
- リボンレイアウト:リボンを表示する場所を選択します。
- ページ送り:ページ送りの表示方法を選択し、矢印と配列をカスタマイズします。
注意:「設定」タブで「ページ送り」を選択した場合のみ利用できます。
「設定」タブをクリックして、下記のオプションをカスタマイズします:
- マウスオーバー:顧客が商品にマウスオーバーした際の動作を設定します。
- 表示項目を選択:ギャラリーに表示または非表示にしたい項目を選択します。
- 商品をもっと見る:顧客がページの一番下までスクロールダウンした際の動作を選択します。詳細はこちら
注意:モバイルサイトでは、10個の商品が表示された後に「さらに読み込む」ボタンが表示されます。 - 「カートに追加」ボタン:ボタンを表示すると、顧客は商品ページに移動することなく、カートに商品を追加できるようになります。選択した場合は、ボタンをカスタマイズします:
- マウスオーバーで表示:顧客が商品にマウスオーバーした際のみボタンを表示します。
- ボタンをクリックした時:顧客が「カートに追加する」ボタンをクリックした際の動作を選択します。
- 数量を表示:顧客が同じ商品を一度に複数カートに追加できるよう、数量を選択するボタンを表示します。
- オプションを表示:トグルを有効にして、色やサイズなどの商品オプションを表示します。
「テキスト」タブをクリックして、下記をカスタマイズします:
- カートに追加ボタンテキスト:「カートに追加」ボタンが有効になっている場合に使用できます。
- 在庫なしテキスト:商品在庫がゼロの場合、メッセージが表示されます。
- もっと見るテキスト:顧客がページの一番下までスクロールした際に「もっと見る」ボタンを表示する設定にしている場合のみ使用できます。
「デザイン」タブをクリックし、以下のオプションを使用してギャラリーをカスタマイズします:
ヒント:オプションは、「設定」タブと「クイックビュー」タブで有効にした機能によって異なります。
- 基本設定:ギャラリーの背景色を選択し、フィルターと並び替えのデザインをカスタマイズします。
- 「もっと見る」ボタン / ページ送り:「設定」タブで選択した「もっと見る」ボタン、または「ページ送り」のオプションをカスタマイズします。
- 商品ページ:商品の背景色を選択し、枠線を追加して、ギャラリーのテキストをカスタマイズします。
- 「カートに追加」ボタン:既定のデザインとマウスオーバー時のデザインを選択します。
- リボン:リボンの形、色、フォントを選択します。詳細はこちら
- 商品オプション・数量:色オプションとドロップダウンボタンのデザインをカスタマイズします。
- 商品名と価格の区切り線:商品名と価格の区切り線の太さ、色、長さをカスタマイズします。
- クイックビューボタン:画像にマウスオーバーした際に表示される「クイックビュー」ボタンをカスタマイズします。確認するにはサイトをプレビューします。
フィルターを有効にして顧客が探している商品を見つけやすくしましょう。詳細は
こちらをご覧ください。
購入者は、価格、名前、最新で商品を並べ替えることができます。詳細は
こちらをご覧ください。
クイックビュー機能を利用することで、顧客は別のページに移動することなく、ポップアップで商品情報を確認することができます。
クイックビューを無効にする方法:
- 「クイックビュー」タブをクリックします。
- 「クイックビューを表示する」トグルをクリックして無効にします。
モバイル用のグリッドギャラリーをカスタマイズする
モバイル端末で閲覧した際のギャラリーの外観をカスタマイズします。小さな画面に合わせてデザインを調整し、顧客がギャラリーから移動することなく簡単にカートに商品を追加できるようにすることができます。
モバイル用のグリッドギャラリーをカスタマイズする方法:
- カスタマイズしたいグリッドギャラリーがあるページに移動します。
- エディタ上部で「モバイルエディタに切り替え」アイコン をクリックします。
- グリッドギャラリーが表示されている場所をクリックします。
- 「設定」をクリックします。
- 以下のいずれかの操作を行い、モバイル用のギャラリーをカスタマイズします:
- カートに追加ボタンを表示:有効にすると、顧客は商品ページに移動することなく、カートに商品を追加できるようになります。有効にした場合は、「数量を表示」トグルをクリックして、顧客が同じ商品を一度に複数カートに追加できるようにします。
- 商品オプションを表示:有効にして、サイズや色などの商品オプションを表示します。
- レイアウトをカスタマイズする:商品を 1カラムまたは 2カラムで表示します。
- デザインをカスタマイズする:スライダーをドラッグして、モバイル用のテキストサイズを調整します。
スライダーギャラリーにカテゴリーを表示する
スライダーギャラリーは商品を紹介するのに最適です。顧客は矢印ボタンをクリックして、さらに商品を閲覧できます。
スライダーギャラリーを追加して表示するカテゴリーを選択する方法:
- ギャラリーを追加したいページに移動します。
- エディタ左側で「パーツを追加」パネルを開きます。
- Wix エディタ:エディタ左側で「パーツを追加」 をクリックします。
- Editor X:Editor X 上部の「要素を追加」 をクリックします。
- 「ショップ」をクリックします。
- 「スライドショーギャラリー」をクリックします。
- スライダー商品ギャラリーを希望の位置までドラッグします。
- エディタでギャラリーをクリックします。
- 「設定」をクリックします。
- オプションを選択します:
- すべての商品を表示する:「すべての商品」カテゴリーが選択されていることを確認します。
- カテゴリーを表示する:「カテゴリーを選択」ドロップダウンからカテゴリーを選択します。
スライドショーギャラリーをカスタマイズする
スライダーギャラリーをカスタマイズして、好みの見た目にしてみましょう。ギャラリーのテキストやデザインをカスタマイズしたり、表示するパーツ(例:「カートに追加」ボタンなど)を選択したりすることができます。
スライダーギャラリーをカスタマイズする方法:
- スライドショーギャラリーをクリックします。
- 「設定」をクリックします。
- 実行する内容を選択します:
「レイアウト」タブをクリックし、下記のオプションを使用してギャラリーをカスタマイズします:
- 全幅に引き延ばす:トグルをクリックして、スライダーギャラリーの表示方法を選択します。
- 有効化:パーツは訪問者のブラウザの横幅いっぱいに引き延ばされます。
- 無効化:パーツはブラウザ全体に引き延ばされません。
- 商品の表示スタイル:商品情報の表示方法を選択します。
- 商品情報の配置:テキストの配置を左、右、または中央から選択します。
- ギャラリータイトルの配置:タイトルは「設定」タブで無効にすることができます。
- 表示する商品の数:表示する商品数の決定方法を選択します:
- 固定:選択した商品の数がすべてのサイト訪問者に表示されます。
- レスポンシブ:表示する商品数は、訪問者の画面サイズに応じて調整されます。この設定は、上記で「全幅に引き延ばす」を選択した場合にのみ使用できます。
- 商品の間隔:商品間の余白のサイズを調整します。
- 商品情報の余白:商品情報の左右の余白を調整します。
- 画像レイアウト:アップロードした画像の表示方法を選択します。詳細はこちら
- リボンレイアウト:リボンを表示する場所を選択します。詳細はこちら
「設定」タブをクリックして、下記のオプションをカスタマイズします:
- マウスオーバー:顧客が商品にマウスオーバーした際の動作を設定します。
- 表示項目を選択:ギャラリーに表示または非表示にしたい項目を選択します。
- 「カートに追加」ボタン:ボタンを表示すると、顧客は商品ページに移動することなく、カートに商品を追加できるようになります。選択した場合は、ボタンをカスタマイズします:
- マウスオーバーで表示:顧客が商品にマウスオーバーした際のみボタンを表示します。
- ボタンをクリックした時:顧客が「カートに追加する」ボタンをクリックした際の動作を選択します。
- 数量を表示:顧客が同じ商品を一度に複数カートに追加できるよう、数量を選択するボタンを表示します。
「テキスト」タブをクリックして、下記をカスタマイズします:
- ギャラリータイトルのテキスト:タイトルが有効になっている場合に編集できます。
- カートに追加ボタンテキスト:「カートに追加」ボタンが有効になっている場合に使用できます。
- 在庫なしテキスト:商品在庫がゼロの場合、メッセージが表示されます。
「デザイン」タブをクリックし、以下のオプションを使用してギャラリーをカスタマイズします:
ヒント:オプションは、「設定」タブと「クイックビュー」タブで有効にした機能によって異なります。
- 基本設定:ギャラリーの背景色を選択し、タイトルのフォントと色を設定して、スライダーギャラリーの矢印をカスタマイズします。
- 商品ページ:商品の背景色を選択し、枠線を追加して、ギャラリーのテキストをカスタマイズします。
- 「カートに追加」ボタン:既定のデザインとマウスオーバー時のデザインを選択します。
- リボン:リボンの形、色、フォントを選択します。詳細はこちら
- 商品名と価格の区切り線:商品名と価格の区切り線の太さ、色、長さをカスタマイズします。
- クイックビューボタン:画像にマウスオーバーした際に表示される「クイックビュー」ボタンをカスタマイズします。確認するにはサイトをプレビューします。
クイックビュー機能を利用することで、顧客は別のページに移動することなく、ポップアップで商品情報を確認することができます。
クイックビューを無効にする方法:
- 「クイックビュー」タブをクリックします。
- 「クイックビューを表示する」のトグル をクリックして無効化します。
クイックビューのカスタマイズ方法は
こちらをご覧ください。