テーマ設定

このページはApr 24, 2024に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/online-store/themes/theme-structure/theme-settingsをご覧ください。

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

目次

ロゴ

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

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

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

ロゴをカスタマイズする

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] をクリックします。
  4. ロゴをクリックします。

  5. ロゴエリアで [画像を選択する] をクリックのうえ、次のいずれかの操作を行います。

    • 管理画面にすでにアップロードしている画像を使用するには、画像をクリックして選択し、[選択] をクリックします。
    • ローカルコンピューターの画像を使用するには、[アップロード] をクリックします。コンピューターの画像を選択し、[開く] をクリックしてアップロードを開始します。アップロードが完了すると、画像は自動的に選択されます。[選択] をクリックします。
    • 無料の画像を選択するには、[無料の画像] をクリックし、画像を検索またはクリックして選択します。

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

    1. [代替テキストを編集] をクリックします。
    2. [画像を編集する] ウィンドウで、画像の説明を簡潔に入力します。
    3. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. [テーマ設定] をクリックします。
  7. ロゴをクリックします。

  8. ロゴエリアで [画像を選択する] をクリックのうえ、次のいずれかの操作を行います。

    • 管理画面にすでにアップロードしている画像を使用するには、画像をクリックして選択し、[選択] をクリックします。
    • ローカルコンピューターの画像を使用するには、[アップロード] をクリックします。コンピューターの画像を選択し、[開く] をクリックしてアップロードを開始します。アップロードが完了すると、画像は自動的に選択されます。[選択] をクリックします。
    • 無料の画像を選択するには、[無料の画像] をクリックし、画像を検索またはクリックして選択します。

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

    1. [代替テキストを編集] をクリックします。
    2. [画像を編集する] ウィンドウで、画像の説明を簡潔に入力します。
    3. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. [テーマ設定] をクリックします。
  7. ロゴをクリックします。

  8. ロゴエリアで [画像を選択する] をクリックのうえ、次のいずれかの操作を行います。

    • 管理画面にすでにアップロードしている画像を使用するには、画像をクリックして選択し、[選択] をクリックします。
    • ローカルコンピューターの画像を使用するには、[アップロード] をクリックします。コンピューターの画像を選択し、[開く] をクリックしてアップロードを開始します。アップロードが完了すると、画像は自動的に選択されます。[選択] をクリックします。
    • 無料の画像を選択するには、[無料の画像] をクリックし、画像を検索またはクリックして選択します。

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

    1. [代替テキストを編集] をクリックします。
    2. [画像を編集する] ウィンドウで、画像の説明を簡潔に入力します。
    3. [保存] をクリックします。

ロゴの幅をカスタマイズする

  1. [テーマ設定] をクリックします。
  2. ロゴをクリックします。
  3. [デスクトップ用ロゴの幅] エリアで、スライダーを希望のピクセル幅に切り替えます。

ファビコン

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

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

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

