テーマ設定

テーマエディタのサイドバーメニューでテーマ設定をカスタマイズし、オンラインストアのタイポグラフィー、色、SNSのリンク、およびカートページを変更できます。テーマ設定の変更はオンラインストア全体に適用されます。

セクションとブロックには、テーマの個々のセクションをカスタマイズするために調整できる設定もあります。セクションとブロックについて詳しくはこちらをご覧ください。

ロゴ

オンラインストアにビジネスのロゴを追加できます。ロゴは以下の場所に表示されます。

すべてのページのヘッダー
パスワードページ

ロゴをカスタマイズする

ロゴ画像の最大幅は300ピクセルです。

手順

デスクトップ

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[カスタマイズする] をクリックします。
[テーマ設定] のアイコンをクリックします。
ロゴをクリックします。
[ロゴ] エリアで、自身の画像を追加するか無料の画像を使用します。
- 自身の画像を追加する場合は、[画像を選択] をクリックして新規または既存の画像を追加します。
  - 管理画面にすでにアップロードしている画像を使用するには、画像を選択し、[完了] をクリックします。
  - ローカルコンピューター上の画像を使用する場合は、[画像を追加] をクリックします。画像を選択して追加し、[完了] をクリックします。
- 無料の画像を使用する場合は、[無料の画像を探す] をクリックします。画像を見つけたら、画像をクリックして選択し、[選択] をクリックします。
任意：ロゴ画像に代替テキストを追加する場合は、以下の手順を実行します。
1. [ロゴ] エリアの [編集] をクリックします。
2. [代替テキスト] フィールドに画像の簡単な説明を入力します。
3. [保存] をクリックします。
任意：[デスクトップ用ロゴの幅] エリアの範囲スライダーを使用すると、ロゴのピクセル幅を調整できます。
[保存] をクリックします。

iPhone

Shopifyアプリから、[] アイコンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
[⋮] をタップしてから、[テーマ設定] をタップします。
[ロゴ] をタップします。
[ロゴ] エリアで、自身の画像を追加するか無料の画像を使用します。
- 自身の画像を追加するには、[画像を選択] をタップして、新規または既存の画像を追加します。
  - 管理画面にアップロード済みの画像を使用する場合は、画像を選択して [完了] をタップします。
  - ローカルデバイス上の画像を使用する場合は、[画像を追加] をタップし、ローカルデバイス上の画像を選択して追加し、画像をタップして選択した後に [完了] をタップします。
- 無料の画像を使用する場合は、[無料の画像を探す] をタップします。画像を見つけたら、画像をタップして選択し、[完了] をタップします。
任意：ロゴ画像に代替テキストを追加する場合は、以下の手順を実行します。
1. [ロゴ] エリアの [編集] をタップします。
2. [代替テキスト] フィールドに画像の簡単な説明を入力します。
3. [✓] をタップします。
任意：[デスクトップ用ロゴの幅] エリアの範囲スライダーを使用すると、ロゴのピクセル幅を調整できます。
[✓] をタップします。

Android

Shopifyアプリから、[] アイコンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
[…] をタップしてから、[テーマ設定] をタップします。
[ロゴ] をタップします。
[ロゴ] エリアで、自身の画像を追加するか無料の画像を使用します。
- 自身の画像を追加するには、[画像を選択] をタップして、新規または既存の画像を追加します。
  - 管理画面にアップロード済みの画像を使用する場合は、画像を選択して [完了] をタップします。
  - ローカルデバイス上の画像を使用する場合は、[画像を追加] をタップし、ローカルデバイス上の画像を選択して追加し、画像をタップして選択した後に [完了] をタップします。
- 無料の画像を使用する場合は、[無料の画像を探す] をタップします。画像を見つけたら、画像をタップして選択し、[完了] をタップします。
任意：ロゴ画像に代替テキストを追加する場合は、以下の手順を実行します。
1. [ロゴ] エリアの [編集] をタップします。
2. [代替テキスト] フィールドに画像の簡単な説明を入力します。
3. [✓] をタップします。
任意：[デスクトップ用ロゴの幅] エリアの範囲スライダーを使用すると、ロゴのピクセル幅を調整できます。
[✓] をタップします。

ファビコンを追加する

オンラインストアのブランディングに役立つ、お気に入りアイコン「ファビコン」を追加できます。ファビコンは、以下の場所に表示されます。

ウェブブラウザのタブ
ウェブブラウザの履歴
デスクトップのアイコン
ウェブサイトがブックマークされた際のオンラインストア名の横

ファビコンについて詳しくはこちらをご覧ください。

手順

デスクトップ

