商品ページとクイックビュー
ここでは、商品情報ページとクイックビューポップアップの設定を行います。
商品ページとクイックビュー設定
ここでは、商品情報ページとクイックビューポップアップの要素を設定することができます。
商品ページ
クイックビューのポップアップ
任意の要素の表示・非表示が可能です。
ギャラリーレイアウト
ここでは、商品情報ページやクイックビューポップアップに適応させるギャラリーレイアウトを選択することができます。このテーマには、5つのギャラリーレイアウトが用意されています。
ギャラリーレイアウト見本
ギャラリーレイアウト #1
ギャラリーレイアウト #2
ギャラリーレイアウト #3
ギャラリーレイアウト #4
ギャラリーレイアウト #5
商品ごとに異なるレイアウトを適応させたい場合には、商品にタグを設定することでレイアウトの使いわけができます。
Shopify管理画面の「商品管理」から、個別にレイアウトを適応させたい商品の編集画面に移動し、”gallery-layout-●”という名前のタグを追加してください。●には1から5までのレイアウト名に対応した数字をいれてください。
例: gallery-layout-3というタグを商品に追加すると、その商品はレイアウト#3が適応されます。
ギャラリー
ここでは、商品のギャラリーを設定することができます。商品の画像の推奨サイズは1300×1667ピクセルです。
モバイルでサムネイル表示
このオプションを有効にすると、モバイルビューでギャラリー画像が表示されます。
フルスクリーンギャラリーポップアップの有効
このオプションを有効にすると、デスクトップでもモバイルでも、画像をクリックすると商品画像のポップアップが表示されるようになります。以下はモバイルでの表示例になります。
フルスクリーンギャラリーボタンの表示
このオプションを有効にすると、メイン画像の下にズームボタンが表示され、このボタンをクリックすると、フルスクリーンのポップアップが表示されるようになります。
ビデオボタンの表示
このオプションを有効にすると、メイン画像の下に「ビデオ」ボタンが表示されます。このボタンをクリックすると、最初の商品ビデオに移動します。訪問者は、矢印やサムネイルを使ってビデオ間を移動することができます。
ビデオ自動再生を有効
このオプションを有効にすると、商品のビデオが自動的に再生されるようになります。クリックしてから動画を再生する仕様にするには、このオプションを無効にしてください。
マウスでのズームを有効
このオプションを有効にすると、メインイメージ上にマウスを置いたときに画像がズームされるようになります。
画像ズームの調整
このオプションでは、メインイメージのズームの比率を設定することができます。1.1から5の間で設定してください。
画像の高さとサイズの調整
「テーマ設定」→「プロダクト→コレクションページ」→「画像」で設定したパラメータを商品ページにも適応させるには、「コレクションページ設定の延長」を選択してください。また、コレクションページの設定に関わらず、商品ページの画像をカスタマイズしたい場合は、「このセクション設定をセットする」を選択してください。
ギャラリー画像の高さ
ここでは、画像コンテナの比率を設定できます。
デフォルト値は-128です。
- 100でスクエア(正方形)の画像コンテナを表示
- 100以下で「ランドスケープ(横長)」の比率を表示
- 100以上で「ポートレートサイズ(縦長)」の比率を表示
画像のリサイズ
ここでは、5つの画像リサイズオプションが用意されています。
- オート- このオプションを選択した場合、画像の比率オプションが機能しなくなります。イメージコンテナとイメージサイズは、ソースイメージの寸法に基づいて生成されます。
- コンテイン – CSSのobject-fit = containです。詳しくはこちらのサイトをご覧ください。
- カバー – CSSのobject-fit = coverです。詳しくはこちらのサイトをご覧ください。
- 幅に合わせる – このオプションでは、イメージの幅がコンテナの幅に適合します。垂直方向に中央に配置されます。イメージの高さがコンテナよりも大きい場合は、イメージ上下はカットされます 。イメージの高さがコンテナよりも小さい場合は、イメージの上部と下部に白いスペースが追加されます。
- 高さに合わせる – このオプションでは、イメージの高さがコンテナの高さに適合します。イメージは水平方向に中央に配置されます。
モバイルでの画像リサイズ
商品画像のサイズを自動的に変更させるには「オート」というオプションを選択してください。「画像のリサイズ」設定をモバイルビューにも適用するには、オプション「デスクトップでの設定を使う」を有効にしてください。
オプションによるグループギャラリー
- 無効 – 画像をグループ化しない
- 有効 – ストアのすべての商品の商品画像をグループ化します。
- タグの’グループギャラリー’を有効化 – タグ付けされた商品だけを対象に商品画像をグループ化できます。 「グループギャラリー」というタグを追加し、商品画像をグループ化する必要がある商品を指定してください。
グループギャラリー機能を利用するには、商品管理ページでのメディアの設定が必要です。グループ化された商品画像は、Shopify管理画面 -> 商品管理で確認することができます。
例:色を基準としたグループであれば、｢色｣のオプションを一番最初のオプションとする。
グループの最初の画像を商品のバリエーションに設定する
スティッキーギャラリーを有効
このオプションを有効にすると商品の画像はスティッキーな状態となり、商品ページをスクロールして「今すぐ購入」ボタンにたどり着くまで同じ場所で表示されるようになります。
このオプションを無効にするとギャラリーの下側には空白のスペースができます。
ラベル
ここでは、商品のラベルを設定することができます。すべてのストア商品のラベルを無効にすることもできます。
商品ラベルを表示するには、2つの条件が必要です。
- テーマ設定でラベルを有効にする。
- 商品の設定を行います。
在庫ありのラベル表示
このオプションを有効にすると、在庫追跡が有効で、数量が0より大きい商品に「在庫あり」のラベルが表示されます。
予約プリオーダーのラベル表示
このオプションを有効にすると、在庫追跡が有効で数量がゼロの商品に「予約注文」のラベルが表示されます。「プリオーダー」機能の設定方法はこちらをご覧ください。
在庫なしのラベル表示
このオプションを有効にすると、在庫追跡が有効で数量がゼロの商品に「在庫切れ」のラベルが表示されます。
セールのラベル表示
このオプションを有効にすると、割引前価格が設定されている商品に「セール」ラベルが表示されます。 Shopify管理画面 -> 商品管理から割引前価格を設定してください。
新商品のラベル表示
このオプションを有効にするとメタフィールドで｢metafield labels.new = true｣が設定されている商品に「新商品」ラベルが表示されます。
おすすめのラベル表示
このオプションを有効にするとメタフィールドで｢metafield labels.hot = true｣が設定されている商品に「おすすめ」ラベルが表示されます。
レビュー
レビューを表示
このオプションを有効にすると、商品のレビューが商品情報欄のタイトルの下に表示されます。
レビューのカウンターを隠す
このオプションを有効にすると、レビューの星のみが表示され、レビューの数は表示されなくなります。
商品の詳細
これらの情報の表示をするためには商品テンプレートページ編集にて｢詳細｣のブロックを追加してください。
SKU表示
このオプションを有効にすると、商品のSKUが表示されます。
バーコード表示
このオプションを有効にすると、商品のバーコードが表示されます。
在庫状況の表示
このオプションを有効にすると、商品の在庫状況が表示されます。
商品タイプの表示
このオプションを有効にすると、商品タイプが表示されます。
ベンダーの表示
このオプションを有効にすると、商品のベンダーが表示されます
価格
これらの情報の表示をするためには商品テンプレートページ編集にて｢価格｣のブロックを追加してください。
価格表示
このオプションを有効にすると、商品の価格が表示されます。
セールプライスの詳細表示
このオプションを有効にすると、「割引前価格」が表示されます。
タックステキスト表示
このオプションを有効にすると、「税込」というテキストが表示されます。
支払いについての表示
このオプションはデフォルトではチェックされていますが、「Shop Pay 払い」バナーを表示する必要がない場合は、このオプションを無効にしてください。詳しくはこちらをご覧ください。
セールスプラン
サブスクリプション注文を表示したい場合はこちらをオンにしてください。ボタンと数量のブロックに配置されます。
在庫カウントダウン
この情報の表示をするためには商品テンプレートページ編集にて｢在庫カウントダウン｣のブロックを追加してください。
在庫カウントダウンの範囲表示
このオプションを有効にすると、商品の在庫カウントダウンの範囲が以下のように表示されます。
在庫カウントダウンの最小値設定
このオプションでは、「急いでください！在庫は残り○○個です！』の表示のしきい値セットが可能です。
配送カウントダウン
この情報の表示をするためには商品テンプレートページ編集にて｢配送カウントダウン｣のブロックを追加してください。
配送カウントダウンの設定
配送カウントダウンでは、｢この商品は◯◯時◯◯分までのご注文で最短2023/11/19 日曜 頃にお届けいいたします。｣というような表示を行えます。
配送カウントダウンをリセットする時間の設定
このオプションでは、注文が完了するまでの時間帯を設定して、配送カウントダウンをリセットすることができます。
例えば、現在の時刻が午前10時45分で、15と設定した場合は、”4時間15分以内に注文して… “と表示されます。このリセット時間を調節して、｢◯◯時◯◯分以内のご注文で｣の項目時間を調整してください。
平均配送時間のカウントダウン
平均配達時間のカウントダウン(日)このオプションでは、配送が行われる平均日数を設定することができます。
例えば、今日の日付が2020年04月30日(木)で、3日と設定した場合、「2020年05月03日(日)までに届くように、○○時間○○分後に注文してください」と表示されます。
配送日時のフォーマット
配送カウントダウンの日付のフォーマットを手動で設定できます。YYYYは年(西暦)・MMは月・DDは日付・Day は曜日 として設定できます。
例えば、｢YYYY/MM/DD Day｣に設定した場合、｢2024/11/31 月曜｣と表示されます。
カウントしない曜日
カウントしない曜日ここでは、配送カウントダウンの日付から除外する日を手動で入力できます。除外する、曜日の指定は英語で入力してください。
例えば、今日の日付が2020年04月30日(木)で、配送のカウントダウン日を3日に設定し、「除外する曜日」の欄 に｢Saturday, Sunday｣と入力した場合 、｢XX時間XX分以内のご注文で、2020年05月04日(月)ま でにお届けします」と表示されます。
ポップアップ
この情報の表示をするためには商品テンプレートページ編集にて｢ポップアップ｣のブロックを追加してください
サイズガイドの表示する
「サイズガイド」のコンテンツ
ここでは、サイズガイドのポップアップのコンテンツを設定することができます。オンラインストア -> ページでページを追加・編集してください。「サイズガイド」のコンテンツにページが選択されていない場合は、 デフォルトで「Include Popup Size Guide」のページが選択されます。
HTMLの例は以下の通りです。
<div class="container container--sm px-0">
<p class="mb-50 text-center">
下記の表でサイズをお確かめください。もし過去に同じブランドをお買い上げの場合、その商品に付属していたラベルのサイズ表記を参考にされることをおすすめいたします。
</p>
</div>
<div class="row mt-60">
<div class="col-12 col-md-9">
<h4 class="mb-15 text-center">女性用サイズ</h4>
<div class="table-wrap">
<table class="table-size-guide responsive-table table-center mb-35">
<tbody>
<tr>
<th>国</th>
<th>XS</th>
<th>S</th>
<th>M</th>
<th>L</th>
<th>XL</th>
<th>XXL</th>
<th>XXXL</th>
</tr>
<tr>
<td>ヨーロッパ</td>
<td>32</td>
<td>34</td>
<td>36</td>
<td>38</td>
<td>40</td>
<td>42</td>
<td>44</td>
</tr>
<tr>
<td>US(アメリカ)</td>
<td>0</td>
<td>2</td>
<td>4</td>
<td>6</td>
<td>8</td>
<td>10</td>
<td>12</td>
</tr>
<tr>
<td>胸囲(インチ)</td>
<td>28"</td>
<td>30"</td>
<td>32"</td>
<td>34"</td>
<td>36"</td>
<td>38"</td>
<td>40"</td>
</tr>
<tr>
<td>胸囲(センチ)</td>
<td>716</td>
<td>76</td>
<td>81</td>
<td>86</td>
<td>91.5</td>
<td>96.5</td>
<td>101.1</td>
</tr>
<tr>
<td>ウエスト(インチ)</td>
<td>21"</td>
<td>23"</td>
<td>25"</td>
<td>27"</td>
<td>29"</td>
<td>31"</td>
<td>33"</td>
</tr>
<tr>
<td>ウエスト(センチ)</td>
<td>53.5</td>
<td>58.5</td>
<td>63.5</td>
<td>68.5</td>
<td>74</td>
<td>79</td>
<td>84</td>
</tr>
<tr>
<td>ヒップ(インチ)</td>
<td>33"</td>
<td>34"</td>
<td>36"</td>
<td>38"</td>
<td>40"</td>
<td>42"</td>
<td>44"</td>
</tr>
<tr>
<td>ヒップ(センチ)</td>
<td>81.5</td>
<td>86.5</td>
<td>91.5</td>
<td>96.5</td>
<td>101</td>
<td>106.5</td>
<td>111.5</td>
</tr>
<tr>
<td>股下</td>
<td>36.5</td>
<td>38</td>
<td>39.5</td>
<td>41</td>
<td>42.5</td>
<td>44</td>
<td>45.5</td>
</tr>
</tbody>
</table>
</div>
<h4 class="mb-15 text-center">男性用サイズ</h4>
<div class="table-wrap">
<table class="table-size-guide responsive-table table-center">
<tbody>
<tr>
<th>国</th>
<th>XS</th>
<th>S</th>
<th>M</th>
<th>L</th>
<th>XL</th>
<th>XXL</th>
<th>XXXL</th>
</tr>
<tr>
<td>ヨーロッパ</td>
<td>32</td>
<td>34</td>
<td>36</td>
<td>38</td>
<td>40</td>
<td>42</td>
<td>44</td>
</tr>
<tr>
<td>US(アメリカ)</td>
<td>0</td>
<td>2</td>
<td>4</td>
<td>6</td>
<td>8</td>
<td>10</td>
<td>12</td>
</tr>
<tr>
<td>胸囲(インチ)</td>
<td>33-35"</td>
<td>36-38"</td>
<td>39-41"</td>
<td>42-44"</td>
<td>45-47"</td>
<td>48-50"</td>
<td>51-53"</td>
</tr>
<tr>
<td>胸囲(センチ)</td>
<td>84-89</td>
<td>91-97</td>
<td>88-104</td>
<td>107-112</td>
<td>114-119</td>
<td>122-127</td>
<td>129-134</td>
</tr>
<tr>
<td>ウエスト(インチ)</td>
<td>28"</td>
<td>30"</td>
<td>32"</td>
<td>34"</td>
<td>36"</td>
<td>38"</td>
<td>40"</td>
</tr>
<tr>
<td>胴回り(センチ)</td>
<td>71</td>
<td>76</td>
<td>81</td>
<td>86</td>
<td>91.5</td>
<td>96.5</td>
<td>101.5</td>
</tr>
<tr>
<td>股下</td>
<td>76</td>
<td>77.5</td>
<td>79</td>
<td>81</td>
<td>82.5</td>
<td>84</td>
<td>85.5</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-12 col-md-3 pt-40">
<img decoding="async"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
alt="Size Guide"
data-src="https://cdn.shopify.com/s/files/1/0026/2956/6516/files/size-guide.png?3075023775676419967" class="lazyload" /><noscript><img decoding="async"
src="https://cdn.shopify.com/s/files/1/0026/2956/6516/files/size-guide.png?3075023775676419967"
alt="Size Guide"
data-eio="l" /></noscript>
<div class="mt-40 fs">
<h6 class="mb-0">胸囲:</h6>
<p class="m-0">胸の周囲の長さ</p>
<h6 class="mb-0">ウエスト:</h6>
<p class="m-0">お腹のあたりの細い部分の周囲の長さ</p>
<h6 class="mb-0">ヒップ:</h6>
<p class="m-0">腰のあたりの周囲の長さ</p>
<h6 class="mb-0">股下:</h6>
<p class="m-0">股下から足首までの足の内がわの長さ</p>
</div>
</div>
</div>
「配送と返品」の表示
このオプションを有効にすると、配送情報のポップアップが表示されます。
「配送と返品」のコンテンツ
ここでは、配送情報ポップアップのコンテンツを設定できます。オンラインストア→ページでページを追加・編集してください。「配送と返品」のコンテンツにページが選択されていない場合は、デフォルトで「Include Popup Delivery Return」のページが選択されます。
そのHTMLの例は以下の通りです。
<h4 class="mb-10">配送について</h4>
<ul class="list-sm mb-30">
<li>ご注文より通常1〜7日営業日内に発送いたします。</li>
<li>翌日発送、お急ぎ便のオプションもご利用になれます。</li>
<li>
配送について詳細はよくある質問FAQのページにて、配送方法や料金などがご覧いただけます。
</li>
</ul>
<h4 class="mb-10">返品交換について</h4>
<ul class="list-sm">
<li>14日以内の返品の受付</li>
<li>
返品についての詳しい手続き方法や条件については、返品についてよくある質問FAQのページを御覧ください。
</li>
</ul>
ページの追加・編集方法については、こちらをご覧ください
「メッセージ」ボタンの表示
「お問い合わせはこちらから」のポップアップを開くためのボタンを表示します。
オンラインストア->アクション->言語を編集でフォームのテキストを編集することができます。ここのテキストはお問い合わせページと同じテキストを使用しています。お問い合わせフォームのテキストを編集する方法は、こちらをご覧く ださい。
ボタンとインプット
この情報の表示をするためには商品テンプレートページ編集にて｢数量とカートに追加ボタン｣のブロックを追加してください。
数量の表示
このオプションを有効にすると、商品の数量入力が表示されます。
ボタンのレイアウト
ここでは「カートに入れる」ボタン、「お気に入りに追加」、「比較に追加」、数量入力などのボタンのレイアウトを設定できます。このテーマでは4つのレイアウトから選択可能です。
レイアウト #1
レイアウト #2
レイアウト #3
レイアウト #4
カートに入れるボタンの表示
このオプションを有効にすると、「カートに入れる」ボタンが表示されます。「カートに入れるボタンのサイズ」では、ボタンのサイズを選ぶことができます。”デフォルト”または “ラージ “を選択できます。
動的チェックアウトボタンの表示(今すぐ購入ボタン)
このオプションを有効にすると、”今すぐ購入 “ボタンが表示されます。
Shopifyの仕様により動的チェックアウトボタンは、テーマカスタマイズ画面と本番環境では異なって表示される場合があります。
お客様から見える動的チェックアウトボタンの種類は、以下の要因によって異なります。
- 決済設定
- Shop Promiseが有効かどうか。他のチェックアウトよりもShop Payが優先される
- お客様のブラウザ
- お客様のデバイス
- お客様個人の決済履歴
詳細はShopifyヘルプセンターの下記のページ(動的チェックアウトボタン)をご覧ください。
Shopifyヘルプセンター | 動的チェックアウトボタン動的チェックアウトボタンの確認ボックスを表示
動的チェックアウトボタンの詳細はこちらをご覧ください。
このオプションを有効にすると、利用規約への同意のチェックボックスが表示されます。
このチェックボックスのタイトルは、3つのステップで変更することができます。
1.”言語を編集”に移動します。
2.タブ「Products」をクリックします。
3.”Product dynamic checkout”ブロックまでスクロールし、編集してください
動的チェックアウトボタンのカスタムスタイル
このオプションを有効にすると、動的チェックアウトボタンをカスタマイズすることができます 。以下の例では黄色ですが、色とフォントはお好みのものに変更することができます。
動的チェックアウトボタンにカラー設定を適用する方法の詳細については、こちらを参照してください。
このオプションを無効にした場合、カスタマイズは適用されません。
動的チェックアウトボタンのカスタマイズ方法については、こちらをご覧ください。
ギフトカード受け取り情報の表示
Shopify管理画面にてギフトカードの設定を行うと受取人のフォームを有効にしすることができます。
お客様は独自のメッセージを添えて、受取人に送ることができるようになります。
加えて、ギフトカードをすぐに送るか、それとも特定の日付に送るようにするかを決めることができます。ギフトカードについての詳細はShopifyのヘルプセンターをご確認ください。
受取人情報のフィールドは”ギフトとして贈る”にチェックを入れると表示されます。
お気に入りと比較リスト
お気に入りに追加ボタンの表示
このオプションを有効にすると、「お気に入りに追加」ボタンが表示されます。
比較リストに追加ボタンの表示
このオプションを有効にすると、「比較に追加」ボタンが表示されます。
店舗受取可の表示
こちらの情報の表示をするためには商品テンプレートページ編集にて｢店舗受取サービス｣のブロックを追加してください。
店舗受取可の表示
店舗受取不可の表示
利用できないピックアップの空き状況を表示する必要がある場合は、このオプションを有効にしてください。
付属商品
この情報の表示をするためには商品テンプレートページ編集にて｢付属商品｣のブロックを追加してください。
最大表示数
付属商品の最大の表示数を設定できます。
SNS シェアボタン
この情報の表示をするためには商品テンプレートページ編集にて｢SNSシェアボタン｣のブロックを追加してください。
こちらの設定ではSNSシェアボタンの大きさを変更することができます。
フットバー
フットバーの有効化
このオプションを有効にすると、商品ページにフットバーが表示されます。
商品のタイトル、価格、レビュー、オプション（バリエーション）、オプションの種類、数量、「カートに入れる」ボタンなどの情報オプションを有効または無効にするだけで、フットバーに何を表示するかを設定することができます。
クイックビューのみ
「レイアウト」では、商品ページと同じ設定を適応させるか、クイックビュー特有のレイアウトを設定するかどうかをドロップダウンリストから選択することができます。
クイックビューのポップアップに「詳細を見る」ボタンを表示したい場合は、「詳細を見るリンクを表示」を有効にしてください。
｢詳細を見る｣をクリックすると従来の商品ページに遷移します。