ファビコンをカスタマイズする

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] をクリックします。
  4. ロゴをクリックします。

  5. ファビコン画像エリアで [画像を選択する] をクリックのうえ、次のいずれかの操作を行います。

    • 管理画面にすでにアップロードしている画像を使用するには、画像をクリックして選択し、[選択] をクリックします。
    • ローカルコンピューターの画像を使用するには、[アップロード] をクリックします。コンピューターの画像を選択し、[開く] をクリックしてアップロードを開始します。アップロードが完了すると、画像は自動的に選択されます。[選択] をクリックします。
    • 無料の画像を選択するには、[無料の画像] をクリックし、画像を検索またはクリックして選択します。

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

    1. [代替テキストを編集] をクリックします。
    2. [画像を編集する] ウィンドウで、画像の説明を簡潔に入力します。
    3. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. [テーマ設定] をクリックします。
  7. ロゴをクリックします。

  8. ファビコン画像エリアで [画像を選択する] をクリックのうえ、次のいずれかの操作を行います。

    • 管理画面にすでにアップロードしている画像を使用するには、画像をクリックして選択し、[選択] をクリックします。
    • ローカルコンピューターの画像を使用するには、[アップロード] をクリックします。コンピューターの画像を選択し、[開く] をクリックしてアップロードを開始します。アップロードが完了すると、画像は自動的に選択されます。[選択] をクリックします。
    • 無料の画像を選択するには、[無料の画像] をクリックし、画像を検索またはクリックして選択します。

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

    1. [代替テキストを編集] をクリックします。
    2. [画像を編集する] ウィンドウで、画像の説明を簡潔に入力します。
    3. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. [テーマ設定] をクリックします。
  7. ロゴをクリックします。

  8. ファビコン画像エリアで [画像を選択する] をクリックのうえ、次のいずれかの操作を行います。

    • 管理画面にすでにアップロードしている画像を使用するには、画像をクリックして選択し、[選択] をクリックします。
    • ローカルコンピューターの画像を使用するには、[アップロード] をクリックします。コンピューターの画像を選択し、[開く] をクリックしてアップロードを開始します。アップロードが完了すると、画像は自動的に選択されます。[選択] をクリックします。
    • 無料の画像を選択するには、[無料の画像] をクリックし、画像を検索またはクリックして選択します。

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

    1. [代替テキストを編集] をクリックします。
    2. [画像を編集する] ウィンドウで、画像の説明を簡潔に入力します。
    3. [保存] をクリックします。

色

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

色の設定をカスタマイズする

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

タイポグラフィー

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

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

タイポグラフィーの設定をカスタマイズする

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

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] をクリックします。
  4. [文字体裁] をクリックします。
  5. テキストのタイプごとに、[変更] をクリックしてフォントピッカーを使用します。
  6. 検索フィールドを使用してフォントを検索します。
  7. 使用するフォントの名前をクリックします。
  8. [選択する] をクリックします。
  9. 保存をクリック
  1. Shopifyアプリで [☰] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [⋮] > [テーマ設定] の順にタップします。
  6. [文字体裁] をクリックします。
  7. テキストのタイプごとに、[変更] をクリックしてフォントピッカーを使用します。
  8. 検索フィールドで利用可能なフォントを検索します。
  9. 使用するフォントの名前をクリックし、[完了] をクリックします。
  10. ✓をクリックします。
  1. Shopifyアプリで [☰] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [⋮] > [テーマ設定] の順にタップします。
  6. [文字体裁] をクリックします。
  7. テキストのタイプごとに、[変更] をクリックしてフォントピッカーを使用します。
  8. 検索フィールドで利用可能なフォントを検索します。
  9. 使用するフォントの名前をクリックし、[完了] をクリックします。
  10. ✓をクリックします。

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

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

手順:

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] > [タイポグラフィー] の順にクリックします。
  4. 見出しのデフォルトのフォントサイズを変更するには、[フォント・サイズ・スケール] を使用してデフォルトのフォントサイズを選択します。最小のフォントサイズは100％で、最大のフォントサイズは150％です。スケール1目盛りごとにフォントサイズは5％増加します。デフォルトの設定は100％です。
  5. 本文のデフォルトのフォントサイズを変更するには、[フォント・サイズ・スケール] を使用してデフォルトのフォントサイズを選択します。最小のフォントサイズは100％で、最大のフォントサイズは130％です。スケール1目盛りごとにフォントサイズは5％増加します。デフォルトの設定は100％です。
  6. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. [テーマ設定] > [タイポグラフィー] の順にクリックします。
  7. 見出しのデフォルトのフォントサイズを変更するには、[フォント・サイズ・スケール] を使用してデフォルトのフォントサイズを選択します。最小のフォントサイズは100％で、最大のフォントサイズは150％です。スケール1目盛りごとにフォントサイズは5％増加します。デフォルトの設定は100％です。
  8. 本文のデフォルトのフォントサイズを変更するには、[フォント・サイズ・スケール] を使用してデフォルトのフォントサイズを選択します。最小のフォントサイズは100％で、最大のフォントサイズは130％です。スケール1目盛りごとにフォントサイズは5％増加します。デフォルトの設定は100％です。
  9. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. [テーマ設定] > [タイポグラフィー] の順にクリックします。
  7. 見出しのデフォルトのフォントサイズを変更するには、[フォント・サイズ・スケール] を使用してデフォルトのフォントサイズを選択します。最小のフォントサイズは100％で、最大のフォントサイズは150％です。スケール1目盛りごとにフォントサイズは5％増加します。デフォルトの設定は100％です。
  8. 本文のデフォルトのフォントサイズを変更するには、[フォント・サイズ・スケール] を使用してデフォルトのフォントサイズを選択します。最小のフォントサイズは100％で、最大のフォントサイズは130％です。スケール1目盛りごとにフォントサイズは5％増加します。デフォルトの設定は100％です。
  9. [保存] をクリックします。

