ストアの全ページにわたるグローバル設定の構成（OS 3.0 テーマ） – SHOPLINE ヘルプセンター

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

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

始める前に：正しいツールを使用していることを確認してください

この記事は、PC版テーマエディター（オンラインストア > デザインからアクセス）内の設定について説明しています。Shopper App内のグローバルテーマ設定をお探しの場合は、「グローバルテーマ設定の構成」をご参照ください。

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

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

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

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

ストアロゴの設定

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

これらの設定は、ストアのヘッダーに表示されるロゴを制御します。ヘッダーセクションでロゴが設定されている場合は、ここで設定したロゴよりも優先されます。以下の設定が可能です：

ロゴ：ストアロゴとして使用する画像ファイルをアップロードします。
PC版でのロゴ幅：PC版でのロゴ表示幅をピクセル単位で設定します。
モバイルでのロゴ幅：モバイルでのロゴ表示幅をピクセル単位で設定します。

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

パーツの色

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

各カラースキームには以下の色設定が含まれます：

商品
- 販売価格：商品価格に使用される色を設定します。
- 割引金額：割引された金額の表示に使用される色を設定します。
- 割引タグのテキスト：割引タグのテキスト色を設定します。

その他
- 背景色： スキームのデフォルト背景色を設定します。
- カートのプロンプトポイント： カートのプロンプトインジケータードットの色を設定します。
- カートのプロンプトテキスト： カートのプロンプトテキストの色を設定します。
- 画像の背景： 商品画像の背後に表示される背景色を設定します。
- マットポップアップウィンドウの背景： モーダルポップアップウィンドウの背景オーバーレイ色を設定します。
- 影：スキーム全体で使用される影の色を設定します。

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

ストアフロント全体の商品のカードコンテナに独立した背景色を設定できます。これにより、ページの背景とカードの背景が視覚的に区別される必要がある場合に、商品カードの表示をより細かく制御できます。

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

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

カードの背景色は以下の表示優先順位に従います：

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

注意：

カード背景色は、商品カードの表示スタイルがカードに設定されている場合にのみ有効です。メディア背景色はカード内の商品画像エリアに特化して適用され、メディア背景色が設定されていない場合はカード背景色がそのエリアに表示されます。
テーマの対応状況： この機能はSHOPLINEが開発したすべてのOS 3.0テーマで利用可能です。

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

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

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

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

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

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

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

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

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

注意：

商品レコメンドのレイアウト設定も再編成されました。既存のレイアウトオプションは、セクション設定内のレイアウトドロップダウンにまとめられ、設定パネルがすっきりと一貫したものになっています。
テーマの対応状況： この機能はBottleテーマでのみ利用可能です。

タイポグラフィ

タイポグラフィセクションは、ストアフロント全体で使用されるフォントとテキストスタイルを制御します。設定は、見出し用のタイトルからタイトル6まで、本文用の本文から本文6までのテキストレベルごとに整理されています。各テキストレベルは、以下のオプションで個別に設定できます：

フォント： 利用可能なフォントライブラリから書体を選択します。
フォント間隔： 文字間隔をパーセンテージで設定します。
フォントサイズ： テキストサイズをピクセル単位で設定します。
フォント行間： テキストレベルの行間を設定します。
テキストのすべて大文字表示： このレベルのすべてのテキストを大文字で表示するかどうかを切り替えます。

注：ボディレベルにはすべて大文字表示の切り替えは含まれていません。

商品カードの表示設定とカート追加の動作設定

商品カードセクションでは、コレクションページ、検索結果、レコメンデーションセクションなど、ストア内の個々の商品カードの見た目と動作を制御します。ビジュアルスタイリングに加え、このセクションでは、顧客がSKUを選択し、商品カードから直接購入を完了する方法など、カート追加の体験も設定できます。以下の設定エリアに分かれています：

商品情報

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

クイック追加アイコンの表示：商品カード上のクイック追加アイコンの表示・非表示を切り替えます。

カート追加フロー：顧客が商品カードのカート追加アイコンをクリックしたときの購入経路を制御します。この設定は、複数のバリエーションがある商品に対してSKU選択ステップを選ぶなど、商品カタログに基づいてカート追加体験を最適化するために使用します。オプションは以下の通りです：

クイック追加：商品を直接カートに追加します。
ポップアップ商品選択：顧客がカートに追加する前にSKUを選択するポップアップが開きます。

ポップアップ商品カードオーバーレイ：顧客がカート追加アイコンをクリックすると、商品カードの画像上にSKUセレクターがオーバーレイとして表示されます。顧客はSKUを選択し、再度カート追加アイコンをクリックして購入を完了します。

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

商品カード割引タグ

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

注：これらの設定は商品カードのプロモーションタグにのみ影響します。商品詳細ページのタグ表示を設定するには、商品詳細 > 販売価格に移動してください。

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

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

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

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

注：