管理画面から [オンラインストア] > [テーマ] に移動します。
ファビコンを追加するテーマを見つけて、[カスタマイズ] をクリックします。
[テーマ設定] のアイコンをクリックします。
テーマバージョンに応じて、[ロゴ] または [ファビコン] をクリックします。
[ファビコン画像] セクションの [画像を選択] をクリックして、新規または既存の画像を追加します。
- 管理画面にすでにアップロードしている画像を使用するには、画像を検索し、チェックボックスをオンにして選択します。
- ローカルコンピューターから画像を選択するには、[画像を追加] をクリックし、ローカルコンピューターから画像を開き、チェックボックスをオンにして選択します。
[完了] をクリックします。
任意：ファビコン画像に代替テキストを追加するには、以下の手順を実行します。
1. [ファビコン画像] セクションで、[編集] をクリックします。
2. [代替テキスト] フィールドに画像の簡単な説明を入力します。
3. [保存] をクリックします。
[保存] をクリックします。

iPhone

Shopifyアプリから、[] アイコンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
ファビコンを追加するテーマを見つけて、[カスタマイズ] をタップします。
[⋮] をタップしてから、[テーマ設定] をタップします。
テーマバージョンに応じて、[ロゴ] または [ファビコン] をタップします。
[ファビコン画像] セクションで [画像を選択] をタップして、新規または既存の画像を追加します。
- 管理画面にすでにアップロードしている画像を使用するには、画像を検索し、チェックボックスをオンにして選択します。
- ローカルデバイスから画像を選択するには、[画像を追加] をタップし、ローカルデバイスから画像を開き、チェックボックスをオンにして選択します。
[完了] をタップします。
ファビコン画像に代替テキストを追加するには、以下の手順を実行します。
1. [ファビコン画像] セクションで、[編集] をタップします。
2. [代替テキスト] フィールドに画像の簡単な説明を入力します。
3. [✓] をタップします。
[✓] をタップします。

Android

Shopifyアプリから、[] アイコンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
ファビコンを追加するテーマを見つけて、[カスタマイズ] をタップします。
[…] をタップしてから、[テーマ設定] をタップします。
テーマバージョンに応じて、[ロゴ] または [ファビコン] をタップします。
[ファビコン画像] セクションで [画像を選択] をタップして、新規または既存の画像を追加します。
- 管理画面にすでにアップロードしている画像を使用するには、画像を検索し、チェックボックスをオンにして選択します。
- ローカルデバイスから画像を選択するには、[画像を追加] をタップし、ローカルデバイスから画像を開き、チェックボックスをオンにして選択します。
[完了] をタップします。
ファビコン画像に代替テキストを追加するには、以下の手順を実行します。
1. [ファビコン画像] セクションで、[編集] をタップします。
2. [代替テキスト] フィールドに画像の簡単な説明を入力します。
3. [✓] をタップします。
[✓] をタップします。

色

テーマ設定でさまざまなカラースキームを定義し、配色ピッカーを使用してそのカラースキームをオンラインストア全体のさまざまなセクションに適用できます。カラースキームとは配色のことです。テーマにはデフォルトのカラースキームセットがありますが、テーマエディタでいつでも変更することができます。ブランドカラーを追加して、オンラインストア全体に統一感のあるカラーパレットを適用することが可能です。

テンプレートには個別の色の設定がないため、オンラインストアのデザインはウェブサイト全体で一貫しています。テンプレートは、ストアのメインページまたはスメインコンテンツとみなされます。ストア全体でさまざまなカラースキームを使用すると、ユーザーエクスペリエンスが低下し、お客様が商品を購入せずにストアを離れる可能性があります。

カラースキームは最大21個まで作成およびカスタマイズでき、オンラインストアのさまざまなセクションに適用することができます。

配色

カラースキームとは、視覚的に表現する仕方で要素とそのそれぞれの色をグループ化したテーマ設定です。配色ピッカーが利用可能なテーマ全体に適用できる統一感のあるカラースキームには、さまざまな要素に異なる色を割り当てることができます。最大21のカラースキームを利用できます。また、スキームプレビューで、選択した色がどのように表示されるかを確認することも可能です。

テーマエディタでカラースキームに適用できる設定のリスト。
設定	説明
背景	色は、特定セクションの背景、アウトラインボタンの背景に適用されます。
背景のグラデーション	色のグラデーションは、特定セクションの背景に適用されます。可能な場合は、背景の代わりにその背景グラデーションが適用されます。
テキスト	色は、セクションまたはブロックテキストに適用されます。
ソリッドボタンの背景	色は、プライマリーボタンの背景に適用されます。
ソリッドカラーのボタンのラベル	色は、プライマリーボタンのテキストに適用されます。
アウトラインボタン	色は、サブボタンのテキストと枠線に適用されます。
影	色は、影に適用されます。