レイアウト

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

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

アニメーション

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

手順:

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

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

    • 垂直リフト：お客様がカードやボタンにカーソルを合わせると、要素が上向きにシフトします。
    • 3Dリフト：お客様がカードまたはボタンにカーソルを合わせると、要素が前にシフトし、3D効果が得られます。また、要素全体をわずかに際立たせる動きを伴うことで、別の次元を表現します。

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

罫線と影

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

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

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

[影] のオプションは次のとおりです。

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

ボタン

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

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

ボタンをカスタマイズする

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

見本付きのバリエーションのオプション

見本オプションを選択できるオンラインストアの例

見本は、商品バリエーションの視覚的表現です。見本を表示するには、Dawnの最新バージョンと、バリエーションに接続するカテゴリーメタフィールドが必要です。Dawnでは、バリエーションのオプションをドロップダウンまたは見本として表示できます。バリエーションのオプションを見本として表示している場合、それらの見本を円形で表示するか、四角形として表示するか、見本として表示せずにオプション値をテキストとして表示するかを選択することができます。

見本のDawn設定の例

カテゴリーメタフィールドを使用して見本を設定する

  1. 管理画面から、[商品] に移動します。
  2. 商品をクリックします。
  3. [商品整理] セクションで、[商品カテゴリー] フィールドに商品のカテゴリーを入力し、[商品カテゴリー] リストから最も正確な結果を選択します。商品カテゴリーには、[色] カテゴリーメタフィールドを含める必要があります。
  4. [バリエーション] セクションで、[サイズや色などのオプションを追加する] をクリックします。
  5. [色] をクリックします。
  6. [色を追加] フィールドをクリックし、ドロップダウンメニューからデフォルトの色エントリーを選択します。

  7. カスタムの色エントリーを追加するには、以下の操作を行います。

    1. [色を追加] をクリックし、[新しいエントリーを追加] をクリックします。
    2. [エントリーを追加] ページで、[ラベル] フィールドと [色] フィールドに入力します。
    3. 色の代わりにパターンが必要な場合は、[画像] フィールドに入力します。色と画像の両方を追加すると、その画像が見本として使用されます。
    4. [基本色] と [基本パターン] を選択します。
    5. [保存] をクリックします。

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

Dawnで見本をカスタマイズする

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Dawnの最新バージョンがインストールされていることを確認し、[カスタマイズ] をクリックします。
  3. 色オプションを追加した商品に移動します。
  4. 任意：見本をカスタマイズするには、[バリエーションピッカー] ブロックをクリックします。[円形]、[正方形]、[なし] から選択して、見本の表示を変更できます。
  5. [保存] をクリックしてテーマを保存します。

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

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

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

バリエーションのピル型ボタンをカスタマイズする

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

入力項目

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

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

入力項目をカスタマイズする

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

カード

商品カード、コレクションカード、ブログカードの設定では、セクションに表示される各エリアのスタイルをカスタマイズすることができます。これら3種類のセクションカードは、色、アラインメント、画像のパディング、罫線、影を変更することができます。

