商品のクイック ビュー、画像ズーム、ホバー効果、順番待ちリストを有効にして、ショッピング体験を向上させましょう。

すべてのSquarespaceサイトは、商品を展示して販売できるストア ページをサポートしています。一部のサイトは、クイック ビュー、画像ズーム、ホバー効果など、買い物客が商品画像にカーソルを合わせると表示される特別な機能を備えています。このガイドでは、これらの機能の詳細および利用できる場所について説明します。

ヒント: 「ストアの売上促進に向けたデザインのアイデア」ウェビナーにご登録ください。このウェビナーでは、商品をサイト全体で目立たせて売上を伸ばすために役立つツールやヒントを紹介します。

バージョンごとの機能

どの機能が利用できるかは、サイトが使用しているSquarespaceのバージョンによって異なります。

バージョン7.0の場合、これらのオプションは、Brine、Farro、Galapagos、Skye、Tremont、およびYorkテンプレート ファミリーで利用可能です。すべてのテンプレートの詳細については、「ストア ページのタイプ」をご覧ください。

バージョン7.1では、シンプル レイアウトの商品詳細ページで、クイック ビュー、画像ズーム、ホバー効果を使用できます。

画像ズーム

画像ズームを使って商品画像を拡大することで、顧客は商品の素材や質感、細部まで詳しく見ることができます。ホバー時または画像をクリックしたときにズームが有効化されるように設定できます。

画像ズームは、以下でご利用になれます。

• 商品詳細ページ
• クイック ビュー ライトボックス

画像ズームを有効にする

画像ズームを有効にする方法は、サイトのバージョンによって異なります。

画像ズームに関するその他のヘルプ

• 画像ズームは、拡大された画像を表示します。実際に画像ファイルにズームインするわけではありません。
• 画像ズームはモバイル端末では利用できません。
• 最適な結果を得るには、アップロードする前に商品画像をWeb表示用にフォーマットしてください。
• 背景が透明な画像 (.png) では、拡大されたバージョンの背後に元の画像が表示されます。
• バージョン7.1では、カルーセル デザインの商品ギャラリーでは画像ズームは利用できません。

クイック ビュー

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

クイック ビュー ボタンは、次の場所に表示できます。

• 概要ブロック
• 商品ブロック
• ストア ページ

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

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

クイック ビュー ボタンを追加する

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

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

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

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

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

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

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

ボタンとライトボックスのスタイル設定 (バージョン7.0のみ)

クイック ビューを有効にすると、[サイト スタイル] パネルに新しいセクションが表示されます。スタイル設定がサイト全体に適用され、見た目に一貫性を持たせることができます。

1. ホーム メニューで、[Webサイト]、[デザイン]、[サイト スタイル] の順にクリックします。
2. [商品: クイック ビュー ボタン] セクションで、クイック ビュー ボタンのスタイル、色、フォント、パディング、位置、サイズをカスタマイズします。
3. [商品: クイック ビュー ライトボックス] セクションで、ライトボックスの外観をカスタマイズします。

ヒント: クイック ビュー テキストの書式設定に問題がある場合は、商品詳細をプレーン テキストとして追加してみてください。

クイック ビューに関するその他のヘルプ

• クイック ビューはモバイル端末では利用できません。
• 現時点では、「クイック ビュー」ボタンのテキストはカスタマイズできません。
• 商品画像はクイック ビューで正方形にトリミングされて表示されます。
• バージョン7.0では、商品の説明は、ヘッダーのスタイル、太字、斜体、箇条書きリスト、改行などの特別な書式設定がない状態でクイック ビューに表示されます。

ホバー効果

ホバー効果は、商品画像にカーソルを合わせたときに情報を表示したり動きを作成したりして、ストアにインタラクションやアニメーションを追加します。サイトで使用できるホバー オプションは、サイトのバージョンによって異なります。