ログイン
無料体験を始める

テーマ設定

テーマ設定を使用して、オンラインストアのタイポグラフィー、色、SNSのリンク、およびカートページを変更することができますテーマ設定を変更すると、オンラインストア全体に変更が適用されます。

目次

ロゴ

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

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

ロゴをカスタマイズする

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

手順:

デスクトップ
  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] の歯車アイコンをクリックします。
  4. ロゴをクリックします。
  5. [ロゴ] エリアで、自身の画像を追加するか無料の画像を使用します。
    • 自身の画像を追加する場合は、[画像を選択] をクリックして新規または既存の画像を追加します。
      • 管理画面にすでにアップロードしている画像を使用するには、画像を選択し、[完了] をクリックします。
      • ローカルコンピューター上の画像を使用する場合は、[画像を追加] をクリックします。画像を選択して追加し、[完了] をクリックします。

- 無料の画像を使用する場合は、[無料の画像を探す] をクリックします。画像を見つけたら、画像をクリックして選択し、[選択] をクリックします。

  1. 任意：ロゴ画像に代替テキストを追加する場合は、以下の手順を実行します。

    1. [ロゴ] エリアの [編集] をクリックします。
    2. [代替テキスト] フィールドに画像の簡単な説明を入力します。
    3. [保存] をクリックします。

  2. 任意：[デスクトップ用ロゴの幅] エリアの範囲スライダーを使用すると、ロゴのピクセル幅を調整できます。

  3. [保存] をクリックします。

iPhone
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [⋮] をタップしてから、[テーマ設定] をタップします。
  6. [ロゴ] をタップします。
  7. [ロゴ] エリアで、自身の画像を追加するか無料の画像を使用します。
    • 自身の画像を追加するには、[画像を選択] をタップして、新規または既存の画像を追加します。
      • 管理画面にアップロード済みの画像を使用する場合は、画像を選択して [完了] をタップします。
      • ローカルデバイス上の画像を使用する場合は、[画像を追加] をタップし、ローカルデバイス上の画像を選択して追加し、画像をタップして選択した後に [完了] をタップします。

- 無料の画像を使用する場合は、[無料の画像を探す] をタップします。画像を見つけたら、画像をタップして選択し、[完了] をタップします。

  1. 任意：ロゴ画像に代替テキストを追加する場合は、以下の手順を実行します。

    1. [ロゴ] エリアの [編集] をタップします。
    2. [代替テキスト] フィールドに画像の簡単な説明を入力します。
    3. [保存] をタップします。

  2. 任意：[デスクトップ用ロゴの幅] エリアの範囲スライダーを使用すると、ロゴのピクセル幅を調整できます。

  3. [保存] をタップします。

Android
  1. Shopifyアプリで [☰] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. […] をタップしてから、[テーマ設定] をタップします。
  6. [ロゴ] をタップします。
  7. [ロゴ] エリアで、自身の画像を追加するか無料の画像を使用します。
    • 自身の画像を追加するには、[画像を選択] をタップして、新規または既存の画像を追加します。
      • 管理画面にアップロード済みの画像を使用する場合は、画像を選択して [完了] をタップします。
      • ローカルデバイス上の画像を使用する場合は、[画像を追加] をタップし、ローカルデバイス上の画像を選択して追加し、画像をタップして選択した後に [完了] をタップします。

- 無料の画像を使用する場合は、[無料の画像を探す] をタップします。画像を見つけたら、画像をタップして選択し、[完了] をタップします。

  1. 任意：ロゴ画像に代替テキストを追加する場合は、以下の手順を実行します。

    1. [ロゴ] エリアの [編集] をタップします。
    2. [代替テキスト] フィールドに画像の簡単な説明を入力します。
    3. [保存] をタップします。

  2. 任意：[デスクトップ用ロゴの幅] エリアの範囲スライダーを使用すると、ロゴのピクセル幅を調整できます。

  3. [✓] をタップします。

ファビコンを追加する

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

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

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

手順:

デスクトップ
  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. ファビコンを追加するテーマを見つけて、[カスタマイズ] をクリックします。
  3. [テーマ設定] の歯車アイコンをクリックします。
  4. テーマバージョンに応じて、[ロゴ] または [ファビコン] をクリックします。

  5. [ファビコン画像] セクションの [画像を選択] をクリックして、新規または既存の画像を追加します。

    • 管理画面にすでにアップロードしている画像を使用するには、画像を検索し、チェックボックスをオンにして選択します。
    • ローカルコンピューターから画像を選択するには、[画像を追加] をクリックし、ローカルコンピューターから画像を開き、チェックボックスをオンにして選択します。

  6. [完了] をクリックします。

  7. 任意：ファビコン画像に代替テキストを追加するには、以下の手順を実行します。

    1. [ファビコン画像] セクションで、[編集] をクリックします。
    2. [代替テキスト] フィールドに画像の簡単な説明を入力します。
    3. [保存] をクリックします。

  8. [保存] をクリックします。

iPhone
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. ファビコンを追加するテーマを見つけて、[カスタマイズ] をタップします。
  5. [⋮] をタップしてから、[テーマ設定] をタップします。
  6. テーマバージョンに応じて、[ロゴ] または [ファビコン] をタップします。

  7. [ファビコン画像] セクションで [画像を選択] をタップして、新規または既存の画像を追加します。

    • 管理画面にすでにアップロードしている画像を使用するには、画像を検索し、チェックボックスをオンにして選択します。
    • ローカルデバイスから画像を選択するには、[画像を追加] をタップし、ローカルデバイスから画像を開き、チェックボックスをオンにして選択します。

  8. [完了] をタップします。

  9. ファビコン画像に代替テキストを追加するには、以下の手順を実行します。

    1. [ファビコン画像] セクションで、[編集] をタップします。
    2. [代替テキスト] フィールドに画像の簡単な説明を入力します。
    3. [保存] をタップします。

  10. [保存] をタップします。