カードをカスタマイズする

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] をクリックします。
  4. 商品カード、コレクションカード、またはブログカードをクリックします。
  5. ドロップダウンメニューを使用してカードの [スタイル] を選択します。
  6. スライディングスケールを使用して、[画像の余白] を追加します。この操作を行うと、カードの画像の周囲にスペースが追加されます。
  7. ドロップダウンメニューを使用して、カードの [テキストアラインメント] を設定します。[左]、中央、または [右] から選択します。
  8. ドロップダウンメニューを使用して、カードの [配色] を選択します。
  9. スライディングスケールを使用して、カードの [罫線] の見た目を変更します。
  10. スライディングスケールを使用して、カードの [影] を変更します。影の不透明度を0％に設定すると影はなくなります。
  11. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. [テーマ設定] をクリックします。
  7. 商品カード、コレクションカード、またはブログカードをクリックします。
  8. ドロップダウンメニューを使用してカードの [スタイル] を選択します。
  9. スライディングスケールを使用して、[画像の余白] を追加します。この操作を行うと、カードの画像の周囲にスペースが追加されます。
  10. ドロップダウンメニューを使用して、カードの [テキストアラインメント] を設定します。[左]、中央、または [右] から選択します。
  11. ドロップダウンメニューを使用して、カードの [配色] を選択します。
  12. スライディングスケールを使用して、カードの [罫線] の見た目を変更します。
  13. スライディングスケールを使用して、カードの [影] を変更します。影の不透明度を0％に設定すると影はなくなります。
  14. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. [テーマ設定] をクリックします。
  7. 商品カード、コレクションカード、またはブログカードをクリックします。
  8. ドロップダウンメニューを使用してカードの [スタイル] を選択します。
  9. スライディングスケールを使用して、[画像の余白] を追加します。この操作を行うと、カードの画像の周囲にスペースが追加されます。
  10. ドロップダウンメニューを使用して、カードの [テキストアラインメント] を設定します。[左]、中央、または [右] から選択します。
  11. ドロップダウンメニューを使用して、カードの [配色] を選択します。
  12. スライディングスケールを使用して、カードの [罫線] の見た目を変更します。
  13. スライディングスケールを使用して、カードの [影] を変更します。影の不透明度を0％に設定すると影はなくなります。
  14. [保存] をクリックします。

コンテンツコンテナー

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

コンテンツコンテナーをカスタマイズする

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

メディア

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

メディアをカスタマイズする

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

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

メニュードロップダウン、ポップアップモーダル、カートポップアップの見た目を調整します。

ドロップダウンとポップアップをカスタマイズする

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

ドロワー

ドロワーは、折りたたみ可能なメニューや絞り込みオプションなどの通常表示されないインタラクティブなコンテナで、タップまたはクリックして表示できます。

ドロワーをカスタマイズする

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

バッジ

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

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

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

バッジをカスタマイズする

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] をクリックします。
  4. [バッジ] をクリックします。
  5. ドロップダウンメニューを使用して、商品カード内のバッジの位置を選択します。[左上]、[右上]、左下、または [右下] から選択します。
  6. [角の半径] スライディングスケールを使用して、角に丸みを加えます。角の半径を0ピクセルに設定すると四角のバッジとなり、半径のピクセル数を増やすとバッジの角は丸くなります。
  7. バッジの [配色] を選択します。売り切れのアイテムには別の配色を設定できます。
  8. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. [テーマ設定] をクリックします。
  7. [バッジ] をクリックします。
  8. ドロップダウンメニューを使用して、商品カード内のバッジの位置を選択します。[左上]、[右上]、左下、または [右下] から選択します。
  9. [角の半径] スライディングスケールを使用して、角に丸みを加えます。角の半径を0ピクセルに設定すると四角のバッジとなり、半径のピクセル数を増やすとバッジの角は丸くなります。
  10. バッジの [配色] を選択します。売り切れのアイテムには別の配色を設定できます。
  11. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. [テーマ設定] をクリックします。
  7. [バッジ] をクリックします。
  8. ドロップダウンメニューを使用して、商品カード内のバッジの位置を選択します。[左上]、[右上]、左下、または [右下] から選択します。
  9. [角の半径] スライディングスケールを使用して、角に丸みを加えます。角の半径を0ピクセルに設定すると四角のバッジとなり、半径のピクセル数を増やすとバッジの角は丸くなります。
  10. バッジの [配色] を選択します。売り切れのアイテムには別の配色を設定できます。
  11. [保存] をクリックします。

アイコン

アイコンは、特定のセクションまたはブロックに追加できる小さな画像です。テーマ設定で、アイコンの配色を設定します。

