ストア内すべてのページにわたるグローバル設定の構成（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テーマは除きます。

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

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

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

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

レイアウト

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

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

ボタン

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

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

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

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

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

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

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

注：これらの設定は、ストアフロント全体のバリエーションセレクターにグローバルに適用されます。特定の商品関連パーツ（例えば、商品カードや注目商品）にバリエーションセレクターパーツが追加されている場合も含みます。もしバリエーションセレクターの見た目がパーツレベルで設定した内容と異なる場合は、このグローバル設定のセクションも確認してください。バリエーションセレクターパーツ自体の追加と設定の詳細については、「名前付きカラーを使用したカラーチップの設定（OS 3.0 テーマ）」を参照してください。

入力

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

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

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

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

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

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

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

カート

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

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

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

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

カテゴリカード

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

これらの設定は、ストアフロント全体のカテゴリプレビューカードの外観を制御します。次の項目を設定できます：

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

ブログカード

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

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

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

その他のカード

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

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

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

ソーシャルメディア

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

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

アカウント：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://...）を入力する必要があります。
ヘッダーまたはフッターにアイコンを適用するには、保存をクリックします。