配色を管理する

ストアのカラースキームとカラーオプションは、テーマ設定内で設定します。ソリッドカラーを使用する場合は、カラーピッカーを使用して新しい色を選択するか、テキストフィールドに色の値を入力します。カラーフィールドでは、以下の色名と値を使用できます。

red、black、blueなどの色の名前
RGBカラーコード
16進数の色の値

手順

管理画面から [オンラインストア] > [テーマ] に移動します。
カスタマイズするテーマの横の [カスタマイズ] をクリックします。
アイコンをクリックしてから、[色] をクリックします。
[スキーム] セクションで、既存のスキームをクリックするか、[スキームを追加] をクリックして新しいカラースキームを追加します。
変更するコンテンツタイプの色の色見本をクリックします。
色を設定するには、16進カラーコードを入力するかカラーピッカーから色を選択します。色を透明に設定するには、テキストフィールドから16進コードを削除します。
[保存] をクリックします。

カラースキームを適用する

テーマ設定でカラースキームを定義した後、テーマのセクションとブロックに配色ピッカーを使用したカラースキームを割り当てることができます。配色ピッカーは、特定のセクション、ブロック、および一般的なテーマ設定でのみ利用可能です。

グラデーション

一部のテーマでは、色のグラデーションを設定して、視覚的に興味をひく背景オプションを作成できます。color_backgroundの設定は、CSS背景プロパティをカスタマイズするために使用されます。

グラデーションピッカーを使用すると、グラデーションの色、グラデーションスタイル、角度、位置、不透過率を選択できます。グラデーションピッカーで選択したオプションは、テーマエディタでリアルタイムにプレビューされます。検証チェッカー機能を含むCSSコードを使用して、グラデーション背景を作成することもできます。

グラデーションを設定する

管理画面から [オンラインストア] > [テーマ] に移動します。
カスタマイズするテーマの横の [カスタマイズ] をクリックします。
アイコンをクリックしてから、[色] をクリックします。
[スキーム] セクションで、編集する既存のスキームをクリックします。
グラデーションの色見本オプション ([背景のグラデーション] など) をクリックします。
これまでグラデーションを設定したことがない場合は、いくつかのプリセットオプションが表示され、そこから選択できます。グラデーションのプリセットを選択して、オプションパネルを開きます。
以下のグラデーションオプションを選択します。
- 直線または放射状のグラデーションを、目的に応じてボタンで選択します。
- グラデーションの角度は、上下の矢印で設定します。上や下の矢印をクリックすると、角度のパーセンテージが5ずつ増減します。
- スライダーを使用してグラデーションの位置を選択するか、フィールドに数値を入力します。
- 特定の色の16進コードを入力するか、カラースライダーを使用して色調を選択します。最近選択した色は、グラデーションオプションのパネル下部に表示されます。
- グラデーションを不透明にする場合は、右側のスライダーを使用してグラデーションの透明度を選択します。16進カラーコードの横にあるフィールドに、パーセンテージを入力することもできます。
[保存] をクリックします。

CSSを使用してグラデーションを設定する