Android
  1. Shopifyアプリで [☰] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. ファビコンを追加するテーマを見つけて、[カスタマイズ] をタップします。
  5. […] をタップしてから、[テーマ設定] をタップします。
  6. テーマバージョンに応じて、[ロゴ] または [ファビコン] をタップします。

  7. [ファビコン画像] セクションで [画像を選択] をタップして、新規または既存の画像を追加します。

    • 管理画面にすでにアップロードしている画像を使用するには、画像を検索し、チェックボックスをオンにして選択します。
    • ローカルデバイスから画像を選択するには、[画像を追加] をタップし、ローカルデバイスから画像を開き、チェックボックスをオンにして選択します。

  8. [完了] をタップします。

  9. ファビコン画像に代替テキストを追加するには、以下の手順を実行します。

    1. [ファビコン画像] セクションで、[編集] をタップします。
    2. [代替テキスト] フィールドに画像の簡単な説明を入力します。
    3. [保存] をタップします。

  10. [✓] をタップします。

色

カラースキームは最大21個まで作成およびカスタマイズでき、オンラインストアのさまざまなセクションに適用することができます。色の種類、カラースキーム、色のグラデーションの詳細は、こちらをご覧ください。

手順:

デスクトップ
  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] の歯車アイコンをクリックします
  4. [カラー] をクリックします。
  5. [スキーム] セクションで、既存のスキームをクリックするか、[スキームを追加] をクリックして新しいカラースキームを追加します。

  6. カラースキームを編集するには、色見本をクリックして、以下のコンテンツタイプの色を変更します。

    • 背景
    • 背景のグラデーション
    • テキスト
    • ソリッドボタンの背景
    • ソリッドカラーのボタンのラベル
    • アウトラインボタン
    • 影

  7. 色を設定するには、16進カラーコードを入力するかカラーピッカーから色を選択します。色を透明に設定するには、テキストフィールドから16進カラーコードを削除します。

  8. [保存] をクリックします。

iPhone

  1. Shopifyアプリで [...] ボタンをタップします。

  2. 販売チャネルセクションで、[オンラインストア] をタップします。

  3. [すべてのテーマを管理する] をタップします。

  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。

  5. [⋮] をタップしてから、[テーマ設定] をタップします。

  6. [色] をタップします。

  7. [スキーム] セクションで、既存のスキームをタップするか、[スキームを追加] をタップして新しいカラースキームを追加します。

  8. カラースキームを編集する場合は、色見本をタップして、以下のコンテンツタイプの色を変更します。

    • 背景
    • 背景のグラデーション
    • テキスト
    • ソリッドボタンの背景
    • ソリッドカラーのボタンのラベル
    • アウトラインボタン
    • 影

  9. 色を設定するには、16進カラーコードを入力するかカラーピッカーから色を選択します。色を透明に設定するには、テキストフィールドから16進カラーコードを削除します。

  10. [完了] をタップします。

  11. [保存] をタップします。

Android

  1. Shopifyアプリで [☰] ボタンをタップします。

  2. 販売チャネルセクションで、[オンラインストア] をタップします。

  3. [すべてのテーマを管理する] をタップします。

  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。

  5. […] をタップしてから、[テーマ設定] をタップします。

  6. [色] をタップします。

  7. [スキーム] セクションで、既存のスキームをタップするか、[スキームを追加] をタップして新しいカラースキームを追加します。

  8. カラースキームを編集する場合は、色見本をタップして、以下のコンテンツタイプの色を変更します。

    • 背景
    • 背景のグラデーション
    • テキスト
    • ソリッドボタンの背景
    • ソリッドカラーのボタンのラベル
    • アウトラインボタン
    • 影

  9. 色を設定するには、16進カラーコードを入力するかカラーピッカーから色を選択します。色を透明に設定するには、テキストフィールドから16進カラーコードを削除します。

  10. [完了] をタップします。

  11. [✓] をタップします。

タイポグラフィー

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

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

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

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

手順:

デスクトップ
  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] の歯車アイコンをクリックします。
  4. [タイポグラフィー] をクリックします。
  5. ストアの見出しまたは本文のフォントタイプを変更する場合は、[見出し] セクションまたは [本文] セクションの [変更] をクリックします。
  6. 使用するフォントの名前をクリックし、[選択] をクリックします。
  7. [保存] をクリックします。
iPhone
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [⋮] をタップしてから、[テーマ設定] をタップします。
  6. [タイポグラフィー] をタップします。
  7. ストアの見出しまたは本文のフォントタイプを変更するには、[見出し] または [本文] セクションの [変更] をタップします。
  8. 使用するフォントの名前をタップして [完了] をタップします。
  9. [保存] をタップします。
Android
  1. Shopifyアプリで [☰] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. […] をタップしてから、[テーマ設定] をタップします。
  6. [タイポグラフィー] をタップします。
  7. ストアの見出しまたは本文のフォントタイプを変更するには、[見出し] または [本文] セクションの [変更] をタップします。
  8. 使用するフォントの名前をタップして [完了] をタップします。
  9. [✓] をタップします。

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

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

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

手順:

デスクトップ
  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] の歯車アイコンをクリックします。
  4. [タイポグラフィー] をクリックします。
  5. 見出しのデフォルトのフォントサイズを変更するには、[フォントサイズスケール] 範囲スライダーを使用してデフォルトのフォントサイズを選択します。
  6. 本文のデフォルトのフォントサイズを変更するには、[フォントサイズスケール] 範囲スライダーを使用してデフォルトのフォントサイズを選択します。
  7. [保存] をクリックします。
iPhone
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [⋮] をタップしてから、[テーマ設定] をタップします。
  6. [タイポグラフィー] をタップします。
  7. 見出しのデフォルトのフォントサイズを変更するには、[フォントサイズスケール] 範囲スライダーを使用してデフォルトのフォントサイズを選択します。
  8. 本文のデフォルトのフォントサイズを変更するには、[フォントサイズスケール] 範囲スライダーを使用してデフォルトのフォントサイズを選択します。
  9. [保存] をタップします。
Android
  1. Shopifyアプリで [☰] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. […] をタップしてから、[テーマ設定] をタップします。
  6. [タイポグラフィー] をタップします。
  7. 見出しのデフォルトのフォントサイズを変更するには、[フォントサイズスケール] 範囲スライダーを使用してデフォルトのフォントサイズを選択します。
  8. 本文のデフォルトのフォントサイズを変更するには、[フォントサイズスケール] 範囲スライダーを使用してデフォルトのフォントサイズを選択します。
  9. [✓] をタップします。

レイアウト

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

手順:

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

アニメーション

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

手順:

デスクトップ
  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] の歯車アイコンをクリックします。
  4. [アニメーション] をクリックします。
  5. 任意：スクロール操作によってオンラインストアのセクションが現れるアニメーションを有効にするには、[スクロールでセクションを表示する] を選択します。

  6. 任意：カードとボタンにホバー効果のあるアニメーションを追加するには、[ホバー効果] 設定の以下のオプションのいずれかを選択します。

    • 垂直リフト：お客様がカードやボタンにカーソルを合わせると、要素が上向きにシフトします。
    • 3D表示：お客様がカードまたはボタンにカーソルを合わせると、画面に表示される部分が3D表示されます。表示部分をさりげなく輝く光が動き、さらに魅力的に見えます。

  7. [保存] をクリックします。

iPhone

  1. Shopifyアプリで [...] ボタンをタップします。

  2. 販売チャネルセクションで、[オンラインストア] をタップします。

  3. [すべてのテーマを管理する] をタップします。

  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。

  5. [⋮] をタップしてから、[テーマ設定] をタップします。

  6. [アニメーション] をタップします。

  7. 任意：スクロール操作によってオンラインストアのセクションが現れるアニメーションを有効にするには、[スクロールでセクションを表示する] を選択します。

  8. 任意：カードとボタンにホバー効果のあるアニメーションを追加するには、[ホバー効果] 設定の以下のオプションのいずれかを選択します。

    • 垂直リフト：お客様がカードやボタンにカーソルを合わせると、要素が上向きにシフトします。
    • 3D表示：お客様がカードまたはボタンにカーソルを合わせると、画面に表示される部分が3D表示されます。表示部分をさりげなく輝く光が動き、さらに魅力的に見えます。

  9. [保存] をタップします。

Android

  1. Shopifyアプリで [☰] ボタンをタップします。

  2. 販売チャネルセクションで、[オンラインストア] をタップします。

  3. [すべてのテーマを管理する] をタップします。

  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。

  5. […] をタップしてから、[テーマ設定] をタップします。

  6. [アニメーション] をタップします。

  7. 任意：スクロール操作によってオンラインストアのセクションが現れるアニメーションを有効にするには、[スクロールでセクションを表示する] を選択します。

  8. 任意：カードとボタンにホバー効果のあるアニメーションを追加するには、[ホバー効果] 設定の以下のオプションのいずれかを選択します。

    • 垂直リフト：お客様がカードやボタンにカーソルを合わせると、要素が上向きにシフトします。
    • 3D表示：お客様がカードまたはボタンにカーソルを合わせると、画面に表示される部分が3D表示されます。表示部分をさりげなく輝く光が動き、さらに魅力的に見えます。

  9. [✓] をタップします。

罫線と影

ドロワー、ボタン、バリエーションのピル型ボタン、または商品数量の入力項目など、一部のインタラクティブなコンテンツタイプでは罫線および影を調整できます。

[罫線] のカスタマイズ可能なオプションは次のとおりです。

  • [太さ] で、アイテムのアウトラインを変更します。
  • [不透明率] で、アイテムのアウトラインの可視性を設定します。
  • [角の半径] で、アイテムの角を丸くします。

[影] のカスタマイズ可能なオプションは次のとおりです。

  • [不透明率] で、アイテムの影の可視性を変更します。影の不透明率を0％にするとアイテムの影は完全になくなります。
  • [水平] と [垂直] のオフセットの範囲スライダーを使用して、アイテム周囲の影の位置を変更します。
  • [ぼかし] 範囲スライダーを使用して、アイテムの影の不透明度を変更します。

ボタン

影を追加したり、スペースや不透明率を変更したり、ボタンの形を調整したりすることで、オンラインストアのCTAボタンの設定をカスタマイズできます。

CTAボタンを使用したオンラインストアの例

手順:

デスクトップ
  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] の歯車アイコンをクリックします。
  4. [ボタン] をクリックします。
  5. 任意：範囲スライダーを使用して、ボタンの [罫線] の形式を変更します。
  6. 任意：範囲スライダーを使用して、ボタンの [影] を変更します。影の [不透明率] を0％に設定すると影はなくなります。
  7. [保存] をクリックします。
