Wix ストア:単品画像(購入ボタン付き)を追加・設定する
読了時間:5分
単品画像を利用することで、サイト内のどのページでも商品を単独で表示することができます。クリック後の行動は、自由に設定可能です:商品ページを開いたり、もしくはその商品をカートに追加することもできます。
注意:
単品画像は、現在 Editor X ではご利用いただけません。ただし、ランディングページなど、他の方法で商品を紹介することはできます。 商品を特集する方法についてはこちら
ステップ 1 | 単品画像を追加する
単品画像ウィジェットには、コンパクトスタイルと拡大スタイルの2つがあります。ニーズに合ったスタイルをお選びください。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8769cf44-f342-494c-b25f-cc98c9da3e82/2020/03/10/5dae579f-eaaf-4ba0-95d3-5b0206f61e65/2781bd23-7863-42fc-8ea0-bce628dcfd2c.png)
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8769cf44-f342-494c-b25f-cc98c9da3e82/2020/03/10/a798802e-3753-444f-99bf-81c6b6de5ccf/ab0f3796-617f-471b-82fd-0af2a5661e53.png)
単品画像を追加する方法:
- 単品画像ウィジェットを追加したいページにアクセスします。
- エディタ左側で「追加」アイコン
をクリックします。
- 「ショップ」をクリックします。
- 「単品画像(購入ボタン付き)」をクリックします。
- 単品画像ウィジェットをページにドラッグします。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/12/19/5b06f516-8629-4efc-8ec2-5103e0f19c46/6c9c08b1-1e9d-4539-8ffc-1e98540135db.png)
ステップ 2 | ウィジェットを商品に接続する
単品画像ウィジェットを使用すると、商品を目立つように紹介し、簡単に購入できるようになります。設定するには、宣伝する商品を選択してください。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/12/19/1ab5f804-b953-4e8a-bb4a-0171f87f321c/cc7190f0-3c2a-4233-b3e0-7cbdc7128df6.png)
商品をウィジェットに接続する方法:
- エディタのページで単品画像ウィジェットをクリックします。
- 「設定」をクリックします。
- 「矢印」アイコン
をクリックします。
- 商品を選択します。
ステップ 3 | ウィジェットの動作を設定する
ウィジェットにボタンを表示するかどうかを選択できます。表示する場合は、顧客がクリックしたときの移動先を「商品ページ」または「クイックビュー」ポップアップから選択できます。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/12/19/f58c05a7-52b9-4b96-a6b1-bd5ce98c1bdc/ccf29323-65f4-4db4-90ca-1efe4a2a8e9a.png)
ウィジェットの動作を設定する方法:
- エディタのページで単品画像ウィジェットをクリックします。
- 「設定」をクリックします。
- 「設定」タブをクリックします。
- ウィジェットのボタンを表示するタイミングを選択します:
- 常に表示:ボタンは常に表示されます。
- マウスオーバーで表示:マウスオーバーするとボタンが表示されます(モバイル端末では表示されません)。
- 表示しない:ボタンは表示されません。
- ボタンクリック時のアクションを選択します:
- 商品ページを開く:顧客は該当する商品ページにアクセスします。
- 商品をカートに追加:顧客は商品のクイックビューに移動し、そこから商品をカートに追加することができます。
- デフォルトのボタンテキストを編集します。
- 在庫がゼロになると自動的に表示される「在庫なし」メッセージを編集します。
ステップ 4 | ウィジェットのレイアウトをカスタマイズする
2つの商品ウィジェットスタイルにはさまざまなレイアウトオプションがあります。「レイアウト」タブをクリックして、レイアウトをカスタマイズします。
レイアウトをカスタマイズする方法:
- エディタのページで単品画像ウィジェットをクリックします。
- 「設定」をクリックします。
- 「レイアウト」タブをクリックします。
- カスタマイズするスタイルを選択します:
コンパクトスタイルのレイアウトをカスタマイズする
拡大スタイルのレイアウトをカスタマイズする
ステップ 5 | ウィジェットをデザインする
商品ウィジェットに最適な色、枠線、フォントなどを選択します。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/12/19/f607d6e1-c3b1-44dc-8abe-7cd181ba284a/0580c183-ea75-4bdf-9e2e-f75a0c7b231c.png)
ウィジェットのデザインを更新する方法:
- エディタのページで単品画像ウィジェットをクリックします。
- 「設定」をクリックします。
- 「デザイン」タブをクリックします。
- 利用可能なオプションを使用してデザインを更新します。
デザインオプションについての詳細