テーマエディター（OS 3.0）でストアの全ページにわたるグローバル設定の構成方法

グローバル設定は、テーマエディター（OS 3.0）内でストアフロント全体のデザインを一元管理するコントロールパネルです。ここで行った変更は、トップページから商品ページやカテゴリページまで、オンラインストアのすべてのページに一貫して適用されます。

このガイドでは、グローバル設定へのアクセス方法、各設定カテゴリの役割、そして最新の設定オプションを使ってストアフロントをパーソナライズする方法について説明します。

グローバル設定へのアクセス

テーマエディターでグローバル設定を開くには：

1. SHOPLINE管理画面から、オンラインストア > デザインに移動します。
2. 現在のテーマを見つけて、デザインボタンをクリックし、テーマエディターに入ります。
3. 左側のサイドバーで、グローバル設定のアイコンをクリックします。

テーマ設定パネルが表示され、ストアフロントのニーズに応じてさまざまなセクションの設定を行うことができます。このパネルで行ったすべての変更は、ストア全体で有効なテーマに適用されます。

カラーとタイポグラフィのカスタマイズ

パーツカラー

パーツカラーセクションでは、ストアフロントのカラーパレットを定義できます。4つのプリセットカラースキームから選択でき、各スキーム内の個別の色をブランドに合わせてカスタマイズ可能です。

カラースキームを設定するには、テーマ設定の下にあるパーツカラーを選択します。次に、編集したいスキームを選び、そのスキーム内の個別の色の値を必要に応じて調整します。

商品カードの背景色の設定

ストアフロント全体の商品のカードコンテナに独立した背景色を設定できます。これにより、ページの背景とカードの背景を視覚的に区別したい場合に、商品カードの見え方をより細かくコントロールできます。

カードの背景色を設定するには：

1. テーマエディターで、グローバル設定のアイコンをクリックしてグローバル設定を開きます。
2. カラーに移動し、編集したいスキームを選択します。
3. カード背景の設定を見つけて、希望の色を選択します。
4. 保存をクリックして変更を適用します。

カード背景色の表示優先順位は以下の通りです：

• メディア背景色： 設定されている場合、優先されて商品画像エリア内に適用されます。
• カード背景色： メディア背景色が設定されていない場合に商品カードコンテナに適用されます。
• デフォルト背景： 上記のいずれも設定されていない場合に適用されます。

タイポグラフィ

タイポグラフィセクションでは、ストアフロント全体で使用されるフォントを制御します。見出しと本文テキストの両方に対して以下の設定が可能です：

• フォントファミリー： 利用可能なフォントライブラリから書体を選択します。
• フォントサイズ： テキスト要素の基本サイズを設定します。
• 行間： 読みやすさのためにテキストの行間隔を調整します。

商品カードの外観設定

商品カードセクションでは、コレクションページ、検索結果、レコメンデーションセクションなど、ストア全体で個々の商品カードの見た目と動作を制御します。以下の設定エリアに分かれています：

商品情報

このセクションでは、各商品カードに表示される情報と顧客の操作方法を制御します。以下の設定はグローバル設定の商品カード > 商品情報にあります。

• クイック追加カートアイコンの表示: 商品カード上のクイック追加カートアイコンの表示・非表示を切り替えます。
• カート追加の流れ: 顧客がカート追加アイコンをクリックしたときの動作を決定します。オプションは以下の通りです:
  • クイック追加カート: 商品を直接カートに追加します。
  • ポップアップ商品選択: 顧客がSKUを選択してからカートに追加するポップアップを開きます。

  • ポップアップ商品カードオーバーレイ: SKU選択用の商品カードオーバーレイを表示します。

    注： ポップアップ商品カードオーバーレイが選択されている場合、各商品カードでオーバーレイトリガー表示が有効になっていることを確認してください。有効でない場合、選択されたSKUはオーバーレイを表示せずに直接カートに追加されます。オーバーレイと商品情報エリアの両方にバリエーションセレクターがある場合、オーバーレイで選択されたSKUが優先されます。ポップアップ商品選択が選ばれた場合は、ポップアップで選択されたSKUがカートに追加されます。

