商品のクイック ビュー、画像ズーム、ホバー効果で顧客体験を向上させましょう。

ストア ページにクイック ビュー、画像ズーム、ホバー効果などのインタラクティブな機能を追加できます。これらの機能は、顧客が商品画像にカーソルを合わせると表示されて、商品の詳細を確認できます。

ヒント: ストアの売上促進に向けたデザインのアイデアウェビナーにご登録ください。このウェビナーでは、サイト全体で商品をより魅力的に見せ、売上につなげる方法をご紹介します。

ストア ページの特別な機能

ストア ページで利用できる特別な機能や、そのスタイル設定方法は、サイトで使用しているSquarespaceのバージョンによって異なります。

商品画像に画像ズームを追加する

画像ズームでは商品画像の拡大版が表示されるため、顧客は素材、質感、細部まで詳しく見ることができます。画像ズームは商品詳細ページやクイック ビューのライトボックスで利用できます。

ホバー時または画像をクリックしたときにズームが有効化されるように設定できます。

商品の画像ズームを有効にする

ヒント: 最適な結果を得るには、アップロードする前に商品画像をWeb表示用にフォーマットしてください。

画像ズームはモバイル端末では利用できません。デスクトップ表示で画像ズームを有効にする方法は、サイトのバージョンによって異なります。

注: 背景が透明な画像 (.png) では、拡大されたバージョンの背後に元の画像が表示されます。

商品にクイック ビューを追加する

クイック ビューを使うと、顧客がボタンをクリックしたときに、表示中のページから移動せずにライトボックス内で商品の詳細を見ることができます。これは、顧客のストアへの関心を高め、より多くの商品を閲覧するよう誘導するのに役立ちます。クイック ビュー ボタンは、概要ブロック、商品ブロック、ストア ページに表示できます。

このボタンは、商品にカーソルを合わせると表示されます。クイック ビュー ライトボックスには、商品の詳細、画像、および商品のページに移動する [アイテム全体を表示] リンクが含まれます。

不要なコードがクイック ビューに表示される場合は、商品説明に外部テキストの書式設定が含まれている可能性があります。書式設定を取り除くには、商品説明を手動で再入力するか、プレーン テキストとして貼り付けてください。

商品のクイック ビュー ボタンを有効にする

ストア ページおよびブロックごとにクイック ビューを有効にすることができます。複数のストア ページまたはブロックがある場合は、それぞれにボタンを追加してください。

商品ブロックにクイック ビューを追加する方法は次の通りです。

1. 商品ブロック エディターで、表示する商品を選択します。
2. [デザイン] タブで、[商品のクイック ビュー] トグルをオンにします。
3. ページの変更を保存します。

概要ブロックにクイック ビューを追加する方法は次の通りです。

1. 概要ブロック エディターで、[コンテンツ] タブでストア ページが選択されていることを確認します。
2. [デザイン] タブをクリックします。
3. [商品のクイック ビューを有効化] トグルをオンにします。クイック ビューボタンは商品のアイキャッチ画像の上に表示されます。
4. ページの変更を保存します。

ストア ページにクイック ビューを追加する方法は次の通りです。

1. ページの設定を開きます。
2. [詳細設定]、[クイック ビュー] の順にクリックして、[クイック ビューを有効化] トグルをオンに切り替えます。
3. 複数のストア ページがある場合は、各ページごとに同じ手順を繰り返します。

注: クイック ビュー ウィンドウの色はサイト スタイルで設定されているストア ページ セクションの背景色に従います。

商品にホバー効果を追加する

ホバー効果では、商品画像にカーソルを合わせたときに情報を表示したり、動きを加えたりできます。サイトで利用できるホバー オプションは、サイトのバージョンによって異なります。