この設定は、商品に複数の価格があり、商品カードでSKUが事前に選択されていない場合にのみ有効です。デフォルト選択SKUが有効になっている場合、商品カードは事前に選択されたSKUの価格を直接表示し、この設定は無効になります。
テーマの対応状況：この機能は、SHOPLINEが開発したすべてのOS 3.0テーマで利用可能ですが、Bottleテーマは除きます。

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

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

スタイル: 商品カードの全体的なレイアウトを設定します。オプションは以下の通りです:
- 標準: 商品カードをフラットで境界線のないレイアウトで表示します。
- カード: 商品カードを明確なカードコンテナ付きで表示します。
画像の利益率: 商品画像とカードの端との間のスペースをピクセル単位で設定します。
境界線: 商品カードのアウトラインを制御します。
- 太さ: 境界線の幅をピクセル単位で設定します。
- 不透明度: 境界線の透明度をパーセンテージで調整します。
- 境界線の半径: 商品カードの角の丸みをピクセル単位で設定します。
影: 商品カードにドロップシャドウ効果を追加します。
- 不透明度: 影の透明度をパーセンテージで設定します。
- 垂直オフセット: 影をピクセル単位で上下に移動させます。
- 左右オフセット: 影をピクセル単位で左右に移動させます。
- ぼかし: 影のエッジの柔らかさをピクセル単位で制御します。

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

レイアウト

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

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

ボタン

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

これらの設定はストア全体のすべてのボタンの視覚的なスタイルを定義し、すべてのページで一貫したコールトゥアクションのスタイルを保証します。以下の項目を設定できます:

ボーダー: ボタンの視覚的な輪郭を制御します。
- 太さ: ボーダーの幅をピクセル単位で設定します。
- 不透明度: ボーダーの透明度をパーセンテージで調整します。
- ボーダー半径: ボタンの角の丸みをピクセル単位で設定します。値が大きいほど角がより丸くなります。
シャドウ: ボタンにドロップシャドウ効果を追加します。
- 不透明度: シャドウの透明度をパーセンテージで設定します。
- 垂直オフセット: シャドウをピクセル単位で上下に移動させます。
- 左右オフセット: シャドウをピクセル単位で左右に移動させます。
- ぼかし: シャドウのエッジの柔らかさをピクセル単位で制御します。

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

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

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

ボーダー: バリエーションセレクターボタンの輪郭を制御します。
- 太さ: ボーダーの幅をピクセル単位で設定します。
- 不透明度: ボーダーの透明度をパーセンテージで調整します。
- ボーダー半径: 角の丸みをピクセル単位で設定します。
シャドウ: バリエーションセレクターボタンにドロップシャドウ効果を追加します。
- 不透明度: シャドウの透明度をパーセンテージで設定します。
- 垂直オフセット: シャドウをピクセル単位で上下に移動させます。
- 左右オフセット: シャドウをピクセル単位で左右に移動させます。
- ぼかし: シャドウのエッジの柔らかさをピクセル単位で制御します。

入力欄

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

これらの設定は、検索バーやフォームフィールドなど、ストアフロント全体のすべてのテキスト入力欄の外観を制御します。以下を設定できます：

ボーダー: 入力フィールドのアウトラインを制御します。
- 太さ: ボーダーの幅をピクセル単位で設定します。
- 不透明度: ボーダーの透明度をパーセンテージで調整します。
- ボーダー半径: 入力フィールドの角の丸みをピクセル単位で設定します。
シャドウ: 入力フィールドにドロップシャドウ効果を追加します。
- 不透明度: シャドウの透明度をパーセンテージで設定します。
- 垂直オフセット: シャドウをピクセル単位で上下に移動させます。
- 水平オフセット: シャドウをピクセル単位で左右に移動させます。
- ぼかし: シャドウのエッジの柔らかさをピクセル単位で制御します。

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

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

これらの設定は、ストア全体のドロップダウンメニューとモーダルポップアップウィンドウの視覚的なスタイリングを制御します。以下の項目を設定できます：

ボーダー: ドロップダウンメニューとポップアップウィンドウのアウトラインを制御します。
- 太さ: ボーダーの幅をピクセル単位で設定します。
- 不透明度: ボーダーの透明度をパーセンテージで調整します。
- ボーダー半径: 角の丸みをピクセル単位で設定します。
シャドウ: ドロップダウンメニューとポップアップウィンドウにドロップシャドウ効果を追加します。
- 不透明度: シャドウの透明度をパーセンテージで設定します。
- 垂直オフセット: シャドウをピクセル単位で上下に移動させます。
- 水平オフセット: シャドウをピクセル単位で左右に移動させます。
- ぼかし: シャドウのエッジの柔らかさをピクセル単位で制御します。

カート

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

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

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

このセクションでは、カートのカラースキームも設定できます。

コレクションカード

以下の設定は、グローバル設定のコレクションカードにあります。

これらの設定は、ストアフロント全体のコレクションプレビューカードの外観を制御します。以下の項目を設定できます：

