ストア ページと商品詳細ページのスタイル オプションは、2か所で変更できます。

• ストア ページ - サイト プレビューで [編集] をクリックし、編集するストア セクションのペイントブラシ アイコンをクリックします。ストア セクション スタイルを開く方法の詳細については、「コレクション ページのセクション」をご覧ください。
• 商品詳細ページ - 編集する商品詳細ページを開きます。[デザインを編集] をクリックして、ペイントブラシアイコンをクリックします。これらのスタイル設定は、サイト上のすべての商品詳細ページに適用されます。

ストア ページのスタイルを設定するには、以下の手順に従います。

1. 編集するストア ページを開きます。
2. [Webサイト] パネルに戻り、[デザイン]、[サイト スタイル] の順にクリックします。
3. 商品セクションの微調整オプションを使用して、ランディング ページのスタイルを変更します。
4. 個々の商品詳細ページに固有の微調整オプションの場合は、サイト スタイルを終了し、商品を開いてからサイト スタイルを再入力してください。

ヒント:

• プレビュー パネルでページのエリアをクリックすると、そのエリアで使用できるスタイル微調整オプションが表示され、それ以外は非表示になります。
• 複数のストア ページがある場合、スタイルの変更はサイト全体のすべてのストア ページに適用され、一貫した外観が作成されます。
• テンプレートには、バナー画像やページ ヘッダーなど、ストア ページの外観に影響する機能がある場合があります。

ストア ページの訪問者には、グリッドに配置されたすべての商品アイテムのアイキャッチ画像が表示されます。ストア ページには最大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は異なるスタイル微調整オプションに従います。商品のスタイル設定の詳細については、テンプレート ガイドを参照してください。

レイアウト

ストア ページの訪問者には、グリッドに配置されたすべての商品アイテムのアイキャッチ画像が表示されます。以下の微調整オプションでグリッドのスタイルを設定します。

サイト スタイル セクション

• アドバンスト - 商品: レイアウト
• クラシック - 商品

商品情報

アドバンスト ストア ページのモバイル用微調整オプションを表示するには、[位置: オーバーレイ] を選択します。

サイト スタイル セクション

• アドバンスト - 商品: 詳細
• クラシック - 商品

表示される画像は商品画像です。商品詳細ページのスタイルを設定するには、次の手順に従います。

1. 編集する商品の詳細ページを開きます。
2. 左上隅の [デザインを編集] をクリックします。一部のサイトでは、[編集] にカーソルを合わせて [デザインを編集] をクリックし、[ペイントブラシ] アイコンをクリックする必要があります。

次のレイアウト オプションから選択してください。

• シンプル - 商品画像と説明文が空白で囲まれて横並びに表示されます。
• ラップ - 商品画像は説明文の周りを囲むように表示されます。画像は常に左揃えになります。
• ハーフ - 商品画像は説明文でページを分割します。画像は常に左揃えになります。
• フル - 商品画像は、説明の上にあるフルブリードのカルーセルに表示されます。

[シンプル] レイアウトを選択した場合は、次のオプションもカスタマイズできます。

• バリエーションの表示
• 画像の幅
• 画像の縦横比 (スライドショーとカルーセル デザインのみ)。
  • カルーセル デザインでは、縦横比によって画像コンテナーの縦横比が決まりますが、画像が収まるようにトリミングされない場合があります。設定で選択したのと同じ縦横比の画像を追加することをおすすめします。
• テキストの配置
• 商品ナビゲーション スタイル
• 説明の位置 - 商品の説明が表示される場所です。
• [カートに追加] ボタン - [インライン] オプションでは、[数量] フィールドの横にボタンが配置されます。
• 画像の間隔
• ギャラリーの幅
• コンテンツの配置 (上、中央) - 配置が上の場合、商品画像の上部とテキストの間にパディングが表示される場合があります。コンテンツの配置は、スライドショーとカルーセルのデザインで使用できますが、スタックでは使用できません。
• デザイン (スライドショー、スタック、カルーセル) - デザインがスライドショーの場合、他の商品画像のサムネイルが表示されます。
• ギャラリーの配置
• ギャラリー サムネイルの配置 - デザインがスライドショーの場合、商品のアイキャッチ画像を配置します。
• フォームの幅
• カルーセル矢印のサイズと色
• クリックでのアクション (ズームまたはライトボックス)
• ホバーでのアクション (ズームまたはなし)
• 画像ズーム倍率

サブスクリプションの頻度

サブスクリプション商品を販売している場合は、商品詳細ページの [サブスクリプションの頻度] セクションに表示される色を変更できます。サイトのカラー テーマを開き、商品詳細ページ: サブスクリプションで色を変更します。

関連商品

