テーマ設定

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

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

目次

ロゴ

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

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

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

ロゴをカスタマイズする

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  1. Shopifyアプリから [ストア] をタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [ストア] をタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  1. [テーマ設定] をクリックします。
  2. ロゴをクリックします。

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

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

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

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

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

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

ファビコン

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

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

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

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

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  1. Shopifyアプリから [ストア] をタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [ストア] をタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  1. [テーマ設定] をクリックします。
  2. ロゴをクリックします。

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

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

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

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

色

オンラインストア用に第1の配色と第2の配色を設定できます。

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

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

  3. カラーピッカーを開くには、変更するコンテンツタイプの色の色見本をクリックします。

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

色のグラデーションの設定方法などの色オプションについて詳しくは、「配色」を参照してください。

タイポグラフィー

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

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

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

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

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

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

手順:

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

レイアウト

レイアウトを使用すると、オンラインストアに表示される最大幅を設定できます。

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

罫線と影

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

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

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

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

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

ボタン

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

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

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

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

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

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

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

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

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

入力項目

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

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

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

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

カード

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

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

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

コンテンツコンテナー

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

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

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

メディア

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

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

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

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

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

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

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

ドロワー

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

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

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

バッジ

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

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

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

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

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

アイコン

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

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

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

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

ブランド情報

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

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

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

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

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

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

SNS

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

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

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

検索行動

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

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

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

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

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

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

通貨形式

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

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

カート

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

手順:

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

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

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

チェックアウト

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

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

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

手順:

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
  1. Shopifyアプリから [ストア] をタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [ストア] をタップします。
  2. 販売チャネルセクションで、[オンラインストア] をタップします。
  3. [すべてのテーマを管理する] をタップします。
  4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
  5. [編集] をタップします。

  1. [テーマ設定] > [スタイル] の順にクリックします。

  2. ドロップダウンメニューを使用し、テーマスタイルのオプションを選択します。利用可能なオプションは、ご利用のテーマによって異なります。

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

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

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

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

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

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

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

無料体験を試す