iPhone
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [⋮] をタップしてから、[テーマ設定] をタップします。
  6. [ボタン] をタップします。
  7. 任意：範囲スライダーを使用して、ボタンの [罫線] の形式を変更します。
  8. 任意：範囲スライダーを使用して、ボタンの [影] を変更します。影の [不透明率] を0％に設定すると影はなくなります。
  9. [保存] をタップします。
Android
  1. Shopifyアプリで [☰] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. […] をタップしてから、[テーマ設定] をタップします。
  6. [ボタン] をタップします。
  7. 任意：範囲スライダーを使用して、ボタンの [罫線] の形式を変更します。
  8. 任意：範囲スライダーを使用して、ボタンの [影] を変更します。影の [不透明率] を0％に設定すると影はなくなります。
  9. [✓] をタップします。

バリエーションのピル型ボタン

バリエーションのピル型ボタンを使用すると、1つの商品ページ上に商品の複数のバリエーションを表示したり、特集商品セクションを表示したりできます。お客様は、商品ページを移動することなく、欲しいバリエーションを選択してカートに商品を追加することができます。オンラインストアでバリエーションのピル型ボタンを表示する方法は、カスタマイズすることも可能です。

選択可能なバリエーションのピル型ボタンを使用したオンラインストアの例

手順:

デスクトップ
  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] の歯車アイコンをクリックします。
  4. [バリエーションのピル型ボタン] をクリックします。
  5. 任意：範囲スライダーを使用して、バリエーションのピル型ボタンの [罫線] の見た目を変更します。
  6. 任意：範囲スライダーを使用して、バリエーションのピル型ボタンの [影] を変更します。影の [不透明率] を0％に設定すると影はなくなります。
  7. [保存] をクリックします。
iPhone
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [⋮] をタップしてから、[テーマ設定] をタップします。
  6. [バリエーションのピル型ボタン] をタップします。
  7. 任意：範囲スライダーを使用して、バリエーションのピル型ボタンの [罫線] の見た目を変更します。
  8. 任意：範囲スライダーを使用して、バリエーションのピル型ボタンの [影] を変更します。影の [不透明率] を0％に設定すると影はなくなります。
  9. [保存] をタップします。
Android
  1. Shopifyアプリで [☰] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. […] をタップしてから、[テーマ設定] をタップします。
  6. [バリエーションのピル型ボタン] をタップします。
  7. 任意：範囲スライダーを使用して、バリエーションのピル型ボタンの [罫線] の見た目を変更します。
  8. 任意：範囲スライダーを使用して、バリエーションのピル型ボタンの [影] を変更します。影の [不透明率] を0％に設定すると影はなくなります。
  9. [✓] をタップします。

入力項目

入力項目は、数量セレクター、メール登録フォーム、またはカートメモなど、お客様の入力が必要なインタラクティブな部分です。オンラインストアの入力項目の見た目を調整することができます。

数量の入力項目を使用したオンラインストアの例

手順:

デスクトップ
  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] の歯車アイコンをクリックします。
  4. [入力項目] をクリックします。
  5. 任意：範囲スライダーを使用して、入力項目の [罫線] の見た目を変更します。
  6. 任意：範囲スライダーを使用して、入力項目の [影] を変更します。影の [不透明率] を0％に設定すると影はなくなります。
  7. [保存] をクリックします。
iPhone
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [⋮] をタップしてから、[テーマ設定] をタップします。
  6. [入力] をタップします。
  7. 任意：範囲スライダーを使用して、入力項目の [罫線] の見た目を変更します。
  8. 任意：範囲スライダーを使用して、入力項目の [影] を変更します。影の [不透明率] を0％に設定すると影はなくなります。
  9. [保存] をタップします。
Android
  1. Shopifyアプリで [☰] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. […] をタップしてから、[テーマ設定] をタップします。
  6. [入力] をタップします。
  7. 任意：範囲スライダーを使用して、入力項目の [罫線] の見た目を変更します。
  8. 任意：範囲スライダーを使用して、入力項目の [影] を変更します。影の [不透明率] を0％に設定すると影はなくなります。
  9. [✓] をタップします。

カード

商品カード、コレクションカード、ブログカードの設定では、ページセクションに表示される各カードタイプのスタイルをカスタマイズできます。これら3種類のセクションカードに対しては、色、配置、画像の余白、罫線、影を変更することができます。

手順:

デスクトップ
  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] の歯車アイコンをクリックします。
  4. [商品カード]、[コレクションカード]、または [ブログカード] をクリックします。
  5. [スタイル] オプションを使用して、カードスタイルを選択します。
  6. 任意：カード画像の周囲にスペースを追加する場合は、[画像の余白] 範囲スライダーを使用します。
  7. 任意：カードのテキストアラインメントは、[左]、[中央](デフォルト)、[右] の中から選択できます。
  8. 任意：[カラースキーム] セクションの [変更] をクリックして、カードのカラースキームを選択します。
  9. 任意：範囲スライダーを使用して、カードの [罫線] の見た目を変更します。
  10. 任意：範囲スライダーを使用して、カードの [影] を変更します。影の [不透明率] を0％に設定すると影はなくなります。
  11. [保存] をクリックします。
