テーマ設定

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

ロゴ

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

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

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

ロゴをカスタマイズする

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

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

ファビコン

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

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

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

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

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

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

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

タイポグラフィー

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

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

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

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

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

手順:

レイアウト

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

アニメーション

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

手順:

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

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

罫線と影

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

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

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

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

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

ボタン

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

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

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

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

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

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

見本のDawn設定の例

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

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

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

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

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

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

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

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

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

入力項目

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

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

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

カード

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

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

コンテンツコンテナー

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

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

メディア

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

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

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

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

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

ドロワー

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

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

バッジ

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

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

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

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

アイコン

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

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

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

ブランド情報

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

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

SNS

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

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

検索行動

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

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

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

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

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

通貨形式

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

カート

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

手順:

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

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

チェックアウト

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

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

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

手順:

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

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

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

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

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

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

無料体験を試す