header-logo
はじめましょう!Wix の使用方法を学び、サイトとビジネスを構築する。
サイトの作成直感的な Wix 機能でサイトをデザインして管理する。
アカウント・お支払い定期購入、プラン、請求を管理する。
Wix モバイルアプリの使用ビジネスを運営し、サイト会員とつながる。
ドメインの接続ドメインの購入、サイトへの接続と移管方法を学ぶ。
ビジネスの管理ビジネスとウェブプレゼンスを成長させるツールを入手する。
サイトの宣伝SEO とマーケティングツールで知名度を上げる。
Wix Studio・パートナー・エンタープライズより効率的な作業を支援する高度な機能を利用する。
ヘルプ解決策や既知の問題について確認し、問い合わせる。
placeholder-preview-image
Wix Learnコースとチュートリアルでスキルを習得する。
Wix ブログウェブデザインやマーケティングなどのヒントを得る。
SEO ラーニングハブ検索エンジンからのトラフィックを増やす方法について学ぶ。
Website developmentフルスタックプラットフォームでカスタムサイトを構築する。
Wix パートナーに依頼あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image
この記事では下記を説明します:
  • 商品ページのパーツを表示・非表示にする
  • 商品ページの設定をカスタマイズする
  • レイアウトと画像の表示方法をカスタマイズする
  • 商品ページのデザインをカスタマイズする
  • 商品ページのボタンテキストを編集する
  • よくある質問

Wix ストア:商品ページをカスタマイズする

9分
この記事内
  • 商品ページのパーツを表示・非表示にする
  • 商品ページの設定をカスタマイズする
  • レイアウトと画像の表示方法をカスタマイズする
  • 商品ページのデザインをカスタマイズする
  • 商品ページのボタンテキストを編集する
  • よくある質問
重要:
この記事では、Wix エディタと Wix Harmony エディタで商品ページをカスタマイズする方法について説明します。Wix Studio エディタで商品ページをカスタマイズする方法はこちら
商品ページは、各商品の詳細情報を表示する動的ページです。
Wix ストアの商品ページが表示されている様子を示したスクリーンショット。
ページのデザインは常に同じですが、コンテンツ(商品画像とテキスト)は表示される商品によって異なります。
背景色やボタンテキストの変更など、商品ページに加えた変更内容は、すべての商品に影響します。

商品ページのパーツを表示・非表示にする

表示設定」タブをクリックして、商品ページに表示・非表示にするパーツを選択します。
商品ページの「カートに追加」ボタンは、デフォルトで有効になっています。また、「設定」タブを使用すると、ほしい物リストアイコンと「今すぐ購入」ボタンを有効にすることもできます。
Wix サイトの商品ページに表示できるボタンのスクリーンショット
「今すぐ購入」ボタンは、エクスプレスチェックアウトボタン(例:PayPal、Apple Pay、Google Pay)に置き換えることも可能です。
Wix サイトの商品ページに表示できるボタンのスクリーンショット
PayPal、または Apple Pay や Google Pay での購入手続きに関する詳細は、それぞれのリンク先をご覧ください。

商品ページのパーツを表示または非表示にする方法:

  1. エディタに移動します。
  2. 商品ページにアクセスします:
    1. エディタ左側で「ページ・メニュー をクリックします。
    2. ショップページ」をクリックします。
    3. 商品ページ」をクリックします。
  3. ページ上の商品ページをクリックします。
  4. 設定」をクリックします。
Wix エディタの商品ページと、「設定」ボタンがハイライトされているスクリーンショット
  1. 表示設定」タブをクリックします。
  2. 任意のチェックボックスを選択または選択解除して、パーツを表示・非表示にします。
ヒント:
低在庫メッセージ」横のチェックボックスを選択して、在庫が少なくなったことを顧客に知らせることができます。商品の在庫が 10未満になると、メッセージが表示されます(例:在庫残り 3点)。

商品ページの設定をカスタマイズする

  1. エディタに移動します。
  2. 商品ページにアクセスします:
    1. エディタ左側で「ページ・メニュー をクリックします。
    2. ショップページ」をクリックします。
    3. 商品ページ」をクリックします。
  3. ページ上の商品ページをクリックします。
  4. 設定」をクリックします。