iPhone
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [⋮] をタップしてから、[テーマ設定] をタップします。
  6. [商品カード]、[コレクションカード]、[ブログカード] のいずれかをタップします。
  7. [スタイル] オプションを使用して、カードスタイルを選択します。
  8. 任意：カード画像の周囲にスペースを追加する場合は、[画像の余白] 範囲スライダーを使用します。
  9. 任意：カードのテキストアラインメントは、[左]、[中央](デフォルト)、[右] の中から選択できます。
  10. 任意：[カラースキーム] セクションの [変更] をタップし、カードのカラースキームを選択して [完了] をタップします。
  11. 任意：範囲スライダーを使用して、カードの [罫線] の見た目を変更します。
  12. 任意：範囲スライダーを使用して、カードの [影] を変更します。影の [不透明率] を0％に設定すると影はなくなります。
  13. [保存] をタップします。
Android
  1. Shopifyアプリで [☰] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. […] をタップしてから、[テーマ設定] をタップします。
  6. [商品カード]、[コレクションカード]、[ブログカード] のいずれかをタップします。
  7. [スタイル] オプションを使用して、カードスタイルを選択します。
  8. 任意：カード画像の周囲にスペースを追加する場合は、[画像の余白] 範囲スライダーを使用します。
  9. 任意：カードのテキストアラインメントは、[左]、[中央](デフォルト)、[右] の中から選択できます。
  10. 任意：[カラースキーム] セクションの [変更] をタップし、カードのカラースキームを選択して [完了] をタップします。
  11. 任意：範囲スライダーを使用して、カードの [罫線] の見た目を変更します。
  12. 任意：範囲スライダーを使用して、カードの [影] を変更します。影の [不透明率] を0％に設定すると影はなくなります。
  13. [✓] をタップします。

コンテンツコンテナー

コンテナは、スライドショーや画像バナー上のテキストボックス、マルチカラムセクションの列など、コンテンツセクションのテキスト要素に使用されます。オンラインストア用にコンテンツコンテナの見た目をカスタマイズできます。

手順:

デスクトップ
  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] の歯車アイコンをクリックします。
  4. [コンテンツコンテナー] をクリックします。
  5. 範囲スライダーを使用して、コンテンツコンテナの [罫線] の形式を変更します。
  6. 範囲スライダーを使用して、コンテンツコンテナの [影] を変更します。影の [不透明率] を0％に設定すると影はなくなります。
  7. [保存] をクリックします。
iPhone
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [⋮] をタップしてから、[テーマ設定] をタップします。
  6. [コンテンツコンテナ] をタップします。
  7. 範囲スライダーを使用して、コンテンツコンテナの [罫線] の形式を変更します。
  8. 範囲スライダーを使用して、コンテンツコンテナの [影] を変更します。影の [不透明率] を0％に設定すると影はなくなります。
  9. [保存] をタップします。
Android
  1. Shopifyアプリで [☰] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. […] をタップしてから、[テーマ設定] をタップします。
  6. [コンテンツコンテナ] をタップします。
  7. 範囲スライダーを使用して、コンテンツコンテナの [罫線] の形式を変更します。
  8. 範囲スライダーを使用して、コンテンツコンテナの [影] を変更します。影の [不透明率] を0％に設定すると影はなくなります。
  9. [✓] をタップします。

メディア

メディアは、商品メディアやテキスト付き画像セクションの画像など、セクションの視覚的構成部分です。メディアに罫線や影を追加することができます。

手順:

デスクトップ
  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] の歯車アイコンをクリックします。
  4. [メディア] をクリックします。
  5. 範囲スライダーを使用して、メディアの [罫線] の形式を変更します。
  6. 範囲スライダーを使用して、メディアの [影] を変更します。影の [不透明率] を0％に設定すると影はなくなります。
  7. [保存] をクリックします。
iPhone
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [⋮] をタップしてから、[テーマ設定] をタップします。
  6. [メディア] をタップします。
  7. 範囲スライダーを使用して、メディアの [罫線] の形式を変更します。
  8. 範囲スライダーを使用して、メディアの [影] を変更します。影の [不透明率] を0％に設定すると影はなくなります。
  9. [保存] をタップします。
Android
  1. Shopifyアプリで [☰] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. […] をタップしてから、[テーマ設定] をタップします。
  6. [メディア] をタップします。
  7. 範囲スライダーを使用して、メディアの [罫線] の形式を変更します。
  8. 範囲スライダーを使用して、メディアの [影] を変更します。影の [不透明率] を0％に設定すると影はなくなります。
  9. [✓] をタップします。

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

オンラインストアのドロップダウンメニュー、ポップアップモーダル、カートポップアップの形式を調整できます。

手順:

デスクトップ
  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] の歯車アイコンをクリックします。
  4. [ドロップダウンとポップアップ] をクリックします。
  5. 範囲スライダーを使用して、[罫線] の見た目を変更します。
  6. 範囲スライダーを使用して、[影] を変更します。影の [不透明率] を0％に設定すると影はなくなります。
  7. [保存] をクリックします。
iPhone
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [⋮] をタップしてから、[テーマ設定] をタップします。
  6. [ドロップダウンとポップアップ] をタップします。
  7. 範囲スライダーを使用して、[罫線] の見た目を変更します。
  8. 範囲スライダーを使用して、[影] を変更します。影の [不透明率] を0％に設定すると影はなくなります。
  9. [保存] をタップします。
Android
  1. Shopifyアプリで [☰] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. […] をタップしてから、[テーマ設定] をタップします。
  6. [ドロップダウンとポップアップ] をタップします。
  7. 範囲スライダーを使用して、[罫線] の見た目を変更します。
  8. 範囲スライダーを使用して、[影] を変更します。影の [不透明率] を0％に設定すると影はなくなります。
  9. [✓] をタップします。

