header-logo
Wix の使用方法を学び、サイトとビジネスを構築する。
直感的な Wix 機能でサイトをデザインして管理する。
定期購入、プラン、請求を管理する。
ビジネスを運営し、サイト会員とつながる。
ドメインの購入、サイトへの接続と移管方法を学ぶ。
ビジネスとウェブプレゼンスを成長させるツールを入手する。
SEO とマーケティングツールで知名度を上げる。
より効率的な作業を支援する高度な機能を利用する。
解決策や既知の問題について確認し、問い合わせる。
placeholder-preview-image
コースとチュートリアルでスキルを習得する。
ウェブデザインやマーケティングなどのヒントを得る。
検索エンジンからのトラフィックを増やす方法について学ぶ。
フルスタックプラットフォームでカスタムサイトを構築する。
あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image

Wix ストア:商品ギャラリーの表示方法を設定する

4分
デフォルトでは、商品ギャラリーに多数の商品が追加されてある場合、顧客は「 もっと見る」ボタンをクリックすることで商品をさらに読み込むことができます。
商品ギャラリーの「もっと見る」ボタンをページ送りまたは無限スクロールに置き換えることができます。
Wix サイトのショップページの下部に「もっと見る」ボタンが表示されている様子を示したスクリーンショット
ヒント:
ギャラリーの行数と列数を調整することで、ページあたりに表示される商品の数は変わります。エディタ設定の「レイアウト」タブに移動して、行と列を調整しましょう。

「もっと見る」ボタンを設定する

「もっと見る」ボタンの色、フォント、形は、サイトのデザインに合わせてカスタマイズできます。

「もっと見る」ボタンを有効にしてカスタマイズする方法:

  1. エディタに移動します
  2. カスタマイズしたい商品ギャラリーがあるページに移動します。
  3. ページ上のギャラリーをクリックします。
  4. 設定 をクリックします。
  5. 設定」タブをクリックします。
  6. スクロール動作」を選択します。
  7. 「もっと見る」ボタンを選択します。
  8. ボタンテキストを編集します:
    1. テキスト」タブをクリックします。
    2. 「もっと見る」ボタンのテキストを編集します。
    3. 「前の商品」ボタンのテキストを編集します。
  9. ボタンデザインを編集します:
    1. デザイン」タブをクリックします。
    2. 「「もっと見る」、「以前のデータを読み込み」」をクリックします。
    3. カスタマイズするものを選択します。
      • テキストフォント・色:テキストのフォントと色を選択します。
      • スタイル:ボタンのスタイルを選択します。
      • 不透明度・色 : 背景色を選択し、不透明度を変更します。 
      • 枠線の太さ・色(px): 枠線の色と太さを選択します。
      • 角の丸み(px): ボタンの角をより丸く(高い数)または鋭く(低い数)設定します。
      • ボタンの横幅: ボタンの幅を変更します。

ページ送りを設定する

ページ送りボタンを追加し、見た目をカスタマイズします。ストアに多数のページがある場合、最初と最後のページに移動する矢印を追加することもできます。
Wix サイトのショップページの下部にページ送りが表示されている様子を示したスクリーンショット

ページ送りを有効にしてカスタマイズする方法:

  1. エディタに移動します
  2. カスタマイズしたい商品ギャラリーがあるページに移動します。
  3. ページ上の商品ギャラリーをクリックします。
  4. 設定 をクリックします。
  5. 設定」タブをクリックします。
  6. スクロール動作」をクリックします。
  7. ページ送り」を選択します。
  8. レイアウトをカスタマイズします:
    1. レイアウト」タブをクリックします。
    2. ページ送り」を選択します。
    3. ページ送りの表示方法を選択します。
    4. 「最初へ / 最後へ」の矢印」トグルをクリックして、最初と最後のページに移動する矢印を追加します。 
    5. ページ送りを左、右、または中央揃えに配列します。
  9. ページ送りのフォントをカスタマイズします:
    1. デザイン」タブをクリックします。
    2. ページ送り」をクリックします。
    3. ページ番号と矢印のフォントを選択します。
    4. 顧客が表示しているページの色を選択します。

無限スクロールを設定する

無限スクロールを使うと、顧客はページ間を移動することなく、スクロールするだけですべての商品を閲覧することができます。

無限スクロールを有効化する方法:

  1. エディタに移動します
  2. カスタマイズしたい商品ギャラリーがあるページに移動します。
  3. ページ上の商品ギャラリーをクリックします。
  4. 設定 をクリックします。
  5. 設定」タブをクリックします。
  6. スクロール動作」をクリックします。
  7. 無限スクロール」を選択します。

よくある質問