Wix エディタの商品ページと、「設定」ボタンがハイライトされているスクリーンショット
  1. 設定」タブをクリックします。
  2. カートに追加」ボタンをクリックし、ボタンがクリックされた際の動作を選択します:
  • 完了のポップアップを表示:ポップアップ通知が表示されます。
    注意:ポップアップはモバイルには表示されません。顧客はカートページに誘導されます。
  • サイドカートを開く:画面の横にカートが開きます。
  • カートページを開く:顧客は直接全カートページに移動します。
  • 商品ページに留まる:顧客は商品ページに留まります。このボタンには、商品がカートに追加されたことを表すチェックマークが表示されます。
  1. ほしい物リストボタン」をクリックし、「「ほしい物リストに追加」ボタンを表示」トグルをクリックして、有効または無効にします。
    ヒントほしい物リストを追加・設定する方法はこちら

レイアウトと画像の表示方法をカスタマイズする

レイアウト」タブをクリックして、ショップに最適な商品ページのレイアウトを選択することができます。また、画像の表示方法をカスタマイズすることも可能です。
注意:
表示される画像オプションは、選択したレイアウトによって異なります。
  1. エディタに移動します。
  2. 商品ページにアクセスします:
    1. エディタ左側で「ページ・メニュー をクリックします。
    2. ショップページ」をクリックします。
    3. 商品ページ」をクリックします。
  3. ページ上の商品ページをクリックします。
  4. 設定」をクリックします。
Wix エディタの商品ページと、「設定」ボタンがハイライトされているスクリーンショット
  1. レイアウト」タブをクリックします。
  2. General(基本設定):
    1. 商品ページのレイアウトを選択します。
    2. 全幅に引き延ばす」トグルをクリックして有効または無効にします。
  3. 商品画像ストアに画像を表示する方法はこちら
    1. 画像の比率」ドロップダウンをクリックし、比率を選択します。
    2. 画像のサイズ変更方法」下でオプションを選択します:
      • クロップ:すべての画像を同じサイズにクロップします。
      • フィット:画像の縦横比を維持します。
    3. 画像ズーム」トグルをクリックして有効にします(一部のレイアウトで利用可能)。
      注意:ズームをプレビューするには、ライブサイトに移動してください。
    4. サムネイルを表示」下でサムネイル画像の表示方法を選択します。
  4. 色見本:商品オプションと変更の選択肢のテキスト(「サイズ」など)を表示する方法を選択し、選択したオプションをカスタマイズします。

商品ページのデザインをカスタマイズする

デザイン」タブから、色、フォント、ボタンのスタイルなどがカスタマイズでき、ストアの雰囲気に合ったデザインを作成することができます。
ヒント:
利用可能なカスタマイズは、選択したレイアウトや設定オプションによって異なる場合があります。
  1. エディタに移動します。
  2. 商品ページにアクセスします:
    1. エディタ左側で「ページ・メニュー をクリックします。
    2. ショップページ」をクリックします。
    3. 商品ページ」をクリックします。
  3. ページ上の商品ページをクリックします。
  4. 設定」をクリックします。
Wix エディタの商品ページと、「設定」ボタンがハイライトされているスクリーンショット
  1. デザイン」タブをクリックします。
  2. 利用可能なオプションを使用して、デザインをカスタマイズします。
下記をご確認ください:

商品ページのボタンテキストを編集する

テキスト」タブをクリックして、商品ページのボタンに表示されるテキストオプションを編集することができます。
ヒント:
カートに追加」または「今すぐ購入」ボタンを無効にしている場合、一部のオプションは表示されません。
  1. エディタに移動します。
  2. 商品ページにアクセスします:
    1. エディタ左側で「ページ・メニュー をクリックします。
    2. ショップページ」をクリックします。
    3. 商品ページ」をクリックします。
  3. ページ上の商品ページをクリックします。
  4. 設定」をクリックします。
Wix エディタの商品ページと、「設定」ボタンがハイライトされているスクリーンショット
  1. テキスト」タブをクリックします。
  2. 利用可能なテキストオプションを編集します。
下記をご確認ください:

よくある質問

Helpmate

こんにちは、さん

さらにヘルプが必要ですか?
この記事の概要
Unlock personalized helpLog in to get the most out of Helpmate.