折りたたみ可能な行にアイコンを使用したオンラインストアの例

アイコンをカスタマイズする

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] をクリックします。
  4. [アイコン] をクリックします。
  5. ドロップダウンメニューを使用して、アイコンのデフォルトの色を選択します。ストアのアイコンの色として、[アクセント1]、[アクセント2]、[アウトラインボタン]、[テキストの配色] の中から選択します。
  6. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. [テーマ設定] をクリックします。
  7. [アイコン] をクリックします。
  8. ドロップダウンメニューを使用して、アイコンのデフォルトの色を選択します。ストアのアイコンの色として、[アクセント1]、[アクセント2]、[アウトラインボタン]、[テキストの配色] の中から選択します。
  9. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. [テーマ設定] をクリックします。
  7. [アイコン] をクリックします。
  8. ドロップダウンメニューを使用して、アイコンのデフォルトの色を選択します。ストアのアイコンの色として、[アクセント1]、[アクセント2]、[アウトラインボタン]、[テキストの配色] の中から選択します。
  9. [保存] をクリックします。

ブランド情報

ブランドに関する情報を含めることができます。フッターにブランド情報ブロックを追加できます。

ブランド情報をカスタマイズする

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] をクリックします。
  4. [ブランド情報] をクリックします。
  5. 見出しを入力します。
  6. 説明を入力します。

  7. [画像を選択] をクリックし、次のいずれかの操作を実行します。

    • 管理画面にすでにアップロードしている画像を使用するには、画像をクリックして選択し、[選択] をクリックします。
    • ローカルコンピューターの画像を使用するには、[アップロード] をクリックします。コンピューターの画像を選択し、[開く] をクリックしてアップロードを開始します。アップロードが完了すると、画像は自動的に選択されます。[選択] をクリックします。
    • 無料の画像を選択するには、[無料の画像] をクリックし、画像を検索またはクリックして選択します。

  8. [画像の幅] エリアで、スライダーを希望のピクセル幅に切り替えます。

  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. [テーマ設定] をクリックします。
  7. [ブランド情報] をクリックします。
  8. 見出しを入力します。
  9. 説明を入力します。

  10. [画像を選択] をクリックし、次のいずれかの操作を実行します。

    • 管理画面にすでにアップロードしている画像を使用するには、画像をクリックして選択し、[選択] をクリックします。
    • ローカルコンピューターの画像を使用するには、[アップロード] をクリックします。コンピューターの画像を選択し、[開く] をクリックしてアップロードを開始します。アップロードが完了すると、画像は自動的に選択されます。[選択] をクリックします。
    • 無料の画像を選択するには、[無料の画像] をクリックし、画像を検索またはクリックして選択します。

  11. [画像の幅] エリアで、スライダーを希望のピクセル幅に切り替えます。

  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. [テーマ設定] をクリックします。
  7. [ブランド情報] をクリックします。
  8. 見出しを入力します。
  9. 説明を入力します。

  10. [画像を選択] をクリックし、次のいずれかの操作を実行します。

    • 管理画面にすでにアップロードしている画像を使用するには、画像をクリックして選択し、[選択] をクリックします。
    • ローカルコンピューターの画像を使用するには、[アップロード] をクリックします。コンピューターの画像を選択し、[開く] をクリックしてアップロードを開始します。アップロードが完了すると、画像は自動的に選択されます。[選択] をクリックします。
    • 無料の画像を選択するには、[無料の画像] をクリックし、画像を検索またはクリックして選択します。

  11. [画像の幅] エリアで、スライダーを希望のピクセル幅に切り替えます。

SNS

商品やブログ記事のソーシャルメディアでの共有ボタン、SNSアカウントへのリンクを追加することができます。SNSアカウントへのリンクは、オンラインストアのフッターに表示されます。