商品詳細ページの関連商品セクションは、ストア セクションのスタイルの微調整オプションに従っています。商品詳細ページからこれらの設定にアクセスするには、ストア ページに戻って左上の [編集] をクリックします。フォントはサイトのフォント微調整オプションに従います。

[カートに追加] ボタンと [精算] ボタン

[カートに追加] ボタンは、ストア ページの商品サムネイルの下、および個々の商品詳細ページに表示することができます。ストア ページでは、ボタンの色は商品のテキストと背景の色に従います。商品詳細ページの [カートに追加] ボタンと、ショッピング カート ページの [精算] ボタンは両方とも、プライマリ ボタンのスタイル微調整オプションとサイトの色の設定に従います。外観と操作感に一貫性を持たせるため、ボタンのスタイル オプションはサイト上のほとんどのボタンに適用されることに注意してください。これらのボタンは常に顧客を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のときに購入者がその商品をカートに複数追加しようとするのを防ぐことができます。

[カートに追加] ボタン

サイト スタイル セクション

• アドバンスト - ボタンを表示
• クラシック - ボタン

ヒント: 商品が売り切れると、[カートに追加] ボタンは淡色表示されます。

[精算] ボタン

ショッピング カート ページに表示される [精算] ボタンは、サイトの色設定に従います。形状やフォントをカスタマイズすることはできません。

関連商品

関連商品がページ下部のグリッドに表示されます。これらの微調整オプションを使用して、外観を変更できます。

サイト スタイル セクション

• アドバンスト - 商品: 関連商品
• クラシック - 商品

アイコンは既定でサイト ヘッダーにカートとして表示されます。ショッピング カート アイコンを非表示にすると、顧客がカートに商品を追加したときにページの下部にアイコンが表示されます。詳細については、「ショッピング カート アイコンの表示」をご覧ください。

顧客のカート内の商品数を表示し、精算ページに誘導するショッピング カート ボタンは、すべてのテンプレートがサポートしています。カートが表示されない場合は、トラブルシューティングのヒントを参照してください。テンプレートのショッピング カート アイコンのスタイルを設定する方法については、「ショッピング カート アイコンの表示」を参照してください。

カテゴリー ナビゲーションは、ストア ページの上部またはサイドバーに表示できます。ただし、モバイル端末の場合、カテゴリー ナビゲーションは常に上部に表示されます。

カテゴリー ナビゲーション フォントは段落スタイルに従います。色は、サイト スタイルの [商品: 基本グリッド] にある [カテゴリー ナビ] 微調整オプションに従います。

位置によっては、サブカテゴリーがネストされたメニューに表示されます。位置を変更するには、セクション スタイルを開き、[カテゴリーの種類] の [サイドバー] または [上部] をクリックします。ナビゲーションの順序を変更するには、カテゴリー マネージャーでカテゴリーをクリックしてドラッグします。

• サイドバー - サブカテゴリーは、ストア ページのネスト メニューと、フィルターされたカテゴリー ページに表示されます。
• 上部 - サブカテゴリーはフィルタリングされたメイン カテゴリー ページに表示されますが、フィルタリングされたサブカテゴリー ページには表示されません。

カテゴリー ナビゲーションを非表示にするには、カテゴリー設定を開き、[フィルターに表示] の横にあるトグルをオフにします。これをすべてのカテゴリーで繰り返します。詳細については、「商品の整理」を参照してください。

カテゴリー ナビゲーションはアルファベット順に表示されます。以下の表を使用して、次のテンプレート ファミリーに適したスタイル オプションを見つけてください。

• アドバンスト - Brine、Farro、Skye、Tremont、York
• クラシック - Adirondack、Avenue、Aviator、Bedford、Five、Flatiron、Forte、Ishimoto、Momentum、Montauk、Native、Pacific、Wells、Wexley
• ユニーク - GalapagosとSupplyは異なるスタイル微調整オプションに従います。これらのテンプレートではカテゴリー ナビゲーションを非表示にすることはできません。カテゴリー ナビゲーションのスタイル設定については、テンプレート ガイドをご覧ください。

サイト スタイル セクション

• アドバンスト - 商品: ソート + フィルター
• クラシック - 商品

• 売り切れのアイテムについては、ストア ページおよび商品詳細ページの商品画像の下に常にステータス バッジが表示されます。
• セールおよび在庫僅少ラベルは、サイトの色やその他のフォントの微調整オプションに従います。

以下の表を使用して、次のテンプレート ファミリーに適したスタイル オプションを見つけてください。

• アドバンスト - Brine、Farro、Skye、Tremont、York
• クラシック - Adirondack、Avenue、Aviator、Bedford、Five、Flatiron、Forte、Ishimoto、Momentum、Montauk、Native、Pacific、Wells、Wexley
• ユニーク - GalapagosとSupplyは異なるスタイル微調整オプションに従います。商品のスタイル設定の詳細については、テンプレート ガイドを参照してください。