• PC版での商品タイトル表示: PC版での商品タイトルの表示・非表示を切り替えます。
• モバイルでの商品タイトル表示: モバイルでの商品タイトルの表示・非表示を切り替えます。
• 商品タイトル表示はカード上に表示される商品タイトルの量を制御します。オプションは以下の通りです:
  • 全表示: 長さに関係なく商品タイトルを完全に表示します。
  • 1行まで表示: タイトルを1行に切り詰めます。
  • 2行まで表示: タイトルを2行に切り詰めます。

商品カード割引タグ

このセクションでは、商品カードに表示されるプロモーション割引タグの外観を制御します。以下の設定はグローバル設定の商品カード > 商品カード割引タグにあります。

• プロモーションタグの角丸: タグの角の丸みをピクセル単位で設定します。
• ラベルスタイル: 割引タグが伝える情報を制御します。オプションは以下の通りです:
  • デフォルトスタイル（セール）: 一般的な「セール」ラベルを表示します。
  • 節約金額: 正確な節約金額を表示します。
  • 節約率: 割引率をパーセンテージで表示します。
• フォントスタイル: タグラベルのタイポグラフィを設定します。オプションはボディからボディ6まであります。
• 背景の不透明度: タグの背景の透明度をパーセンテージで調整します。

商品カードの販売価格表示スタイル

以下の設定は、グローバル設定の商品カード > 商品カード販売価格表示スタイルにあります。

• 価格の表示スタイル: 商品に複数の価格がある場合の商品カードでの価格表示方法を制御します。オプションは以下の通りです:
  • 最低価格: 利用可能な最も低い価格のみを表示します。
  • 価格帯: 価格の範囲全体を表示します（例：10ドル～30ドル）。
  • 最低価格から: 「～から」の接頭辞付きで最低価格を表示します（例：10ドルから）。

スタイル、ボーダー、シャドウ

以下の設定は、グローバル設定の商品カード > スタイル、ボーダー、およびシャドウにあります。

これらのセクションは、商品カードコンテナ自体の視覚的な表示を制御します。カードのレイアウトや画像比率（スタイル）、ボーダーの太さと色（ボーダー）、およびドロップシャドウの深さ（シャドウ）が含まれます。

その他のストアフロントパーツの設定

レイアウト

以下の設定は、グローバル設定のレイアウトにあります。

• ページ幅： ストアフロントのコンテンツエリアの最大幅を設定します。
• パーツの垂直間隔： ページ全体のセクションやパーツ間の垂直間隔を制御します。
• グリッド — 左右： 商品カードグリッドなどのグリッドレイアウト内のアイテム間の左右の間隔を設定します。
• グリッド — 垂直： グリッドレイアウト内の行間の垂直間隔を設定します。

ボタン

以下の設定はグローバル設定のボタンにあります。

これらの設定は、ストア全体のすべてのボタンの視覚的スタイルを定義し、角の半径、サイズ、境界線の処理を含み、すべてのページで一貫したコールトゥアクションスタイルを保証します。

バリエーションセレクター

以下の設定はグローバル設定のバリエーションセレクターにあります。

これらの設定は、ストアフロント全体のサイズや色のボタンなどの商品バリエーションオプションセレクターの視覚的スタイルを制御し、境界線や影のスタイリングを含みます。

入力欄

以下の設定はグローバル設定の入力欄にあります。

これらの設定は、検索バーやフォーム入力など、ストアフロント全体のすべてのテキスト入力フィールドの外観を制御し、境界線のスタイルや角の半径を含みます。

ドロップダウンとポップアップ

以下の設定はグローバル設定のドロップダウンとポップアップにあります。

これらの設定は、ストア全体のドロップダウンメニューやモーダルポップアップウィンドウの視覚的スタイリングを制御し、境界線や影の詳細を含みます。

ドロワー