SNSの設定をカスタマイズする

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] をクリックします。
  4. [SNS] をクリックします。
  5. SNSアカウントへのリンクを追加するには、[アカウント] の下にある所定フィールドに、アカウントへのリンクを入力します。その際には、https://instagram.com/shopify、またはhttps://twitter.com/shopifyなどの完全なリンクを入力します。
  6. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. [テーマ設定] をクリックします。
  7. [SNS] をクリックします。
  8. SNSアカウントへのリンクを追加するには、[アカウント] の下にある所定フィールドに、アカウントへのリンクを入力します。その際には、https://instagram.com/shopify、またはhttps://twitter.com/shopifyなどの完全なリンクを入力します。
  9. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. [テーマ設定] をクリックします。
  7. [SNS] をクリックします。
  8. SNSアカウントへのリンクを追加するには、[アカウント] の下にある所定フィールドに、アカウントへのリンクを入力します。その際には、https://instagram.com/shopify、またはhttps://twitter.com/shopifyなどの完全なリンクを入力します。
  9. [保存] をクリックします。

検索行動

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

次の検索設定をカスタマイズできます。

  • 検索候補を有効にする - 検索候補を有効または無効にする。
  • 商品の販売元を表示する - 検索候補で商品の販売元を表示または非表示にします。
  • 商品価格を表示する - 検索候補で商品価格を表示または非表示にします。

入力を検索する設定を変更する

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] をクリックします。
  4. [入力を検索] をクリックします。
  5. 設定を使用して、ストアの検索動作をカスタマイズします。
  6. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. [テーマ設定] をクリックします。
  7. [入力を検索] をクリックします。
  8. 設定を使用して、ストアの検索動作をカスタマイズします。
  9. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. [テーマ設定] をクリックします。
  7. [入力を検索] をクリックします。
  8. 設定を使用して、ストアの検索動作をカスタマイズします。
  9. [保存] をクリックします。

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

通貨形式

商品、カート、チェックアウトの価格に、通貨コードが常に表示されるように設定できます。

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

カート

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

手順:

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

カートタイプを [ドロワー] に設定している場合、カートドロワーにコレクションを表示できます。選択したコレクションは、カートが空の場合にのみ表示されます。

空のカートドロワーにコレクションを追加するには、[コレクションを選択する] をクリックします。コレクションが選択された後、[変更] をクリックして別のコレクションを選択するか、カートドロワーからコレクションを削除します。[コレクションを作成する] をクリックして新しいコレクションを作成できます。このボタンを使用すると、テーマ設定や管理画面のコレクションページに移動できます。

チェックアウト

このセクションでは、ストアのチェックアウトをカスタマイズできます。ストアのチェックアウトページの詳細については、「Shopifyのチェックアウト」を参照してください。

テーマスタイルを変更する

テーマスタイルとは、テーマデザイナーが選択した設定のコレクションのことです。テーマスタイルをストアに適用すると、洗練された見た目と雰囲気を実現することができます。すべてのテーマには、デフォルトで適用されるテーマスタイルがあります。テーマをカスタマイズするときは、テーマスタイルの設定を自分の設定に置き換えます。テーマスタイルをテーマに適用すると、現在の設定 (色やタイポグラフィーなど) が変更されます。

手順:

  1. 管理画面から [オンラインストア] > [テーマ] に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  3. [テーマ設定] > [スタイル] の順にクリックします。
  4. ドロップダウンメニューを使用し、テーマスタイルのオプションを選択します。利用可能なオプションは、ご利用のテーマによって異なります。
  5. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. [テーマ設定] > [スタイル] の順にクリックします。
  7. ドロップダウンメニューを使用し、テーマスタイルのオプションを選択します。利用可能なオプションは、ご利用のテーマによって異なります。
  8. [保存] をクリックします。
  1. Shopifyアプリで [...] ボタンをタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  6. [テーマ設定] > [スタイル] の順にクリックします。
  7. ドロップダウンメニューを使用し、テーマスタイルのオプションを選択します。利用可能なオプションは、ご利用のテーマによって異なります。
  8. [保存] をクリックします。

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

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

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

[元に戻す] ボタンをクリックすると、以下の変更を元に戻すことができます。

  • セクションの追加、順序変更、削除
  • [テーマ設定] タブでのカラー、フォント、およびその他の設定の適用
  • テーマスタイルをリセットする

Shopifyで販売を開始する準備はできていますか?

無料体験を試す