サイトのストア ページと商品詳細ページをカスタマイズします。
ブランドのデザインやプレゼンテーションに合わせて、サイト上の商品の表示形式をカスタマイズすることができます。このガイドを使用して、サイトのバージョンに基づいてストア ページと商品詳細ページのスタイル オプションを見つけてください。
アクセシブルなスタイル変更の方法の詳細については、「アクセスしやすいコマース サイトを作成する」を参照してください。
ストア ページと商品詳細ページ
商品のスタイルを設定する前に、Squarespaceがすべてのサイトでどのように商品を構成しているかを理解しておくとよいでしょう。商品は2つの部分に分けて表示されます。1つは閲覧可能なランディング ページを作成するストア ページで、もう1つは個別の商品詳細ページです。これらのエリアはいくつかのスタイル微調整オプションを共有しており、さらに独自のスタイル オプションも含まれます。詳しくは、「ストアに商品を追加する」をご覧ください。
スタイル オプションを開く
ストア ページと商品詳細ページのスタイル オプションは、2か所で変更できます。
- ストア ページ - サイト プレビューで [編集] をクリックし、編集するストア セクションのペイントブラシ アイコンをクリックします。ストア セクション スタイルを開く方法の詳細については、「コレクション ページのセクション」をご覧ください。
- 商品詳細ページ - 編集する商品詳細ページを開きます。[デザインを編集] をクリックして、ペイントブラシアイコンをクリックします。これらのスタイル設定は、サイト上のすべての商品詳細ページに適用されます。
ストア ページのスタイルを設定するには、以下の手順に従います。
- 編集するストア ページを開きます。
- [Webサイト] パネルに戻り、[デザイン]、[サイト スタイル] の順にクリックします。
- 商品セクションの微調整オプションを使用して、ランディング ページのスタイルを変更します。
- 個々の商品詳細ページに固有の微調整オプションの場合は、サイト スタイルを終了し、商品を開いてからサイト スタイルを再入力してください。
ヒント:
ストア ページ
ストア ページの訪問者には、グリッドに配置されたすべての商品アイテムのアイキャッチ画像が表示されます。ストア ページには最大200件の商品が表示されます。200以上の商品がある場合、顧客は [次へ] をクリックするとさらに多くの商品を見ることができます。
ストア セクションのスタイルでは、次の詳細をカスタマイズできます。変更はサイト上のすべてのストア ページに適用されることにご注意ください。
形式:
- 画像の幅
- 列の間隔
- 行の間隔
- 列数 (2列以上)
- 画像の縦横比
- テキストの配置
- 画像とテキストの間隔
- [カートに追加] ボタン - 商品のバリエーションが1つ、またはバリエーションがない場合は、商品詳細ページに加えて、ストア ページにも [カートに追加] ボタンが表示されます。商品に複数のバリエーションがある場合は、ストア ページに [オプションを表示] ボタンが表示されます。
- 価格を表示または非表示
- カテゴリー ナビゲーションが表示される場所。カテゴリー ナビゲーションを非表示にすることはできません。
- ヘッダー テキストの配置
- カテゴリー タイトルを表示 - ストア セクションの上部にあるページ タイトルを非表示または表示します。
- 商品ナビゲーション
- パンくずリスト - 訪問者が現在のページに移動するまでにたどったナビゲーション パスを表示します。ただし、関連商品やフィルターされたカテゴリー ページは除きます。
- なし
色:
以下の表を使用して、次のテンプレート ファミリーに適したスタイル オプションを見つけてください。
- アドバンスト - Brine、Farro、Skye、Tremont、York
- クラシック - Adirondack、Avenue、Aviator、Bedford、Five、Flatiron、Forte、Ishimoto、Momentum、Montauk、Native、Pacific、Wells、Wexley
- ユニーク - GalapagosとSupplyは異なるスタイル微調整オプションに従います。商品のスタイル設定の詳細については、テンプレート ガイドを参照してください。
レイアウト
ストア ページの訪問者には、グリッドに配置されたすべての商品アイテムのアイキャッチ画像が表示されます。以下の微調整オプションでグリッドのスタイルを設定します。
サイト スタイル セクション
- アドバンスト - 商品: レイアウト
- クラシック - 商品
説明 | アドバンスト | クラシック |
行あたりのアイテム数を変更する | 行あたりのアイテム数 | 行あたりの商品数 |
行の各項目の間隔を変更する | アイテムの間隔 | 該当なし |
画像の形状を変更する。画像は設定に合わせてトリミングされる | 画像の縦横比 | 該当なし |
画像コンテナーの形状を設定する | 該当なし | 商品アイテムのサイズ |
画像を画像コンテナー全体に合わせてトリミングするかどうかを選択する | 該当なし | 商品画像自動切り抜き |
コンテナーのサイズに合わせてトリミングされていない画像の背後に表示される色を変更する | 該当なし | 商品の背景色 |
商品情報
アドバンスト ストア ページのモバイル用微調整オプションを表示するには、[位置: オーバーレイ] を選択します。
サイト スタイル セクション
- アドバンスト - 商品: 詳細
- クラシック - 商品
説明 | アドバンスト | クラシック |
画像の下またはホバー時に表示するタイトルと価格を設定する | 位置: 下、オーバーレイ | 商品リストのタイトル: under、オーバーレイ |
[商品リストのタイトル: 下] が有効になっているときにテキストを揃えます。 | 該当なし | 商品リストの配置位置: 中央、左 |
[商品リストのタイトル: オーバーレイ] を選択したときのオンホバー オーバーレイの色を設定します。スライダーを調整して透明度を設定します。 | 該当なし | 商品のオーバーレイの色 |
モバイル ブラウザーでテキストを表示する場所を選択する | 位置 (モバイル): 下、オーバーレイ | 該当なし |
テキストの配置方法を選択する | 配置位置 | 該当なし |
[位置: オーバーレイ] を選択したときのオンホバー オーバーレイの色を設定します。スライダーを動かして透明度を設定します。 | オーバーレイの色 | 該当なし |
ホバー時に表示するように設定した場合のテキストの配置をさらに変更する | オーバーレイ パディング | 該当なし |
各行の下の間隔を変更する | 間隔設定 | 該当なし |
オフにするとアイテムのタイトルが非表示になる | タイトルを表示 | 該当なし |
タイトルのフォントを設定する | タイトルのフォント | 該当なし |
タイトルの色を設定する | タイトルの色 | 該当なし |
モバイルでのタイトルの色を設定する | タイトルの色 (モバイル) | 該当なし |
[位置: 下] に設定した場合、テキストと画像の間隔を設定します。 | タイトルの間隔 | 該当なし |
オフにすると価格が非表示になります | 料金を表示 | 商品料金を表示する |
価格のフォントを設定する | 料金のフォント | 該当なし |
コンピューターでの価格の色を設定する | 料金の色 | 該当なし |
モバイルでの価格の色を設定する | 料金の色 (モバイル) | 該当なし |
コンピューターでのセール価格の色を設定する | セール価格の色 | 該当なし |
モバイルでのセール価格の色を設定する | セール料金の色 (モバイル) | 該当なし |
価格とタイトルの間隔を設定する | 料金の間隔 | 該当なし |
商品詳細ページ
表示される画像は商品画像です。商品詳細ページのスタイルを設定するには、次の手順に従います。
- 編集する商品の詳細ページを開きます。
- 左上隅の [デザインを編集] をクリックします。一部のサイトでは、[編集] にカーソルを合わせて [デザインを編集] をクリックし、[ペイントブラシ] アイコンをクリックする必要があります。
次のレイアウト オプションから選択してください。
- シンプル - 商品画像と説明文が空白で囲まれて横並びに表示されます。
- ラップ - 商品画像は説明文の周りを囲むように表示されます。画像は常に左揃えになります。
- ハーフ - 商品画像は説明文でページを分割します。画像は常に左揃えになります。
- フル - 商品画像は、説明の上にあるフルブリードのカルーセルに表示されます。
[シンプル] レイアウトを選択した場合は、次のオプションもカスタマイズできます。
- バリエーションの表示
- 画像の幅
- 画像の縦横比 (スライドショーとカルーセル デザインのみ)。
- カルーセル デザインでは、縦横比によって画像コンテナーの縦横比が決まりますが、画像が収まるようにトリミングされない場合があります。設定で選択したのと同じ縦横比の画像を追加することをおすすめします。
- テキストの配置
- 商品ナビゲーション スタイル
- 説明の位置 - 商品の説明が表示される場所です。
- [カートに追加] ボタン - [インライン] オプションでは、[数量] フィールドの横にボタンが配置されます。
- 画像の間隔
- ギャラリーの幅
- コンテンツの配置 (上、中央) - 配置が上の場合、商品画像の上部とテキストの間にパディングが表示される場合があります。コンテンツの配置は、スライドショーとカルーセルのデザインで使用できますが、スタックでは使用できません。
- デザイン (スライドショー、スタック、カルーセル) - デザインがスライドショーの場合、他の商品画像のサムネイルが表示されます。
- ギャラリーの配置
- ギャラリー サムネイルの配置 - デザインがスライドショーの場合、商品のアイキャッチ画像を配置します。
- フォームの幅
- カルーセル矢印のサイズと色
- クリックでのアクション (ズームまたはライトボックス)
- ホバーでのアクション (ズームまたはなし)
- 画像ズーム倍率
サブスクリプションの頻度
サブスクリプション商品を販売している場合は、商品詳細ページの [サブスクリプションの頻度] セクションに表示される色を変更できます。サイトのカラー テーマを開き、商品詳細ページ: サブスクリプションで色を変更します。
関連商品
商品詳細ページの関連商品セクションは、ストア セクションのスタイルの微調整オプションに従っています。商品詳細ページからこれらの設定にアクセスするには、ストア ページに戻って左上の [編集] をクリックします。フォントはサイトのフォント微調整オプションに従います。
[カートに追加] ボタンと [精算] ボタン
[カートに追加] ボタンは、ストア ページの商品サムネイルの下、および個々の商品詳細ページに表示することができます。ストア ページでは、ボタンの色は商品のテキストと背景の色に従います。商品詳細ページの [カートに追加] ボタンと、ショッピング カート ページの [精算] ボタンは両方とも、プライマリ ボタンのスタイル微調整オプションとサイトの色の設定に従います。外観と操作感に一貫性を持たせるため、ボタンのスタイル オプションはサイト上のほとんどのボタンに適用されることに注意してください。これらのボタンは常に顧客をSquarespaceのカートと精算ページに誘導します。これらのボタンを使用して外部サイトにリンクすることはできません。
商品詳細ページの外観と雰囲気を維持するため、左右のパディングの微調整オプションは [カートに追加] ボタンには影響しません。バージョン7.1では、[カートに追加] ボタンを非表示にすることはできません。商品が売り切れると、[カートに追加] ボタンは淡色表示されます。
バリエーションの表示
シンプル レイアウトでは、バリエーションをボタンまたはドロップダウン メニューとして表示できます。バリエーション ボタンは、サイトの [セカンダリ ボタン] スタイル微調整オプションに従います。他のすべてのレイアウトでは、ドロップダウン メニューにバリエーションが表示されます。バリエーション ドロップダウン メニューの色は、セクションのカラー テーマに基づいて変わります。また、[バリエーション フィールド] のフォント ファミリーに従います。[商品の入荷待ちリスト] に登録するためのオプションが表示されるのは、バリエーションがドロップダウン メニューに表示されている場合のみであることに注意してください。
数量フィールド
数量フィールドは、次の場合に商品詳細ページに表示されます。
- 商品の在庫水準が1を超えている
- 個々のバリエーションの在庫水準とは別に、バリエーションが存在する
商品詳細ページに各バリエーションの現在の在庫水準を表示するには、在庫僅少ラベルを有効にします。これにより、在庫水準が1のときに購入者がその商品をカートに複数追加しようとするのを防ぐことができます。数量フィールドのサイズは変更できません。
以下の表を使用して、次のテンプレート ファミリーに適したスタイル オプションを見つけてください。
- アドバンスト - Brine、Farro、Skye、Tremont、York
- クラシック - Adirondack、Avenue、Aviator、Bedford、Five、Flatiron、Forte、Ishimoto、Momentum、Montauk、Native、Pacific、Wells、Wexley
- ユニーク - GalapagosとSupplyは異なるスタイル微調整オプションに従います。商品のスタイル設定の詳細については、テンプレート ガイドを参照してください。
レイアウト
サイト スタイル セクション
- アドバンスト - 商品: レイアウト
- クラシック - 商品
説明 | アドバンスト | クラシック |
アイテムの間隔を変更する | 間隔設定 | 該当なし |
ページの上部に空白を追加する | 上部パディング | 該当なし |
ページ分割の表示を変更する |
ナビゲーション表示: パンくずリストのみ、ページネーションのみ、パンくずリストとページネーション、なし | 商品アイテムのナビゲーションを表示する |
ページ分割のテキストを変更する | ページネーションのスタイル: 前へ/次へ、タイトル | 該当なし |
ページ分割のテキストを変更する | ナビゲーションの配置位置: 左、中央、右、分割 | 該当なし |
ページ分割のフォントを変更する | ナビゲーションのフォント | 該当なし |
ページ分割の色を変更する | ナビゲーションの色 | 該当なし |
ナビゲーションのページタイトル間の矢印の色を変更する | ナビゲーション セパレーターの色 | 該当なし |
ページ分割のヒント:
- 商品の順序は、ストア ページでの表示位置によって設定されます。商品の順序は左から右となります。
- ページ分割を特定のカテゴリに限定することはできません。ページ分割には、すべての商品が表示されます。
画像
顧客が個々の商品を閲覧する場合は、商品画像が表示されます。
サイト スタイル セクション
- アドバンスト - 商品: ギャラリー
- クラシック - 商品
説明 | アドバンスト | クラシック |
画像の配置を変更する | 位置: 左、右 | 該当なし |
ギャラリーのスタイルを変更する | デザイン: スライドショー、スタック | 該当なし |
画像の幅を変更する | 幅 | 該当なし |
画像の形状を設定する | 縦横比 | 商品ギャラリーのサイズ |
商品画像を画像コンテナー全体に合わせてトリミングするかどうかを選択します。トリミングしない場合、商品の背景色は画像の後ろに表示されます。 | 該当なし | 商品ギャラリー自動切り抜き |
サムネイルの微調整オプションは、[デザイン: スライドショー] を選択したときに画像の下に表示されるナビゲーション サムネイルに影響します。 | サムネイルの配置位置: 左、中央、右 | 該当なし |
サムネイルの幅を変更する | サムネイルの幅 | 該当なし |
サムネイルの間隔を変更する | サムネイルの間隔 | 該当なし |
[デザイン: スタック] を選択した場合に、画像の間隔を変更します。 | 間隔設定 | 該当なし |
商品情報
サイト スタイル セクション
- アドバンスト - 商品: 詳細
- クラシック - 商品
説明 | アドバンスト | クラシック |
ページ上の詳細情報の配置場所を変更する | 配置位置: 左、中央、右 | 該当なし |
行の高さを変更する |
行の高さ [本文: フォント] セクションの行の高さの微調整オプションは、ここでの行の高さにも影響します。 |
該当なし |
文字の間隔を変更する | 間隔設定 | 該当なし |
商品タイトルを表示または非表示にする | タイトルを表示 | 該当なし |
商品タイトルのフォントを変更する | タイトルのフォント | 該当なし |
商品のタイトルの色を変更する | タイトルの色 | 該当なし |
価格を表示または非表示 | 料金を表示 | 該当なし |
価格のフォントを変更する | 料金のフォント | 該当なし |
価格の色を変更する | 料金の色 | 該当なし |
セール品の色を変更する | セール価格の色 | 該当なし |
商品説明の表示場所を選択する | 抜粋の位置: 料金の上、料金の下、[カートに追加] ボタンの下 | 該当なし |
商品説明のフォントを変更する | 抜粋のフォント | 該当なし |
商品説明の色を変更する | 抜粋の色 | 該当なし |
商品説明のリンクの色を変更する | 抜粋リンクの色 | 該当なし |
共有ボタンを非表示または表示する | 共有ボタンを表示 | 商品のソーシャル共有 |
共有ボタン セクションの微調整オプションを使用する | 共有ボタンのスタイル設定 | 共有ボタンのスタイル設定 |
数量とバリエーション
サイト スタイル セクション
- アドバンスト - 商品: オプション
- クラシック - メインコンテンツ
説明 | アドバンスト | クラシック |
バリエーションを表示または非表示にする | バリエーションを表示 | 該当なし |
数量を表示または非表示にする。数量は、複数の商品がある場合にのみ表示されます。 | 数量を表示 | 該当なし |
数量表示を変更する | スタイル: テキストのみ、四角形、丸形、カプセル | 該当なし |
数量表示に境界線の色を追加する | 境界線の色 | 該当なし |
数量表示に背景色を追加する | 背景の色 | 該当なし |
数量表示のフォントを変更する | ラベルのフォント | 該当なし |
数量表示の色を変更する | ラベルの色 | 該当なし |
数量とバリエーションのフォントを設定する | フォント | サイト全体の [ヘッダー] または [見出し1] の微調整オプションに従います。 |
数量とバリエーションのテキストの色を設定する | テキストの色 | 該当なし |
バリエーション表示フォントを変更します。メニュー項目のフォントは変更できません。 | フォント | 該当なし |
数量フィールド
数量フィールドは、次の場合に商品詳細ページに表示されます。
- 商品の在庫水準が1を超えている
- 個々のバリエーションの在庫水準とは別に、バリエーションが存在する
商品詳細ページに各バリエーションの現在の在庫水準を表示するには、在庫僅少ラベルを有効にします。これにより、在庫水準が1のときに購入者がその商品をカートに複数追加しようとするのを防ぐことができます。
[カートに追加] ボタン
サイト スタイル セクション
- アドバンスト - ボタンを表示
- クラシック - ボタン
説明 | アドバンスト | クラシック |
ボタンを非表示にする | [ボタンを表示] をオフにする | 該当なし |
ボタンのスタイルを変更する | スタイル: 単色、外枠、上寄り | スタイル: 既定値、単色、外枠、上寄り |
ボタンの形状を変更する | 形状: 四角形、丸形、カプセル | 形状: 四角形、丸形、カプセル |
ボタンのパディングを追加または削除する | パディング: 小、中、大 | 該当なし |
ボタンの色を変更する | 色 | ボタンの色 |
ボタンのテキストの色を変更する | テキストの色 | テキストの色 |
ボタンのフォントを変更する | フォント | フォント |
ヒント: 商品が売り切れると、[カートに追加] ボタンは淡色表示されます。
[精算] ボタン
ショッピング カート ページに表示される [精算] ボタンは、サイトの色設定に従います。形状やフォントをカスタマイズすることはできません。
関連商品
関連商品がページ下部のグリッドに表示されます。これらの微調整オプションを使用して、外観を変更できます。
サイト スタイル セクション
- アドバンスト - 商品: 関連商品
- クラシック - 商品
説明 | アドバンスト | クラシック |
行あたりのアイテム数を変更する | 行あたりのアイテム数 | 行あたりのアイテム数 |
アイテムの間隔を追加または削除する | アイテムの間隔 | アイテムの間隔 |
画像の縦横比を設定する | 画像の縦横比 | 画像の縦横比 |
テキストの配置を変更する | 詳細の配置位置: 中央、左 | 詳細の配置位置: 中央、左 |
タイトルの間隔を変更する | タイトルの間隔 | タイトルの間隔 |
ショッピング カート
アイコンは既定でサイト ヘッダーにカートとして表示されます。ショッピング カート アイコンを非表示にすると、顧客がカートに商品を追加したときにページの下部にアイコンが表示されます。詳細については、「ショッピング カート アイコンの表示」をご覧ください。
顧客のカート内の商品数を表示し、精算ページに誘導するショッピング カート ボタンは、すべてのテンプレートがサポートしています。カートが表示されない場合は、トラブルシューティングのヒントを参照してください。テンプレートのショッピング カート アイコンのスタイルを設定する方法については、「ショッピング カート アイコンの表示」を参照してください。
カテゴリー ナビゲーション
商品にカテゴリーを追加すると、ランディング ページの上部にナビゲーション メニューが作成されます。顧客は、これらのリンクを使用して、興味のある商品をフィルタリングできます。ただし、どちらのバージョンでも、カテゴリー ナビゲーションについて次の点に注意してください。
- カテゴリーを少なくとも1つ追加しなければ表示されません。
- 詳細ページには表示されません。
- 非表示の商品にリンクされているカテゴリーも含め、すべてのカテゴリーが表示されます。
カテゴリー ナビゲーションは、ストア ページの上部またはサイドバーに表示できます。ただし、モバイル端末の場合、カテゴリー ナビゲーションは常に上部に表示されます。
カテゴリー ナビゲーション フォントは段落スタイルに従います。色は、サイト スタイルの [商品: 基本グリッド] にある [カテゴリー ナビ] 微調整オプションに従います。
位置によっては、サブカテゴリーがネストされたメニューに表示されます。位置を変更するには、セクション スタイルを開き、[カテゴリーの種類] の [サイドバー] または [上部] をクリックします。ナビゲーションの順序を変更するには、カテゴリー マネージャーでカテゴリーをクリックしてドラッグします。
- サイドバー - サブカテゴリーは、ストア ページのネスト メニューと、フィルターされたカテゴリー ページに表示されます。
- 上部 - サブカテゴリーはフィルタリングされたメイン カテゴリー ページに表示されますが、フィルタリングされたサブカテゴリー ページには表示されません。
カテゴリー ナビゲーションを非表示にするには、カテゴリー設定を開き、[フィルターに表示] の横にあるトグルをオフにします。これをすべてのカテゴリーで繰り返します。詳細については、「商品の整理」を参照してください。
カテゴリー ナビゲーションはアルファベット順に表示されます。以下の表を使用して、次のテンプレート ファミリーに適したスタイル オプションを見つけてください。
- アドバンスト - Brine、Farro、Skye、Tremont、York
- クラシック - Adirondack、Avenue、Aviator、Bedford、Five、Flatiron、Forte、Ishimoto、Momentum、Montauk、Native、Pacific、Wells、Wexley
- ユニーク - GalapagosとSupplyは異なるスタイル微調整オプションに従います。これらのテンプレートではカテゴリー ナビゲーションを非表示にすることはできません。カテゴリー ナビゲーションのスタイル設定については、テンプレート ガイドをご覧ください。
サイト スタイル セクション
- アドバンスト - 商品: ソート + フィルター
- クラシック - 商品
説明 | アドバンスト | クラシック |
カテゴリー ナビゲーションを非表示にする | 表示: 非表示 | [カテゴリー ナビゲーションを表示] をオフにする |
カテゴリー ナビゲーションの有効化、無効化、および配置を行う | 表示: 上、左側、右側、非表示 | 該当なし |
カテゴリー ナビゲーションが左側または右側にある場合の幅を設定する。 | 幅 | 該当なし |
ナビゲーション下部のスペースを変更する。 | マージン | 該当なし |
行の各項目の間隔を変更する | アイテムの間隔 | 該当なし |
テキストの配置を設定する | 配置位置: 左、中央、右 | 該当なし |
ナビゲーションのフォントを設定する | フォント |
カテゴリー ナビゲーションのフォント (Bedford、Five、Ishimoto、Montauk、Nativeでは利用できません) |
ナビゲーションの色を設定する | 色 |
カテゴリー ナビゲーションの色 (Bedford、Five、Ishimoto、Montauk、Nativeでは利用できません) |
ホバー時のリンクの表示色を選択する | 有効時の色 |
カテゴリー ナビゲーションの有効時の色 (Bedford、Five、Ishimoto、Montauk、Nativeでは利用できません) |
割引中、売り切れ、在庫僅少のラベル
売り切れの商品には、カスタマイズ可能な売り切れラベルが常に表示されます。どちらのバージョンでも、ラベルのテキストとそのフォントと色を変更できます。バージョン7.0では、ラベルの形状と位置を変更できます。
セールおよび在庫僅少ラベルが有効になっている場合は、これらのラベルも表示されます。スタイルの設定方法は、サイトのバージョンによって異なります。[在庫僅少] パネルで在庫僅少ラベルのテキストを変更できますが、セール中のラベル テキストは変更できません。
以下の表を使用して、次のテンプレート ファミリーに適したスタイル オプションを見つけてください。
- アドバンスト - Brine、Farro、Skye、Tremont、York
- クラシック - Adirondack、Avenue、Aviator、Bedford、Five、Flatiron、Forte、Ishimoto、Momentum、Montauk、Native、Pacific、Wells、Wexley
- ユニーク - GalapagosとSupplyは異なるスタイル微調整オプションに従います。商品のスタイル設定の詳細については、テンプレート ガイドを参照してください。
これらのスタイル微調整オプションにアクセスするには、サイト スタイルを開く前に、編集するストア ページに移動してください。
サイト スタイル セクション
- アドバンスト - 商品: ステータス バッジ
- クラシック - 商品
説明 | アドバンスト | クラシック |
バッジを非表示にする | スタイル: なし | 該当なし |
バッジのスタイルを設定する | スタイル: 長方形、正方形、円、なし | 該当なし |
SALEバッジの色を設定する | セールの色 | 該当なし |
売り切れバッジの色を設定する | 売り切れの色 | 該当なし |
バッジのフォントを設定する | フォント | 該当なし |
パディングを追加または削除する | パディング | 該当なし |
バッジの位置を設定する | 位置: 左上、中央上、右上、中央左、中央中、中央右、左下、中央下、右下 | 該当なし |
バッジを商品画像に重ねる | はめ込み: フローティング、フラッシュ、垂直にドッキング、水平にドッキング | 該当なし |
バッジのサイズを変更する | はめ込みサイズ | 該当なし |
セール価格の色 | [商品: 詳細] セクションの [セール料金の色] を使用 | 該当なし |
ステータス バッジの色 | 黒と白のいずれかのみ (バッジの背景色に基づく) | 該当なし |
在庫僅少ラベルの色 | 在庫僅少ラベルの色 | 在庫僅少ラベルの色 |
在庫僅少ラベルのフォント | 在庫僅少ラベルのフォント | 在庫僅少ラベルのフォント |
画像のズーム、クイック ビュー、ホバー効果
商品に複数の画像がある場合、ストア ページにカーソルを合わせると、常に代替の商品画像が表示されます。商品の詳細は、常に商品画像の下に表示されます。ページまたはブロック設定でクイック ビューを有効にすることができます。クイック ビュー ライトボックスの背景色は、ストア セクションの色に従います。
画像ズームはストア ページでは利用できません。ただし、商品詳細ページをクリックしてカーソルを合わせると、ライトボックスと画像ズームを有効にできます。[商品アイテム] パネルで次の効果を有効にします。
- ライトボックス - クリックすると画像がライトボックス ウィンドウで開きます。
- ズーム - クリックまたはカーソルを合わせると、画像の詳細が拡大表示されます。
以下の表を使用して、次のテンプレート ファミリーに適したスタイル オプションを見つけてください。
- アドバンスト - Brine、Farro、Skye、Tremont、York
- クラシック - Adirondack、Avenue、Aviator、Bedford、Five、Flatiron、Forte、Ishimoto、Momentum、Montauk、Native、Pacific、Wells、Wexley
- Galapagosは、代替画像と商品情報オーバーレイのオプションをサポートしています。
- Supplyは、独自の商品情報オーバーレイのオプションをサポートしています。
ホバー効果
詳細ストア ページでアイテムのホバー動作の微調整オプションを表示するには、[商品: 詳細] セクションに移動し、[位置: 下] を選択します。
サイト スタイル セクション
- アドバンスト - 商品: レイアウト
- クラシック - 商品
説明 | アドバンスト | クラシック |
ホバー アクションを設定する |
アイテムにカーソルを合わせたときの動作 ([商品: 詳細] の位置が [下] に設定されている場合に表示されます) |
該当なし |
商品エディターでホバー時に2枚目の画像を表示する | アイテムのホバー動作: 代替画像を表示する | 該当なし |
ホバー時に商品の詳細をフェード |
アイテムのホバー動作: フェード |
該当なし |
ホバー効果なし |
[商品: 詳細] セクションで [位置: 下] を選択し、[商品: レイアウト] セクションで [アイテムのホバー動作: なし] を選択します。 |
商品リストのタイトル: 下 |
ホバー時に代替画像やフェードの代わりに商品の詳細を表示する |
[商品: 詳細] セクションで、[位置: オーバーレイ] を選択します。 |
商品リストのタイトル: オーバーレイ |
商品画像の下に商品タイトルを表示する | 該当なし | 商品リストのタイトル: 下 |
ホバー時のオーバーレイの色を変更する | 該当なし | 商品のオーバーレイの色 |
ホバー時に商品価格を表示または非表示にする | 該当なし | 商品料金を表示する |
代替イメージのヒント:
- 2番目の商品画像に透明な領域がある場合、最初の画像はホバー時にその領域に表示されます。
画像ズーム
サイト スタイル セクション
- アドバンスト - 商品: 画像ズーム
- クラシック - なし
説明 | アドバンスト | クラシック |
画像ズームを有効または無効にする | 画像ズームを有効にする | 該当なし |
画像ズーム倍率を設定する | 画像ズーム倍率 | 該当なし |
クリックまたはホバー時に画像ズームが有効になるように設定する | 以下の時点でズームを有効にする | 該当なし |
商品画像をライトボックスで開くように設定する |
ライトボックスを有効にします。[ライトボックスを有効化] 設定が表示されない場合は、画像ズームを有効にし、ホバー時にズームが有効になるように設定します。これにより、[ライトボックスを有効化] 設定が表示されます。ライトボックスを有効にした後に画像ズームを無効にすることができます。 画像ズームとライトボックスの両方を有効にするには、画像ズームがホバー時に有効になるように設定する必要があります。 |
該当なし |
画像ズームのヒント:
- 背景が透明な画像 (.png) では、拡大されたバージョンの背後に元の画像が表示されます。
クイック ビュー
クイック ビューを有効にすると、[サイト スタイル] パネルに新しいセクションが表示されます。スタイル設定がサイト全体に適用され、見た目に一貫性を持たせることができます。
訪問者は商品クイック ビューを使用して、ストア ページから離れることなくライトボックスで商品の詳細を確認できます。この機能は従来のストア ページでは使用できませんが、これらのテンプレートの商品詳細ページのライトボックスで商品画像が開きます。
サイト スタイル セクション
- アドバンスト - 商品: クイック ビュー ボタン
- クラシック - なし
説明 | アドバンスト | クラシック |
クイック ビュー ボタンのスタイル、色、フォント、パディング、位置、サイズをカスタマイズする | 位置 | 該当なし |
ライトボックスの外観をカスタマイズする | 商品: クイック ビュー ライトボックス | 該当なし |
商品の説明を表示する | 抜粋の表示: 切り捨て | 該当なし |
ストア ページのライトボックスの後ろにカラー フィルターを追加する | オーバーレイの色 | 該当なし |
ライトボックスの外側に表示されるナビゲーションと [閉じる] ボタンを変更する | コントロール | 該当なし |
クイック ビューのタイトルのフォントを変更する | [商品: 詳細] セクションで、[タイトルのフォント] を選択する | 該当なし |
クイック ビューのヒント:
- クイック ビュー テキストの書式設定に問題がある場合は、商品詳細をプレーン テキストとして追加してみてください。
- クイック ビューはモバイル端末では利用できません。
- [クイック ビュー] ボタンのテキストはカスタマイズできません。
- 商品画像はトリミングされた正方形としてクイック ビューで表示されます。
- 商品の説明は、ヘッダーのスタイル、太字、斜体、箇条書きなどの特別な書式がない状態でクイック ビューに表示されます。
フォントと色
ストア ページと商品詳細ページの色とフォントは、サイト全体のフォントと色の微調整オプションに従います。セクション スタイル エディターで特定のストア セクションの色を変更することもできます。商品詳細ページは、ストア セクションのカラー テーマに従います。
- ストア ページで、[デザインを編集] をクリックし、サイト スタイル を開きます。
- [フォント] をクリックします。
- フォントを選択し、をクリックして、サイトの特定の部分にフォントを適用します。
次の微調整オプションを使用して、ストア ページと商品詳細ページのフォントを変更します。
セクション | ストア ページのエレメント |
見出し | ページ タイトル、関連商品セクション タイトル、商品タイトル |
段落 | 商品説明、価格、ページ ナビゲーション |
ボタン | ボタン |
メタ | その他のスタイル (タグや価格など) |
アドバンスト: 商品: リスト | リストのタイトル、リストの価格、リストのステータス |
アドバンスト: 商品詳細ページ | アイテムのタイトル、アイテムの価格、アイテムの説明、バリエーション フィールド |
以下の表を使用して、次のテンプレート ファミリーに適したスタイル オプションを見つけてください。
- アドバンスト - Brine、Farro、Skye、Tremont、York
- クラシック - Adirondack、Avenue、Aviator、Bedford、Five、Flatiron、Forte、Ishimoto、Momentum、Montauk、Native、Pacific、Wells、Wexley
クラシック ストア ページ
クラシック ストア ページのテキストには、サイトの他のページのテキストと同じスタイル微調整オプションが適用されます。たとえば、アイテム タイトルのフォントや色を変更するには、[ヘッダー] または [見出し1] の微調整オプションを使用します。カテゴリー ナビゲーションなど、一部のエレメントには独自のフォント微調整オプションがあり、スタイルを設定するエレメントを基準にしたリストをこのガイドで紹介しています。
バリエーション ドロップダウン メニューは例外で、すべてのクラシック ストア ページで同じフォントが使用されています。このフォントはサイト スタイルでは変更できません。
アドバンスト ストア ページ
アドバンスト ストア ページのフォントは、サイトの他の部分でのスタイル微調整オプションに従いますが、ストア ページの特定のエレメントに合わせて追加のフォント微調整オプションが行われています。これらの微調整オプションについては、スタイルを設定するエレメントを基準にしたリストをこのガイドで紹介しています。
モバイル
スマートフォン、タブレット、および幅の狭いブラウザーでは、商品アイテムと情報が縦に積み重ねられます。
- 現在、クイック ビューと画像ズームはモバイルでは利用できません。
- タイトルと料金は、ストア ページの商品画像の下に常に表示されます。
- オーバーレイの色、代替イメージ、フェード効果は表示されません。
- カテゴリー ナビゲーションが1行に収まらない場合は、水平方向のスクロール リストとして表示され、訪問者はこれをスワイプできます。
バージョン7.1では、以下のようになります。
- 商品詳細ページの画像は常にスライドショーで表示されるため、顧客はスワイプして閲覧できます。サムネイル画像はスライドショーの下に表示されません。
- レイアウトが [フル] と [シンプル] の商品ページでは、説明の前に [カートに追加] ボタンが表示されます。
- カテゴリー ナビゲーションは購入者がスワイプできるように横方向に表示されます。
- 商品は1列または2列で表示されます。モバイル ビューで、[編集] をクリックし、次に [セクションを編集] をクリックします。 [+] または [-] アイコンをクリックして、表示する列の数を変更します。
- モバイル端末では、訪問者がストアのランディング ページのカテゴリー タグをクリックすると、パンくずリスト ナビゲーションが表示されます。訪問者がストア ページで商品を直接クリックした場合、パンくずリスト ナビゲーションは表示されません。
- 商品詳細ページの画像は、レイアウトに関係なく、縦横比1:1で表示されます。
バージョン7.0の場合、以下のようになります。
- アドバンスト ストア ページでは、商品のタイトル、料金、セール価格に独自のモバイル カラーを使用できます。
- 商品は2列以上で表示されます。
テンプレートのその他のモバイル オプションについては、「バージョン7.0の高度なモバイル用スタイル」にアクセスしてください。バージョン7.1には個別のモバイル用スタイルがありません。