クイックビュー機能を有効にする
以下の手順に従うと、クイック ビュー機能が有効になり、製品カードに「プラス」ボタンが表示されます。
手順:
- Shopify 管理者から、次の場所に移動します。 オンラインストア > テーマ。
- 編集するテーマを見つけて、 をクリックします。 カスタマイズします。
- ウィンドウの左下にある「テーマ設定」をクリックします。
- クイックビューの見出しを開いて、 クイックビュー機能を有効にします。
クイックビューモーダルのカスタマイズ
クイックビューは常にポップアップに表示され、製品ページを反映します。したがって、製品テンプレートと同じようにクイック ビューをカスタマイズすることもできます。
製品モーダル テンプレートをカスタマイズするには:
- Shopify 管理者から、次の場所に移動します。 オンラインストア > テーマ。
- 編集するテーマを見つけて、 をクリックします。 カスタマイズします。
- ページの上部にあるドロップダウン メニューを開きます。
- 選択 製品 > モーダル テーマエディターに製品モーダルテンプレートをロードします。
- カスタマイズできるのは製品情報セクション内のブロックのみであることに注意してください。 [+セクションを追加]ボタンで追加された他のセクションは無効です。
- クリック 保存。
製品情報セクションの設定
| 設定 | 説明 |
|---|---|
| バリアントを選択した後、他のバリアントのメディアを非表示にする | バリアントが選択されると、他のバリアントの画像が表示されなくなります。バリアントの選択を解除すると、画像が再表示されます。 |
| ビデオループを有効にする | ビデオをループ再生するように設定すると、ビデオが終了すると自動的に再生されます。 |
| デスクトップ上のスペースを埋めるように画像を拡大します | ポップアップの高さに合わせて画像がズームされます。 |
| モバイル画像比率 | モバイルでの商品画像の画像比率:
|
製品情報ブロック
次のブロックを製品情報セクションに追加できます。
テキストブロック
テキスト ブロックは、動的ソースを使用して静的テキストまたは変数データを表示するために使用できます。たとえば、「$100 USD 以上送料無料」などのマーケティング メッセージを表示するテキストを追加すると、各製品に同じメッセージが表示されます。製品のベンダーフィールドなど、表示されている製品に応じて変化する動的ソースを追加することもできます。
| 設定 | 説明 |
|---|---|
| 文章 | 商品ページに情報を追加します。テキストまたは動的ソースをサポートします。 |
| テキストスタイル | テキストのスタイルを変更します。
|
タイトルブロック
このブロックには製品のタイトルが表示されます。
| 設定 | 説明 |
|---|---|
| タイトルサイズ | 商品タイトルのサイズ：
|
価格ブロック
このブロックには、価格や価格での比較など、製品の価格情報が表示されます。調整可能な設定はありません。
バリアントピッカーブロック
このブロックには、製品のバリアント オプションが表示されます。
| 設定 | 説明 |
|---|---|
| バリアントラベルを表示 | 商品のバリエーションラベルを表示します。 |
| タイプ | 顧客に対するバリエーションの表示方法を変更します。
|
| 色見本を有効にする | カラー選択をスウォッチに表示します。このセクションは、 [タイプ]が[ボタン]に設定されている場合にのみ適用されます。 |
| スウォッチの種類 | スウォッチの外観。このセクションは、 [タイプ]が[ボタン]に設定されている場合にのみ適用されます。
|
| サイズチャートページ | 顧客が購入する前にサイズを知る必要がある衣料品を販売している場合は、商品ページにカスタム サイズ表を追加できます。ここでは、サイズ表の内容を表すページを選択します。製品が対象となる場合は、サイズ オプションとともにサイズ チャート ボタンが表示されます。クリックすると、ページのコンテンツを含むポップアップが開きます。 サイズチャートの詳細については、この記事を参照してください。 |
購入ボタンブロック
このブロックには、「カートに追加」ボタンと店舗受け取り情報が表示されます。動的チェックアウト ボタンを表示することもできます。
| 設定 | 説明 |
|---|---|
| 数量セレクターを表示 | 顧客が購入する製品の単位数を変更するために使用できる数量セレクターが表示されます。デフォルトの数量は 1 です。 |
| 動的なチェックアウト ボタンを表示する | 支払い設定で有効にした動的チェックアウト オプションが表示されます。 |
説明ブロック
このブロックには製品の説明が表示されます。調整可能な設定はありません。
在庫ステータスブロック
商品の在庫状況をタイムリーにお知らせするメッセージを表示します。
| 設定 | 説明 |
|---|---|
| 在庫しきい値が低い | メッセージが表示されるためには少なくとも製品在庫が必要であるという値を設定できます。偶数である必要があります。最小値: 0。最大値: 20。デフォルトは 10 です。 |
| 在庫移動通知を表示する | ストアに複数の拠点がある場合、出荷または在庫状況に関する日付に関する転送メッセージが表示されます。 |
製品評価ブロック
このブロックには、製品の平均評価が星で表示され、括弧内にレビュー数が表示されます (例: ★★★★★ (8))。
製品評価を表示するには、 Shopify Product Reviewsなどの製品レビュー アプリと、 reviews.rating_countおよびreviews.ratingのメタフィールド定義が必要です。
ブロックを共有する
このブロックにより、顧客はソーシャル メディアで製品を共有できるようになります。調整可能な設定はありません。
カスタム液体ブロック
このブロックには、ブロックに追加できるカスタムの Liquid または HTML コードが表示されます。
| 設定 | 説明 |
|---|---|
| カスタムリキッド | Liquid または HTML コードとして入力できるコンテンツを表示します。 |
折りたたみ可能なタブブロック
このブロックには、タイトル付きの折りたたみ可能なタブが表示されます。顧客がタイトルをクリックすると、タブが展開されて追加のコンテンツが表示されます。
| 設定 | 説明 |
|---|---|
| アイコン | 折りたたみ可能なタブに対応する既成の SVG アイコンを選択します。 [なし] オプションを選択すると、アイコンが無効になります。 |
| 見出し | タブのタイトル。折りたたんだときと展開したときに表示されます。 |
| タブの内容 | タブの内容。タブが展開されている場合にのみ表示されます。 |
| ページのタブのコンテンツ | ページのコンテンツをタブに表示します。ページ エディターからのページ コンテンツのみが表示され、ページのテンプレートからのリキッド スタイルはこのブロックには表示されません。 [タブ コンテンツ]に入力されたコンテンツはすべて、ページ コンテンツの上に表示されます。 |
ポップアップブロック
このブロックには、クリックするとポップアップ ウィンドウが開くクリック可能なテキストが表示されます。このポップアップには、ページの 1 つのコンテンツが表示されます。
| 設定 | 説明 |
|---|---|
| アイコン | ポップアップに対応する既成の SVG アイコンを選択します。 [なし] オプションを選択すると、アイコンが無効になります。 |
| リンクラベル | 顧客がクリックしてポップアップ ウィンドウを表示するクリック可能なテキスト。 |
| ページ | ポップアップ ウィンドウにコンテンツを表示するページ。ページ エディターからのページ コンテンツのみを表示します。ポップアップには、ページ テンプレートのリキッド スタイルは表示されません。 |
空のスペースブロック
このブロックは空白スペースを追加します。これは、レイアウトを少し変更したい場合に特に便利です。
| 設定 | 説明 |
|---|---|
| デスクトップの高さ | デスクトップ上のスペースの高さ。 0 ～ 200 の 4 の倍数を指定できます。デフォルトは 28 です。 |
| モバイルの高さ | モバイル上のスペースの高さ。 0 ～ 200 の 4 の倍数を指定できます。デフォルトは 20 です。 |