これらのスタイル微調整オプションにアクセスするには、サイト スタイルを開く前に、編集するストア ページに移動してください。

サイト スタイル セクション

• アドバンスト - 商品: ステータス バッジ
• クラシック - 商品

商品に複数の画像がある場合、ストア ページにカーソルを合わせると、常に代替の商品画像が表示されます。商品の詳細は、常に商品画像の下に表示されます。ページまたはブロック設定でクイック ビューを有効にすることができます。クイック ビュー ライトボックスの背景色は、ストア セクションの色に従います。

画像ズームはストア ページでは利用できません。ただし、商品詳細ページをクリックしてカーソルを合わせると、ライトボックスと画像ズームを有効にできます。[商品アイテム] パネルで次の効果を有効にします。

• ライトボックス - クリックすると画像がライトボックス ウィンドウで開きます。
• ズーム - クリックまたはカーソルを合わせると、画像の詳細が拡大表示されます。

以下の表を使用して、次のテンプレート ファミリーに適したスタイル オプションを見つけてください。

• アドバンスト - Brine、Farro、Skye、Tremont、York
• クラシック - Adirondack、Avenue、Aviator、Bedford、Five、Flatiron、Forte、Ishimoto、Momentum、Montauk、Native、Pacific、Wells、Wexley
• Galapagosは、代替画像と商品情報オーバーレイのオプションをサポートしています。
• Supplyは、独自の商品情報オーバーレイのオプションをサポートしています。

ホバー効果

詳細ストア ページでアイテムのホバー動作の微調整オプションを表示するには、[商品: 詳細] セクションに移動し、[位置: 下] を選択します。

サイト スタイル セクション

• アドバンスト - 商品: レイアウト
• クラシック - 商品

代替イメージのヒント:

• 2番目の商品画像に透明な領域がある場合、最初の画像はホバー時にその領域に表示されます。

画像ズーム

サイト スタイル セクション

• アドバンスト - 商品: 画像ズーム
• クラシック - なし

画像ズームのヒント:

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

クイック ビュー

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

訪問者は商品クイック ビューを使用して、ストア ページから離れることなくライトボックスで商品の詳細を確認できます。この機能は従来のストア ページでは使用できませんが、これらのテンプレートの商品詳細ページのライトボックスで商品画像が開きます。

サイト スタイル セクション

• アドバンスト - 商品: クイック ビュー ボタン
• クラシック - なし

クイック ビューのヒント:

• クイック ビュー テキストの書式設定に問題がある場合は、商品詳細をプレーン テキストとして追加してみてください。
• クイック ビューはモバイル端末では利用できません。
• [クイック ビュー] ボタンのテキストはカスタマイズできません。
• 商品画像はトリミングされた正方形としてクイック ビューで表示されます。
• 商品の説明は、ヘッダーのスタイル、太字、斜体、箇条書きなどの特別な書式がない状態でクイック ビューに表示されます。

ストア ページと商品詳細ページの色とフォントは、サイト全体のフォントと色の微調整オプションに従います。セクション スタイル エディターで特定のストア セクションの色を変更することもできます。商品詳細ページは、ストア セクションのカラー テーマに従います。

1. ストア ページで、[デザインを編集] をクリックし、サイト スタイル を開きます。
2. [フォント] をクリックします。
3. フォントを選択し、をクリックして、サイトの特定の部分にフォントを適用します。

次の微調整オプションを使用して、ストア ページと商品詳細ページのフォントを変更します。

以下の表を使用して、次のテンプレート ファミリーに適したスタイル オプションを見つけてください。

• アドバンスト - Brine、Farro、Skye、Tremont、York
• クラシック - Adirondack、Avenue、Aviator、Bedford、Five、Flatiron、Forte、Ishimoto、Momentum、Montauk、Native、Pacific、Wells、Wexley

クラシック ストア ページ

クラシック ストア ページのテキストには、サイトの他のページのテキストと同じスタイル微調整オプションが適用されます。たとえば、アイテム タイトルのフォントや色を変更するには、[ヘッダー] または [見出し1] の微調整オプションを使用します。カテゴリー ナビゲーションなど、一部のエレメントには独自のフォント微調整オプションがあり、スタイルを設定するエレメントを基準にしたリストをこのガイドで紹介しています。

バリエーション ドロップダウン メニューは例外で、すべてのクラシック ストア ページで同じフォントが使用されています。このフォントはサイト スタイルでは変更できません。

アドバンスト ストア ページ

アドバンスト ストア ページのフォントは、サイトの他の部分でのスタイル微調整オプションに従いますが、ストア ページの特定のエレメントに合わせて追加のフォント微調整オプションが行われています。これらの微調整オプションについては、スタイルを設定するエレメントを基準にしたリストをこのガイドで紹介しています。