ドロワー

ドロワーとは、通常表示されないインタラクティブなコンテナ (折りたたみ式メニューやコレクションの絞り込みオプションなど) で、タップまたはクリックして表示します。オンラインストアのドロワーの罫線と影は、カスタマイズすることができます。

手順:

デスクトップ
  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] の歯車アイコンをクリックします。
  4. [ドロワー] をクリックします。
  5. 範囲スライダーを使用して、ドロワーの [罫線] の見た目を変更します。
  6. 範囲スライダーを使用して、ドロワーの [影] を変更します。影の [不透明率] を0％に設定すると影はなくなります。
  7. [保存] をクリックします。
iPhone
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [⋮] をタップしてから、[テーマ設定] をタップします。
  6. [ドロワー] をタップします。
  7. 範囲スライダーを使用して、ドロワーの [罫線] の見た目を変更します。
  8. 範囲スライダーを使用して、ドロワーの [影] を変更します。影の [不透明率] を0％に設定すると影はなくなります。
  9. [保存] をタップします。
Android
  1. Shopifyアプリで [☰] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. […] をタップしてから、[テーマ設定] をタップします。
  6. [ドロワー] をタップします。
  7. 範囲スライダーを使用して、ドロワーの [罫線] の見た目を変更します。
  8. 範囲スライダーを使用して、ドロワーの [影] を変更します。影の [不透明率] を0％に設定すると影はなくなります。
  9. [✓] をタップします。

バッジ

[セール] バッジと [売り切れ] バッジは、値下げした際と在庫数が0になった際に、商品画像に自動的に追加されます。[セール] バッジと [売り切れ] バッジは、その位置、形、色を調整することができます。

セールバッジと売り切れバッジを使用したオンラインストアの例

[ページ] バッジと [ブログ] バッジは、関連性のある検索結果に表示されます。バッジの位置と形はカスタマイズできますが、[ページ] バッジと [ブログ] バッジの色はカスタマイズできません。

手順:

デスクトップ
  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] の歯車アイコンをクリックします。
  4. [バッジ] をクリックします。
  5. バッジの位置を選択する場合は、[カードでの位置] ドロップダウンメニューをクリックして、[左下]、[右下]、[左上]、[右上] をクリックします。
  6. 任意：バッジの角に丸みを加える場合は、[角の半径] 範囲スライダーを使用します。角の半径を0ピクセルに設定すると四角のバッジとなり、半径のピクセル数を増やすとバッジの角がより丸くなります。
  7. 任意：カラースキームを選択する場合は、[セールバッジのカラースキーム] または [売り切れバッジのカラースキーム] の [変更] をクリックし、使用するカラースキームをクリックします。
  8. [保存] をクリックします。
iPhone
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [⋮] をタップしてから、[テーマ設定] をタップします。
  6. [バッジ] をタップします。
  7. バッジの位置を選択するには、[カードでの位置] ドロップダウンメニューをタップして、[左下]、[右下]、[左上]、[右上] をタップします。
  8. 任意：バッジの角に丸みを加える場合は、[角の半径] 範囲スライダーを使用します。角の半径を0ピクセルに設定すると四角のバッジとなり、半径のピクセル数を増やすとバッジの角がより丸くなります。
  9. 任意：カラースキームを選択する場合は、[セールバッジのカラースキーム] または [売り切れバッジのカラースキーム] の [変更] をタップします。バッジのカラースキームを選択して [完了] をタップします。
  10. [保存] をタップします。
Android
  1. Shopifyアプリで [☰] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. […] をタップしてから、[テーマ設定] をタップします。
  6. [バッジ] をタップします。
  7. バッジの位置を選択するには、[カードでの位置] ドロップダウンメニューをタップして、[左下]、[右下]、[左上]、[右上] をタップします。
  8. 任意：バッジの角に丸みを加える場合は、[角の半径] 範囲スライダーを使用します。角の半径を0ピクセルに設定すると四角のバッジとなり、半径のピクセル数を増やすとバッジの角がより丸くなります。
  9. 任意：カラースキームを選択する場合は、[セールバッジのカラースキーム] または [売り切れバッジのカラースキーム] の [変更] をタップします。バッジのカラースキームを選択して [完了] をタップします。
  10. [✓] をタップします。

ブランド情報

オンラインストアには、ブランド自体に関する情報を追加できます。以下の手順を実行することにより、オンラインストアのフッターにブランド情報ブロックを追加できます。

手順:

デスクトップ
  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] の歯車アイコンをクリックします。
  4. [ブランド情報] をクリックします。
  5. 任意：ブランドやビジネスに関する見出しを入力します。
  6. 任意：ブランドやビジネスに関する説明を入力します。
  7. 任意：[画像] エリアで、所有する画像を追加するか無料の画像を使用します。
    • 自身の画像を追加する場合は、[画像を選択] をクリックして新規または既存の画像を追加します。
      • 管理画面にすでにアップロードしている画像を使用するには、画像を選択し、[完了] をクリックします。
      • ローカルコンピューター上の画像を使用する場合は、[画像を追加] をクリックします。画像を選択して追加し、[完了] をクリックします。

- 無料の画像を使用する場合は、[無料の画像を探す] をクリックします。画像を見つけたら、画像をクリックして選択し、[選択] をクリックします。

  1. 任意：[画像の幅] エリアで、範囲スライダーを任意のピクセル幅に設定します。
  2. [保存] をクリックします。