以下の設定はグローバル設定のドロワーにあります。

これらの設定は、カートドロワーなど、ストア全体のスライドインドロワーパネルの視覚的スタイリングを制御し、境界線や影の詳細を含みます。

カート

以下の設定はグローバル設定のカートにあります。

カートスタイルは、カート体験が顧客にどのように提示されるかを制御します。以下のオプションから選択してください：

• ドロワー： 現在のページを離れることなく、カートをスライドインパネルとして開きます。
• ショッピングカートページに移動： 顧客を直接フルカートページにナビゲートします。
• ポップアップ通知： 商品がカートに追加されたときに短い通知を表示します。

このセクションでカート表示のカラー設定も構成できます。

メディア

以下の設定はグローバル設定のメディアにあります。

これらの設定は、ストアフロント全体の画像およびメディアパーツの視覚的スタイリングを制御し、境界線や影の処理を含みます。

コンテンツコンテナ

以下の設定はグローバル設定のコンテンツコンテナにあります。

これらの設定は、ストアフロントのセクション全体で使用されるコンテンツラッパー要素の視覚的スタイリングを制御し、境界線や影の処理を含みます。

ブログカード

以下の設定はグローバル設定のブログカードにあります。

これらの設定は、ブログ一覧ページのブログ投稿プレビューカードの外観（レイアウトスタイル、ボーダー、シャドウなど）を制御します。

その他のカード

以下の設定は、グローバル設定のその他のカードにあります。

これらの設定は、商品カードやブログカード以外のカード要素（プロモーションコンテンツカードなど）の視覚スタイル（ボーダーやシャドウのスタイリングなど）を制御します。

ソーシャルメディア

以下の設定は、グローバル設定のソーシャルメディアにあります。

ここにストアのソーシャルメディアプロフィールへのリンクを追加してください。これらのリンクは通常、ストアフロントのフッターに表示されます。

ファビコン

以下の設定は、グローバル設定のファビコンにあります。

ブラウザのタブやブックマークでストアを表す小さなアイコンをアップロードしてください。最適な結果を得るには、正方形の画像を使用してください。

カスタムCSS

以下の設定は、グローバル設定のカスタムCSSにあります。

ここに入力されたCSSは、オンラインストアのすべてのページに適用されます。このセクションはストアフロント全体のスタイル変更にのみ使用してください。特定のページに限定した修正は、そのページの設定内でカスタムCSSを適用してください。

注目セクションのカラースキーム設定（Bottleテーマ）

Bottleテーマの注目商品および商品レコメンドセクションは、セクションレベルでカラースキームの設定をサポートしています。これにより、各セクションのタイトル、リンクテキスト、背景色をテーマのカラースキームに連動させ、ストアフロント全体でこれらのセクションの表示をより細かく制御できます。

注目商品のカラースキームを設定するには：

1. テーマエディターで、注目商品セクションを含むページに移動します。
2. 注目商品セクションをクリックして設定を開きます。
3. カラーの下で、希望のカラースキームを選択します。セクションのタイトル、リンクテキスト、背景色がそれに応じて更新されます。
4. 保存をクリックして変更を適用します。

商品レコメンドのカラースキームを設定するには：

1. テーマエディターで、商品レコメンドセクションを含むページに移動します。
2. 商品レコメンドセクションをクリックして、その設定を開きます。
3. カラーの下で、お好みのカラースキームを選択します。セクションのタイトルと背景色がそれに応じて更新されます。
4. 保存をクリックして変更を適用します。

カラースキームの設定は以下の表示優先順位に従います：

• ブロックレベルのカラースキーム： 設定されている場合、そのブロックのコンテンツエリア内で優先されます。
• セクションレベルのカラースキーム： ブロック固有のエリア外のセクション全体のタイトルと背景に適用されます。

例えば、ブロックが白い背景に設定され、セクションが薄い灰色の背景に設定されている場合、ブロックのコンテンツエリアは白く表示され、周囲のセクションエリアは薄い灰色のままになります。