スタイル: カテゴリカードの全体的なレイアウトを設定します。オプションは以下の通りです:
- スタンダード: カテゴリカードをフラットで境界線のないレイアウトで表示します。
- カード: カテゴリカードを明確なカードコンテナ付きで表示します。
ボーダー: カテゴリカードのアウトラインを制御します。
- 太さ: ボーダーの幅をピクセル単位で設定します。
- 不透明度: ボーダーの透明度をパーセンテージで調整します。
- ボーダー半径: カテゴリカードの角の丸みをピクセル単位で設定します。
シャドウ: カテゴリカードにドロップシャドウ効果を追加します。
- 不透明度: シャドウの透明度をパーセンテージで設定します。
- 垂直オフセット: シャドウをピクセル単位で上下に移動させます。
- 水平オフセット: シャドウをピクセル単位で左右に移動させます。
- ぼかし: シャドウのエッジの柔らかさをピクセル単位で制御します。

ブログカード

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

これらの設定は、ブログ一覧ページのブログ投稿プレビューカードの外観を制御します。以下の項目を設定できます:

スタイル: ブログカードの全体的なレイアウトを設定します。オプションは以下の通りです:
- スタンダード: ブログカードをフラットで境界線のないレイアウトで表示します。
- カード: ブログカードを明確なカードコンテナ付きで表示します。
ボーダー: ブログカードのアウトラインを制御します。
- 太さ: ボーダーの幅をピクセル単位で設定します。
- 不透明度: ボーダーの透明度をパーセンテージで調整します。
- ボーダー半径: ブログカードの角の丸みをピクセル単位で設定します。
シャドウ: ブログカードにドロップシャドウ効果を追加します。
- 不透明度: シャドウの透明度をパーセンテージで設定します。
- 垂直オフセット: シャドウをピクセル単位で上下に移動させます。
- 水平オフセット: シャドウをピクセル単位で左右に移動させます。
- ぼかし: シャドウのエッジの柔らかさをピクセル単位で制御します。

その他のカード

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

これらの設定は、プロモーションコンテンツカードなど、商品カードやブログカード以外のカードパーツのビジュアルスタイルを制御します。以下の項目を設定できます：

ボーダー： 他のカードパーツのアウトラインを制御します。
- 太さ： ボーダーの幅をピクセル単位で設定します。
- 不透明度： ボーダーの透明度をパーセンテージで調整します。
- ボーダー半径： 角の丸みをピクセル単位で設定します。
シャドウ： 他のカードパーツにドロップシャドウ効果を追加します。
- 不透明度： シャドウの透明度をパーセンテージで設定します。
- 垂直オフセット： シャドウを上下にピクセル単位で移動させます。
- 水平オフセット： シャドウを左右にピクセル単位で移動させます。
- ぼかし： シャドウのエッジの柔らかさをピクセル単位で制御します。

ソーシャルメディア

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

このセクションでは、ストアのソーシャルメディアの連携と、顧客に表示される共有オプションの設定ができます。

アカウント： Facebook、X（Twitter）、Pinterest、Instagram、Snapchat、TikTok、YouTube、Vimeo、Tumblr、WhatsApp、LINE、LinkedInのいずれかのプラットフォームのストアプロフィールリンクを追加します。
カスタムソーシャルメディアリンク： 上記にない最大5つのカスタムソーシャルメディアエントリーを追加できます。各エントリーには名前とリンクを入力してください。
共有： ストアフロントから顧客が直接商品をソーシャルメディアで共有できるように共有オプションを切り替えます。以下のプラットフォームごとに個別に共有を有効にできます：
- 公式アイコンスタイル
- ソーシャルメディア名を表示
- Facebookで共有
- X（Twitter）でツイート
- Pinterestにピン
- LINEで共有
- WhatsAppで共有
- Tumblrで共有

ソーシャルメディアアイコンのカスタマイズ

SHOPLINEは、FacebookやInstagramのような汎用アイコンに加え、Discord、LINE、Redditなどのニッチまたは地域特化型プラットフォームをマーチャントがプロモートできるように、カスタムソーシャルメディア表示をサポートしています。これにより、カスタムコーディングやサードパーティアプリなしで、パーソナライズされたアイコンのアップロードとリンク先の設定が可能です。

設定方法

ストアのヘッダーまたはフッターにカスタムソーシャルメディアアイコンを設定するには：

SHOPLINE管理画面で、オンラインストア > デザイン > マイテーマに移動します。対応するOS 3.0テーマ（例：Fashion）を選択し、デザインをクリックしてテーマエディターに入ります。
テーマエディターで、テーマ設定 > ソーシャルメディアに移動します。
ページ下部までスクロールして、カスタムソーシャルメディアセクションを見つけます。ソーシャルメディア1からソーシャルメディア5までの5つの利用可能なスロットが表示されます。任意のスロットを選択して設定を開始します。
各エントリーに対して以下の設定を行います。
- アイコンのアップロード：カスタム画像をアップロードします（画像が正常にアップロードされるまではアイコンはグレー表示されます）。
- リンク：完全なリンク先URLを入力します。
  
  注：リンク欄は必須です。設定を保存するには、有効なURL形式（例：https://...）を入力する必要があります。
ヘッダーまたはフッターにアイコンを適用するには、保存をクリックします。