iPhone
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [⋮] をタップしてから、[テーマ設定] をタップします。
  6. [ブランド情報] をタップします。
  7. 任意：ブランドやビジネスに関する見出しを入力します。
  8. 任意：ブランドやビジネスに関する説明を入力します。
  9. 任意：[画像] エリアで、所有する画像を追加するか無料の画像を使用します。
    • 自身の画像を追加するには、[画像を選択] をタップして、新規または既存の画像を追加します。
      • 管理画面にアップロード済みの画像を使用する場合は、画像を選択して [完了] をタップします。
      • ローカルデバイス上の画像を使用する場合は、[画像を追加] をタップし、ローカルデバイス上の画像を選択して追加し、画像をタップして選択した後に [完了] をタップします。

- 無料の画像を使用する場合は、[無料の画像を探す] をタップします。画像を見つけたら、画像をタップして選択し、[完了] をタップします。

  1. 任意：[画像の幅] エリアで、範囲スライダーを希望のピクセル幅に切り替えます。
  2. [保存] をタップします。
Android
  1. Shopifyアプリで [☰] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. […] をタップしてから、[テーマ設定] をタップします。
  6. [ブランド情報] をタップします。
  7. 任意：ブランドやビジネスに関する見出しを入力します。
  8. 任意：ブランドやビジネスに関する説明を入力します。
  9. 任意：[画像] エリアで、所有する画像を追加するか無料の画像を使用します。
    • 自身の画像を追加するには、[画像を選択] をタップして、新規または既存の画像を追加します。
      • 管理画面にアップロード済みの画像を使用する場合は、画像を選択して [完了] をタップします。
      • ローカルデバイス上の画像を使用する場合は、[画像を追加] をタップし、ローカルデバイス上の画像を選択して追加し、画像をタップして選択した後に [完了] をタップします。

- 無料の画像を使用する場合は、[無料の画像を探す] をタップします。画像を見つけたら、画像をタップして選択し、[完了] をタップします。

  1. 任意：[画像の幅] エリアで、範囲スライダーを希望のピクセル幅に切り替えます。
  2. [✓] をタップします。

SNS

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

手順:

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

検索行動

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

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

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

手順:

デスクトップ
  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] の歯車アイコンをクリックします。
  4. [検索行動] をクリックします。
  5. 検索候補を有効または無効にするには、[検索候補を有効にする] を選択または解除します。
  6. 任意：検索候補で商品の販売元を表示または非表示にするには、[商品の販売元を表示] を選択または選択解除します。
  7. 任意：検索候補で商品価格を表示または非表示にするには、[商品価格を表示] を選択または選択解除します。
  8. [保存] をクリックします。
iPhone
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [⋮] をタップしてから、[テーマ設定] をタップします。
  6. [検索行動] をタップします。
  7. 検索候補を有効または無効にするには、[検索候補を有効にする] を選択または解除します。
  8. 任意：検索候補で商品の販売元を表示または非表示にするには、[商品の販売元を表示] を選択または選択解除します。
  9. 任意：検索候補で商品価格を表示または非表示にするには、[商品価格を表示] を選択または選択解除します。
  10. [保存] をタップします。
Android
  1. Shopifyアプリで [☰] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. […] をタップしてから、[テーマ設定] をタップします。
  6. [検索行動] をタップします。
  7. 検索候補を有効または無効にするには、[検索候補を有効にする] を選択または解除します。
  8. 任意：検索候補で商品の販売元を表示または非表示にするには、[商品の販売元を表示] を選択または選択解除します。
  9. 任意：検索候補で商品価格を表示または非表示にするには、[商品価格を表示] を選択または選択解除します。
  10. [✓] をタップします。

通貨形式

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

手順:

デスクトップ
  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] の歯車アイコンをクリックします。
  4. [通貨フォーマット] をクリックします。
  5. 通貨コードを表示するには、[通貨コードを表示] を選択します。
  6. [保存] をクリックします。
iPhone
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [⋮] をタップしてから、[テーマ設定] をタップします。
  6. [通貨のフォーマット] をタップします。
  7. 通貨コードを表示するには、[通貨コードを表示] を選択します。
  8. [保存] をタップします。
Android
  1. Shopifyアプリで [☰] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. […] をタップしてから、[テーマ設定] をタップします。
  6. [通貨のフォーマット] をタップします。
  7. 通貨コードを表示するには、[通貨コードを表示] を選択します。
  8. [✓] をタップします。

カート

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

手順:

デスクトップ
  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] の歯車アイコンをクリックします。
  4. [カート] をクリックします。
  5. [カートタイプ] ドロップダウンメニューを使用して、[ドロワー]、[ページ]、または [ポップアップ通知] のカートスタイルを選択します。
  6. 任意：お客様のカートにアイテムの販売元を表示するには、[販売元を表示] を選択します。
  7. 任意：特別なリクエストの入力や注文情報の追加ができるテキストボックスをお客様に表示するには、[カートメモを有効にする] を選択します。

  8. 任意：[カートタイプ] に [ドロワー] を選択すると、カートドロワーが空の場合にコレクションを表示できます。

    1. [カートドロワー] エリアで、[コレクションを選択] をクリックします。
    2. 表示するコレクションの名前をクリックし、[選択] をクリックします。

  9. 任意：[カートタイプ] に [ドロワー] を選択すると、以下の手順を実行してカートドロワーのカラースキームを変更することができます。

    1. [カートドロワー] > [カラースキーム] エリアで、[変更] をクリックします。
    2. カートドロワーに使用するカラースキームを選択します。

  10. [保存] をクリックします。