ほとんどのCSSbackgroundプロパティ値は、背景色を設定する際に使用できます。このフィールドでは、ソリッドカラー (たとえば、#000000、black、rgb(0,0,0,0)、rgba(0,0,0,0)、hsl(0, 0%, 0%)、hsla(0, 0%, 0%, 1)は、黒のソリッドカラーの背景を生成します)、またはグラデーション (たとえば、linear-gradient(red, green)、radial-gradient(red, green)、conic-gradient(red, green)) を使用することができます。グラデーションを繰り返し使用することも可能です。

手順

管理画面から [オンラインストア] > [テーマ] に移動します。
カスタマイズするテーマの横の [カスタマイズ] をクリックします。
アイコンをクリックしてから、[色] をクリックします。
[スキーム] セクションで、編集する既存のスキームをクリックします。
編集するグラデーションをクリックします。
[グラデーション] の横にある矢印をクリックして [CSS] を選択します。
[CSSコード] フィールドに、グラデーションコードを入力または貼り付けます。テーマエディタのプレビューでは、グラデーションが適切な位置に表示されます。
[保存] をクリックします。

グラデーションを削除する

管理画面から [オンラインストア] > [テーマ] に移動します。
カスタマイズするテーマの横の [カスタマイズ] をクリックします。
アイコンをクリックしてから、[色] をクリックします。
[スキーム] セクションで、編集する既存のスキームをクリックします。
削除するグラデーションをクリックします。
[グラデーションを削除] をクリックします。
[保存] をクリックします。

タイポグラフィー

オンラインストアのテキストに使用するフォントのスタイルおよびサイズを設定できます。システムフォントまたはカスタムフォントを選択できます。

システムフォントはユーザーのコンピューターにすでにインストールされているため、ストアにはシステムフォントの使用を推奨します。システムフォントを使用することにより、新しいフォントがお客様のコンピューターにダウンロードされることを防ぎ、ストアの読み込み速度への悪影響を抑制できます。お客様のコンピューターに表示されるフォントは、オペレーティングシステムによって異なります。

フォントタイプをカスタマイズする

利用可能なフォントのリストについては、Shopifyのフォントライブラリーを参照してください。

手順

デスクトップ

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[カスタマイズする] をクリックします。
[テーマ設定] のアイコンをクリックします。
[タイポグラフィー] をクリックします。
ストアの見出しまたは本文のフォントタイプを変更する場合は、[見出し] セクションまたは [本文] セクションの [変更] をクリックします。
使用するフォントの名前をクリックし、[選択] をクリックします。
[保存] をクリックします。

iPhone

Shopifyアプリから、[] アイコンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
[⋮] をタップしてから、[テーマ設定] をタップします。
[タイポグラフィー] をタップします。
ストアの見出しまたは本文のフォントタイプを変更するには、[見出し] または [本文] セクションの [変更] をタップします。
使用するフォントの名前をタップして [完了] をタップします。
[✓] をタップします。

Android

Shopifyアプリから、[] アイコンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
[…] をタップしてから、[テーマ設定] をタップします。
[タイポグラフィー] をタップします。
ストアの見出しまたは本文のフォントタイプを変更するには、[見出し] または [本文] セクションの [変更] をタップします。
使用するフォントの名前をタップして [完了] をタップします。
[✓] をタップします。

フォントサイズをカスタマイズする

タイポグラフィーのテーマ設定内で、見出しと本文用のデフォルトのフォントサイズを設定できます。

最小のフォントサイズは100％で、最大のフォントサイズは150％です。スケール1目盛りごとにフォントサイズは5％増加します。デフォルトの設定は100％です。

手順

デスクトップ

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[カスタマイズする] をクリックします。
[テーマ設定] のアイコンをクリックします。
[タイポグラフィー] をクリックします。
見出しのデフォルトのフォントサイズを変更するには、[フォントサイズスケール] 範囲スライダーを使用してデフォルトのフォントサイズを選択します。
本文のデフォルトのフォントサイズを変更するには、[フォントサイズスケール] 範囲スライダーを使用してデフォルトのフォントサイズを選択します。
[保存] をクリックします。

iPhone

Shopifyアプリから、[] アイコンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
[⋮] をタップしてから、[テーマ設定] をタップします。
[タイポグラフィー] をタップします。
見出しのデフォルトのフォントサイズを変更するには、[フォントサイズスケール] 範囲スライダーを使用してデフォルトのフォントサイズを選択します。
本文のデフォルトのフォントサイズを変更するには、[フォントサイズスケール] 範囲スライダーを使用してデフォルトのフォントサイズを選択します。
[✓] をタップします。

Android

Shopifyアプリから、[] アイコンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
[…] をタップしてから、[テーマ設定] をタップします。
[タイポグラフィー] をタップします。
見出しのデフォルトのフォントサイズを変更するには、[フォントサイズスケール] 範囲スライダーを使用してデフォルトのフォントサイズを選択します。
本文のデフォルトのフォントサイズを変更するには、[フォントサイズスケール] 範囲スライダーを使用してデフォルトのフォントサイズを選択します。
[✓] をタップします。

レイアウト

オンラインストアの表示最大幅を設定したり、セクション間の垂直スペースおよび水平スペースを設定することができます。

手順

デスクトップ

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[カスタマイズする] をクリックします。
[テーマ設定] のアイコンをクリックします。
[レイアウト] をクリックします。
[ページ幅] 範囲スライダーを使用して、ページの幅を1000ピクセルから1600ピクセルの間で選択します。デフォルト設定は1600ピクセルです。
任意：範囲スライダーを使用して、各ページのテンプレートセクション間に垂直スペースを追加します。セクション間には最大100ピクセルを追加できます。
任意：[グリッド] レイアウトを使用している場合は、[水平スペース] と [垂直スペース] の範囲スライダーを使用して、ページのグリッドコンテンツ間にスペースを追加します。水平スペースを追加すると、ページのコンテンツ行に最大40ピクセルのスペースを追加でき、垂直スペースを追加すると、ページのコンテンツ列に最大40ピクセルのスペースを追加できます。
[保存] をクリックします。

iPhone

Shopifyアプリから、[] アイコンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
[⋮] をタップしてから、[テーマ設定] をタップします。
[レイアウト] をタップします。
[ページ幅] 範囲スライダーを使用して、ページの幅を1000ピクセルから1600ピクセルの間で選択します。デフォルト設定は1600ピクセルです。
任意：範囲スライダーを使用して、各ページのテンプレートセクション間に垂直スペースを追加します。セクション間には最大100ピクセルを追加できます。
任意：[グリッド] レイアウトを使用している場合は、[水平スペース] と [垂直スペース] の範囲スライダーを使用して、ページのグリッドコンテンツ間にスペースを追加します。水平スペースを追加すると、ページのコンテンツ行に最大40ピクセルのスペースを追加でき、垂直スペースを追加すると、ページのコンテンツ列に最大40ピクセルのスペースを追加できます。
[保存] をタップします。

Android

Shopifyアプリから、[] アイコンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
[…] をタップしてから、[テーマ設定] をタップします。
[レイアウト] をタップします。
[ページ幅] 範囲スライダーを使用して、ページの幅を1000ピクセルから1600ピクセルの間で選択します。デフォルト設定は1600ピクセルです。
任意：範囲スライダーを使用して、各ページのテンプレートセクション間に垂直スペースを追加します。セクション間には最大100ピクセルを追加できます。
任意：[グリッド] レイアウトを使用している場合は、[水平スペース] と [垂直スペース] の範囲スライダーを使用して、ページのグリッドコンテンツ間にスペースを追加します。水平スペースを追加すると、ページのコンテンツ行に最大40ピクセルのスペースを追加でき、垂直スペースを追加すると、ページのコンテンツ列に最大40ピクセルのスペースを追加できます。
[✓] をタップします。

アニメーション

アニメーションを使用することにより、オンラインストアに動きや視覚的な面白さを加えることができます。スクロール操作によってストアのセクションが現れるフェードインアニメーションや、カードやボタンのホバー効果を有効にすることも可能です。

手順

デスクトップ

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[カスタマイズする] をクリックします。
[テーマ設定] のアイコンをクリックします。
[アニメーション] をクリックします。
任意：スクロール操作によってオンラインストアのセクションが現れるアニメーションを有効にするには、[スクロールでセクションを表示する] を選択します。
任意：カードとボタンにホバー効果のあるアニメーションを追加するには、[ホバー効果] 設定の以下のオプションのいずれかを選択します。
- 垂直リフト：お客様がカードやボタンにカーソルを合わせると、要素が上向きにシフトします。
- 3D表示：お客様がカードまたはボタンにカーソルを合わせると、画面に表示される部分が3D表示されます。表示部分をさりげなく輝く光が動き、さらに魅力的に見えます。
[保存] をクリックします。

iPhone

Shopifyアプリから、[] アイコンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
[⋮] をタップしてから、[テーマ設定] をタップします。
[アニメーション] をタップします。
任意：スクロール操作によってオンラインストアのセクションが現れるアニメーションを有効にするには、[スクロールでセクションを表示する] を選択します。
任意：カードとボタンにホバー効果のあるアニメーションを追加するには、[ホバー効果] 設定の以下のオプションのいずれかを選択します。
- 垂直リフト：お客様がカードやボタンにカーソルを合わせると、要素が上向きにシフトします。
- 3D表示：お客様がカードまたはボタンにカーソルを合わせると、画面に表示される部分が3D表示されます。表示部分をさりげなく輝く光が動き、さらに魅力的に見えます。
[保存] をタップします。

Android

Shopifyアプリから、[] アイコンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
[…] をタップしてから、[テーマ設定] をタップします。
[アニメーション] をタップします。
任意：スクロール操作によってオンラインストアのセクションが現れるアニメーションを有効にするには、[スクロールでセクションを表示する] を選択します。
任意：カードとボタンにホバー効果のあるアニメーションを追加するには、[ホバー効果] 設定の以下のオプションのいずれかを選択します。
- 垂直リフト：お客様がカードやボタンにカーソルを合わせると、要素が上向きにシフトします。
- 3D表示：お客様がカードまたはボタンにカーソルを合わせると、画面に表示される部分が3D表示されます。表示部分をさりげなく輝く光が動き、さらに魅力的に見えます。
[✓] をタップします。

視覚要素のカスタマイズ設定

[テーマ設定] ページで、ボタンや商品カード、バリエーションなど、テーマの各要素の外観を調整できます。各オプションには、その要素に関連する設定が含まれています。

テーマの以下の要素の設定を調整できます。

[ボタン]：ボタンには、スライドショーやテキスト付き画像などのセクションにあるCTAボタンのほか、商品ページやカートページの問い合わせフォームのボタンも含まれます。
バリエーションのピル型ボタン：バリエーションのピル型ボタンを使用すると、1つの商品ページ上に商品の複数のバリエーションを表示したり、特集商品セクションを表示したりできます。お客様は、商品ページを移動することなく、欲しいバリエーションを選択してカートに商品を追加することができます。オンラインストアでバリエーションのピル型ボタンを表示する方法は、カスタマイズすることも可能です。
入力項目：入力項目は、数量セレクター、メール登録フォーム、またはカートメモなど、お客様の入力が必要なインタラクティブな部分です。オンラインストアの入力項目の見た目を調整することができます。
商品カード、コレクションカード、ブログカードの設定では、ページセクションに表示される各カードタイプのスタイルをカスタマイズできます。 - 商品カード：商品カードは、コレクションテンプレート、コレクションセクション、検索結果など、複数の商品が一覧表示されるテーマ内のエリアに商品情報を表示します。 - コレクションカード：コレクションカードは、コレクションリストテンプレートやコレクションリストセクションなど、コレクションが一覧表示されるテーマ内のエリアにコレクション情報を表示します。 - ブログカード：ブログカードは、ブログテンプレート、ブログセクション、検索結果など、複数の商品が一覧表示されるテーマ内のエリアに、ブログ記事の情報を表示します。
コンテンツコンテナ：コンテンツコンテナは、スライドショーや画像バナー上のテキストボックス、マルチカラムセクションの列など、コンテンツセクションのテキスト要素に使用されます。オンラインストア用にコンテンツコンテナの見た目をカスタマイズできます。
メディア：メディアは、商品メディアやテキスト付き画像セクションの画像など、セクションの視覚的コンポーネントです。メディアに罫線や影を追加することができます。
ドロップダウンとポップアップ：オンラインストアのドロップダウンメニュー、ポップアップモーダル、カートポップアップの形式を調整できます。
ドロワー：ドロワーとは、通常表示されないインタラクティブなコンテナ (折りたたみ式メニューやコレクションの絞り込みオプションなど) で、タップまたはクリックして表示します。オンラインストアのドロワーの罫線と影は、カスタマイズすることができます。
バッジ：[販売] バッジと[売り切れ] バッジは、値下げした際と在庫数が0になった際、商品画像に自動的に追加されます。[販売]バッジと[売り切れ] バッジの位置、形状、カラーはテーマ設定で個々に調整できます。[ページ] バッジと [ブログ] バッジは、関連性のある検索結果に表示されます。バッジの位置と形はカスタマイズできますが、[ページ] バッジと [ブログ] バッジの色はカスタマイズできません。
ブランド情報：オンラインストアには、ブランド自体に関する情報を追加できます。以下の手順を実行することにより、オンラインストアのフッターにブランド情報ブロックを追加できます。

手順

デスクトップ

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマの横の [カスタマイズ] をクリックします。
アイコンをクリックします。
[要素] をクリックして [設定] を開きます。
利用可能な設定を調整できます。テーマ内のさまざまなエリアに移動して、[プレビューウィンドウ] で変更内容を確認できます。
[保存] をクリックします。

iPhone

Shopifyアプリから、[] アイコンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
編集するテーマの横の [カスタマイズ] をタップします。
アイコンをタップします。
[要素] をタップして [設定] を開きます。
利用可能な設定を調整できます。テーマ内のさまざまなエリアに移動して、[プレビューウィンドウ] で変更内容を確認できます。
[✓] をタップします。

Android

Shopifyアプリから、[] アイコンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
編集するテーマの横の [カスタマイズ] をタップします。
アイコンをタップします。
[要素] をタップして [設定] を開きます。
利用可能な設定を調整できます。テーマ内のさまざまなエリアに移動して、[プレビューウィンドウ] で変更内容を確認できます。
[✓] をタップします。

自身のSNSアカウントへのリンクを追加して、オンラインストアのフッターに表示することができます。

手順

デスクトップ

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[カスタマイズする] をクリックします。
[テーマ設定] のアイコンをクリックします。
[SNS] をクリックします。
SNSアカウントへのリンクを追加するには、関連する [ソーシャルアカウント] フィールドにアカウントのウェブサイトアドレスを入力します。https://instagram.com/shopify または https://tiktok.com/@shopify など、完全なリンクを入力する必要があります。
[保存] をクリックします。

iPhone

Shopifyアプリから、[] アイコンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
[⋮] をタップしてから、[テーマ設定] をタップします。
[SNS] をタップします。
SNSアカウントへのリンクを追加するには、関連する [ソーシャルアカウント] フィールドにアカウントのウェブサイトアドレスを入力します。https://instagram.com/shopify または https://tiktok.com/@shopify など、完全なリンクを入力する必要があります。
[✓] をタップします。

Android

Shopifyアプリから、[] アイコンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
[…] をタップしてから、[テーマ設定] をタップします。
[SNS] をタップします。
SNSアカウントへのリンクを追加するには、関連する [ソーシャルアカウント] フィールドにアカウントのウェブサイトアドレスを入力します。https://instagram.com/shopify または https://tiktok.com/@shopify など、完全なリンクを入力する必要があります。
[✓] をタップします。

検索行動

オンラインストアには、お客様が検索フィールドに入力し始めると候補が表示される、予測検索が組み込まれています。検索候補が表示されると、お客様は検索クエリを明確にして絞り込むことができ、オンラインストアを検索する新しい方法を利用できます。また、検索候補が表示されることでお客様は、検索結果の別個のリストを確認するために現在のページを離れることなく、一致するものを素早く表示することもできるようになります。

検索候補がどのように機能するかについて詳しくは、「予測検索」を参照してください。

検索候補の表示方法はカスタマイズすることができます。

手順

デスクトップ

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[カスタマイズする] をクリックします。
[テーマ設定] のアイコンをクリックします。
[検索行動] をクリックします。
検索候補を有効または無効にするには、[検索候補を有効にする] を選択または解除します。
任意：検索候補で商品の販売元を表示または非表示にするには、[商品の販売元を表示] を選択または選択解除します。
任意：検索候補で商品価格を表示または非表示にするには、[商品価格を表示] を選択または選択解除します。
[保存] をクリックします。

iPhone

Shopifyアプリから、[] アイコンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
[⋮] をタップしてから、[テーマ設定] をタップします。
[検索行動] をタップします。
検索候補を有効または無効にするには、[検索候補を有効にする] を選択または解除します。
任意：検索候補で商品の販売元を表示または非表示にするには、[商品の販売元を表示] を選択または選択解除します。
任意：検索候補で商品価格を表示または非表示にするには、[商品価格を表示] を選択または選択解除します。
[✓] をタップします。

Android

Shopifyアプリから、[] アイコンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
[…] をタップしてから、[テーマ設定] をタップします。
[検索行動] をタップします。
検索候補を有効または無効にするには、[検索候補を有効にする] を選択または解除します。
任意：検索候補で商品の販売元を表示または非表示にするには、[商品の販売元を表示] を選択または選択解除します。
任意：検索候補で商品価格を表示または非表示にするには、[商品価格を表示] を選択または選択解除します。
[✓] をタップします。

通貨形式

商品の価格に加えて通貨コードを表示するかどうかを選択することができます。

手順

デスクトップ

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[カスタマイズする] をクリックします。
[テーマ設定] のアイコンをクリックします。
[通貨フォーマット] をクリックします。
通貨コードを表示するには、[通貨コードを表示] を選択します。
[保存] をクリックします。

iPhone

Shopifyアプリから、[] アイコンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
[⋮] をタップしてから、[テーマ設定] をタップします。
[通貨のフォーマット] をタップします。
通貨コードを表示するには、[通貨コードを表示] を選択します。
[✓] をタップします。

Android

Shopifyアプリから、[] アイコンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
[…] をタップしてから、[テーマ設定] をタップします。
[通貨のフォーマット] をタップします。
通貨コードを表示するには、[通貨コードを表示] を選択します。
[✓] をタップします。

カート

オンラインストアのカートのスタイルを変更することができます。お客様がストアの商品をカートに追加すると、カートはドロワー、ページ、またはポップアップ通知として表示されます。お客様に商品ページにとどまっていただくには、ドロワーまたはポップアップ通知オプションを使用します。お客様をカートページに移動させるには、ページオプションを使用します。お客様のカートが空の場合、カートドロワーに特集コレクションを表示することができます。

手順

デスクトップ

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[カスタマイズする] をクリックします。
[テーマ設定] のアイコンをクリックします。
[カート] をクリックします。
[カートタイプ] ドロップダウンメニューを使用して、[ドロワー]、[ページ]、または [ポップアップ通知] のカートスタイルを選択します。
任意：お客様のカートにアイテムの販売元を表示するには、[販売元を表示] を選択します。
任意：特別なリクエストの入力や注文情報の追加ができるテキストボックスをお客様に表示するには、[カートメモを有効にする] を選択します。
任意：[カートタイプ] に [ドロワー] を選択すると、カートドロワーが空の場合にコレクションを表示できます。
1. [カートドロワー] エリアで、[コレクションを選択] をクリックします。
2. 表示するコレクションの名前をクリックし、[選択] をクリックします。
任意：[カートタイプ] に [ドロワー] を選択すると、以下の手順を実行してカートドロワーのカラースキームを変更することができます。
1. [カートドロワー] > [カラースキーム] エリアで、[変更] をクリックします。
2. カートドロワーに使用するカラースキームを選択します。
[保存] をクリックします。

iPhone

Shopifyアプリから、[] アイコンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
[⋮] をタップしてから、[テーマ設定] をタップします。
[カート] をタップします。
[カートタイプ] を、[ドロワー]、[ページ] または [ポップアップ通知] の選択肢から選択します。
任意：お客様のカートにアイテムの販売元を表示するには、[販売元を表示] を選択します。
任意：特別なリクエストの入力や注文情報の追加ができるテキストボックスをお客様に表示するには、[カートメモを有効にする] を選択します。
任意：[カートタイプ] に [ドロワー] を選択すると、カートドロワーが空の場合にコレクションを表示できます。
1. [カートドロワー] エリアで、[コレクションを選択] をタップします。
2. 表示するコレクションの名前をタップし、[完了] をタップします。
任意：[カートタイプ] に [ドロワー] を選択すると、以下の手順を実行してカートドロワーのカラースキームを変更することができます。
1. [カートドロワー] > [カラースキーム] エリアで、[変更] をタップします。
2. カートドロワーに使用するカラースキームを選択し、[完了] をタップします。
[✓] をタップします。

Android

Shopifyアプリから、[] アイコンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
[…] をタップしてから、[テーマ設定] をタップします。
[カート] をタップします。
[カートタイプ] を、[ドロワー]、[ページ] または [ポップアップ通知] の選択肢から選択します。
任意：お客様のカートにアイテムの販売元を表示するには、[販売元を表示] を選択します。
任意：特別なリクエストの入力や注文情報の追加ができるテキストボックスをお客様に表示するには、[カートメモを有効にする] を選択します。
任意：[カートタイプ] に [ドロワー] を選択すると、カートドロワーが空の場合にコレクションを表示できます。
1. [カートドロワー] エリアで、[コレクションを選択] をタップします。
2. 表示するコレクションの名前をタップし、[完了] をタップします。
任意：[カートタイプ] に [ドロワー] を選択すると、以下の手順を実行してカートドロワーのカラースキームを変更することができます。
1. [カートドロワー] > [カラースキーム] エリアで、[変更] をタップします。
2. カートドロワーに使用するカラースキームを選択し、[完了] をタップします。
[✓] をタップします。

カスタムCSS

[カスタムCSS] セクションでは、独自のCSSコードを入力することができます。たとえば、利用可能なデフォルト設定からオンラインストアのボタンの見た目をカスタマイズしたり、特定のテキスト要素に固有のスタイルを適用したりすることができます。

テーマ設定のカスタムCSSは、チェックアウトを除くオンラインストアのすべてのページに反映されます。

テーマにカスタムCSSを追加する方法について詳しくはこちら。

テーマスタイル

テーマスタイルとは、テーマデザイナーが選択した設定のコレクションのことです。テーマスタイルをストアに適用すると、洗練された見た目と雰囲気を実現することができます。すべてのテーマには、デフォルトで適用されるテーマスタイルがあります。選択できるその他のテーマスタイルのオプションは、ご利用のテーマにより異なります。

テーマをカスタマイズするときは、テーマスタイルの設定を自分の設定に置き換えます。テーマスタイルをテーマに適用すると、現在の設定 (色やタイポグラフィーなど) が変更されます。

手順

デスクトップ

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマを見つけて、[カスタマイズする] をクリックします。
[テーマ設定] のアイコンをクリックします。
[テーマスタイル] をクリックします。
使用するテーマスタイルを選択し、[スタイルを変更] をクリックします。
[保存] をクリックします。

iPhone

Shopifyアプリから、[] アイコンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
[⋮] をタップしてから、[テーマ設定] をタップします。
[テーマスタイル] をタップします。
使用するテーマスタイルを選択し、[完了] をタップします。
[✓] をタップします。

Android

Shopifyアプリから、[] アイコンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
編集するテーマを見つけて、[カスタマイズする] をタップします。
[…] をタップしてから、[テーマ設定] をタップします。
[テーマスタイル] をタップします。
使用するテーマスタイルを選択し、[完了] をタップします。
[✓] をタップします。

テーマ設定

目次

ロゴ

ロゴをカスタマイズする

手順

ファビコンを追加する

手順

色

配色

配色を管理する

手順

カラースキームを適用する

グラデーション

グラデーションを設定する

CSSを使用してグラデーションを設定する

手順

グラデーションを削除する

タイポグラフィー

フォントタイプをカスタマイズする

手順

フォントサイズをカスタマイズする

手順

レイアウト

手順

アニメーション

手順

視覚要素のカスタマイズ設定

手順

SNS

手順

検索行動

手順

通貨形式

手順

カート

手順

カスタムCSS

テーマスタイル

手順