iPhone
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [⋮] をタップしてから、[テーマ設定] をタップします。
  6. [カート] をタップします。
  7. [カートタイプ] を、[ドロワー]、[ページ] または [ポップアップ通知] の選択肢から選択します。
  8. 任意：お客様のカートにアイテムの販売元を表示するには、[販売元を表示] を選択します。
  9. 任意：特別なリクエストの入力や注文情報の追加ができるテキストボックスをお客様に表示するには、[カートメモを有効にする] を選択します。

  10. 任意：[カートタイプ] に [ドロワー] を選択すると、カートドロワーが空の場合にコレクションを表示できます。

    1. [カートドロワー] エリアで、[コレクションを選択] をタップします。
    2. 表示するコレクションの名前をタップし、[完了] をタップします。

  11. 任意：[カートタイプ] に [ドロワー] を選択すると、以下の手順を実行してカートドロワーのカラースキームを変更することができます。

    1. [カートドロワー] > [カラースキーム] エリアで、[変更] をタップします。
    2. カートドロワーに使用するカラースキームを選択し、[完了] をタップします。

  12. [保存] をタップします。

Android
  1. Shopifyアプリで [☰] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. […] をタップしてから、[テーマ設定] をタップします。
  6. [カート] をタップします。
  7. [カートタイプ] を、[ドロワー]、[ページ] または [ポップアップ通知] の選択肢から選択します。
  8. 任意：お客様のカートにアイテムの販売元を表示するには、[販売元を表示] を選択します。
  9. 任意：特別なリクエストの入力や注文情報の追加ができるテキストボックスをお客様に表示するには、[カートメモを有効にする] を選択します。

  10. 任意：[カートタイプ] に [ドロワー] を選択すると、カートドロワーが空の場合にコレクションを表示できます。

    1. [カートドロワー] エリアで、[コレクションを選択] をタップします。
    2. 表示するコレクションの名前をタップし、[完了] をタップします。

  11. 任意：[カートタイプ] に [ドロワー] を選択すると、以下の手順を実行してカートドロワーのカラースキームを変更することができます。

    1. [カートドロワー] > [カラースキーム] エリアで、[変更] をタップします。
    2. カートドロワーに使用するカラースキームを選択し、[完了] をタップします。

  12. [✓] をタップします。

カスタムCSS

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

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

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

テーマスタイル

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

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

手順:

デスクトップ
  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] の歯車アイコンをクリックします。
  4. [テーマスタイル] をクリックします。
  5. 使用するテーマスタイルを選択し、[スタイルを変更] をクリックします。
  6. [保存] をクリックします。
iPhone
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [⋮] をタップしてから、[テーマ設定] をタップします。
  6. [テーマスタイル] をタップします。
  7. 使用するテーマスタイルを選択し、[完了] をタップします。
  8. [保存] をタップします。
Android
  1. Shopifyアプリで [☰] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. […] をタップしてから、[テーマ設定] をタップします。
  6. [テーマスタイル] をタップします。
  7. 使用するテーマスタイルを選択し、[完了] をタップします。
  8. [✓] をタップします。

変更を元に戻す、またはやり直す

[元に戻す] ボタンをクリックすると直近の変更を取り消し、[やり直す] ボタンをクリックすると取り消した変更をやり直します。[元に戻す] ボタンを1回以上クリックすると、操作を1つずつ元に戻すことができます。[元に戻す] ボタンおよび [やり直す] ボタンは、テーマエディタツールバーにあります。

テーマエディタツールバーにある [元に戻す] ボタンと [やり直す] ボタン

[元に戻す] ボタンをクリックすると、以下の例を含め、テーマに加えた変更を元に戻すことができます。

  • セクションの追加、順序変更、削除
  • 適用したカラー、フォント、その他のテーマ設定
  • テーマスタイルのリセット

色のオプションと見本

更新されたShopify商品分類には、標準の色属性が含まれています。これにより、ストアフロントに色見本を追加できます。この標準属性にアクセスするには、色カテゴリーのメタフィールドを含む商品カテゴリーを選択します。次のカテゴリーのメタフィールドは、色見本をサポートしています。

  • Backing color
  • Backrest upholstery color
  • Band color
  • Blanket color
  • Body color
  • Butt cap color
  • Color
  • Canopy color
  • Case color
  • Core color
  • Cover color
  • Dial color
  • Door color
  • Door mat base color
  • Eyewear frame color
  • Eyewear lens color
  • Fingerboard color
  • Flower color
  • Flush plate color
  • Footwear color
  • Foundation color
  • Frame color
  • Furniture/Fixture color
  • Handle color
  • Housing color
  • Ink color
  • Instrument color
  • Instrument string color
  • Jumping surface color
  • Laser color
  • Leg color
  • Lens color
  • Light color
  • Neck color
  • Pen color
  • Pole color
  • Riser color
  • Rod color
  • Saddle base color
  • Saddle seat color
  • Seat color
  • Seat upholstery color
  • Shaft color
  • Sheet color
  • Shelf color
  • Shell/Frame color
  • Slat color
  • Spool color
  • String color
  • Suction cup color
  • Tabletop color
  • Tank color
  • Temple color
  • Top color
  • Upholstery color

詳細については、カテゴリーのメタフィールドを使用してカラー見本を追加する方法と、既存の商品を移行してカテゴリーのメタフィールドを使用する方法をご覧ください。

お探しの情報が見つかりませんか？いつでもお気軽にお問い合わせください。