テ,マ設定

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

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

ロゴ

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

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

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

ロゴをカスタマ@ @ズする

  1. [テ,マ設定]をクリックします。
  2. ロゴをクリックします。
  3. ロゴエリアで[画像を選択する]をクリックのうえ,次のいずれかの操作を行います。

    • Shopify Adminにすでにアップロードしている画像を使用するには,画像をクリックして選択し,[選択]をクリックします。
    • ロ,カルコンピュ,タ,の画像を使用するには,[アップロ,ド]をクリックします。コンピュ,タ,の画像を選択し,[開く]をクリックしてアップロ,ドを開始します。アップロ,ドが完了すると,画像は自動的に選択されます。[選択]をクリックします。
    • 無料の画像を選択するには,[無料の画像]をクリックし,画像を検索またはクリックして選択します。
  4. ロゴ画像に代替テキストを追加するには,以下の手順を実行します。

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

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

  1. [テ,マ設定]をクリックします。
  2. ロゴをクリックします。
  3. [デスクトップ用ロゴの幅]エリアで,スラ。

ファビコン

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

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

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

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

  1. [テ,マ設定]をクリックします。
  2. ロゴをクリックします。
  3. ファビコン画像エリアで[画像を選択する]をクリックのうえ,次のいずれかの操作を行います。

    • Shopify Adminにすでにアップロードしている画像を使用するには,画像をクリックして選択し,[選択]をクリックします。
    • ロ,カルコンピュ,タ,の画像を使用するには,[アップロ,ド]をクリックします。コンピュ,タ,の画像を選択し,[開く]をクリックしてアップロ,ドを開始します。アップロ,ドが完了すると,画像は自動的に選択されます。[選択]をクリックします。
    • 無料の画像を選択するには,[無料の画像]をクリックし,画像を検索またはクリックして選択します。
  4. ファビコン画像に代替テキストを追加するには,以下の手順を実行します。

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

ブランド情報

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

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

  1. [テ,マ設定]をクリックします。
  2. [ブランド情報]をクリックします。
  3. 見出しを入力します。
  4. 説明を入力します。
  5. [画像を選択]をクリックし,次のいずれかの操作を実行します。

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

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

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

  1. [テ,マ設定]をクリックします。
  2. [カラ]をクリックします。
  3. カラピッカを開くには,変更するコンテンタプの色の色見本をクリックします。

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

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

タポグラフィ

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

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

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

  1. [テ,マ設定]をクリックします。
  2. [タaapl . aapl . cn]をクリックします。
  3. テキストのタ电子邮箱プごとに,[変更]をクリックしてフォントピッカ,を使用します。
  4. 検索フィ,ルドを使用するか,[さらに読み込む]をクリックして,利用可能なフォントを検索します。
  5. 使用するフォントの名前をクリックし,[選択]をクリックします。
  6. [保存]をクリックします。

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

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

手順:

  1. [テ,マ設定]>[タaapl . aapl . cn]の順にクリックします。
  2. 見出しのデフォルトのフォントサ电子邮箱ズを変更するには,[フォント·サズ·スケル]を使用してデフォルトのフォントサ@ @ズを選択します。最小のフォントサ▪▪▪ズは100%で,最大のフォントサ▪▪▪ズは150%です。スケル1目盛りごとにフォントサズは5%増加します。デフォルトの設定は100%です。
  3. 本文のデフォルトのフォントサ电子邮箱ズを変更するには,[フォント·サズ·スケル]を使用してデフォルトのフォントサ@ @ズを選択します。最小のフォントサ▪▪▪ズは100%で,最大のフォントサ▪▪▪ズは130%です。スケル1目盛りごとにフォントサズは5%増加します。デフォルトの設定は100%です。
  4. [保存]をクリックします。

レ@ @アウト

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

  1. [テ,マ設定]>[レ电子邮箱アウト]の順にクリックします。
  2. 範囲スラダを使用して,1000ピクセルまたは1600ピクセルのペジ幅の中から選択します。デフォルト設定は1600ピクセルです。
  3. [オプション]範囲スラ@ @ @ @ @ @ @ @ @ @ @ @ @セクション間に垂直スペ,スを追加します。セクション間に最大100ピクセルを追加できます。
  4. [オプション][グリッド]レ电子邮箱アウトがある場合は,[水平スペ,ス]および[垂直スペ,ス]の範囲スラダを使用して,グリッドコンテン間にスペスを追加します。水平スペースを追加すると,行に最大40ピクセルのスぺースが追加され,垂直スペースを追加すると,列に最大40ピクセルのスペースが追加されます。
  5. [保存]をクリックします。

罫線と影

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

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

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

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

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

ボタン

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

ctaボタンを使用したオンラescンストアの例

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

  1. [テ,マ設定]をクリックします。
  2. [ボタン]をクリックします。
  3. スラ[罫線]の見た目を変更します。
  4. スラ[影]を変更します。影の不透明度を0%に設定すると影はなくなります。
  5. [保存]をクリックします。

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

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

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

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

  1. [テ,マ設定]をクリックします。
  2. [バリエ,ションのピル型ボタン]をクリックします。
  3. スラディングスケルを使用して,バリエションのピル型ボタンの[罫線]の見た目を変更します。
  4. スラディングスケルを使用して,バリエションのピル型ボタンの[影]の見た目を変更します。影の不透明度を0%に設定すると影はなくなります。
  5. [保存]をクリックします。

入力項目

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

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

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

  1. [テ,マ設定]をクリックします。
  2. [入力項目]をクリックします。
  3. スラ[罫線]の見た目を変更します。
  4. スラ[影]を変更します。影の不透明度を0%に設定すると影はなくなります。
  5. [保存]をクリックします。

カド

カードは,セクション内の区分けされた部分で,商品カード,ブログカード,コレクションカード,コラージュカードなど,複数のアイテムを表示することができます。セクションカドの形,スタル,色,配置,画像の余白をカスタマズできます。

カドをカスタマズする

  1. [テ,マ設定]をクリックします。
  2. [カ,ド]をクリックします。
  3. ドロップダウンメニュ,を使用してカ,ドの[スタ电子邮箱ル]を選択します。
  4. スラディングスケルを使用して,[画像の余白]を追加します。この操作を行うと,カ,ドの画像の周囲にスペ,スが追加されます。
  5. ドロップダウンメニュ,を使用して,カ,ドの[テキストアラ电子邮箱ンメント]を設定します。[左]、中央,または[右]から選択します。
  6. ドロップダウンメニュ,を使用して,カ,ドの[配色]を選択します。
  7. スラディングスケルを使用して,カドの[罫線]の見た目を変更します。
  8. スラディングスケルを使用して,カドの[影]を変更します。影の不透明度を0%に設定すると影はなくなります。
  9. [保存]をクリックします。

コンテンコンテナ

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

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

  1. [テ,マ設定]をクリックします。
  2. [コンテンコンテナ]をクリックします。
  3. スラディングスケルを使用して,コンテンコンテナの[罫線]の見た目を変更します。
  4. スラディングスケルを使用して,コンテンコンテナの[影]を変更します。影の不透明度を0%に設定すると影はなくなります。
  5. [保存]をクリックします。

メディア

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

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

  1. [テ,マ設定]をクリックします。
  2. [メディア]をクリックします。
  3. スラ[罫線]の見た目を変更します。
  4. スラ[影]を変更します。影の不透明度を0%に設定すると影はなくなります。
  5. [保存]をクリックします。

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

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

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

  1. [テ,マ設定]をクリックします。
  2. [ドロップダウンとポップアップ]をクリックします。
  3. スラディングスケルを使用して,[罫線]の見た目を変更します。
  4. スラディングスケルを使用して,[影]を変更します。影の不透明度を0%に設定すると影はなくなります。
  5. [保存]をクリックします。

ドロワ

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

ドロワをカスタマズする

  1. [テ,マ設定]をクリックします。
  2. [ドロワ]をクリックします。
  3. スラディングスケルを使用して,[罫線]の見た目を変更します。
  4. スラディングスケルを使用して,[影]を変更します。影の不透明度を0%に設定すると影はなくなります。
  5. [保存]をクリックします。

バッジ

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

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

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

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

  1. [テ,マ設定]をクリックします。
  2. [バッジ]をクリックします。
  3. ドロップダウンメニュ,を使用して,商品カ,ド内のバッジの位置を選択します。[左上]、[右上]、左下,または[右下]から選択します。
  4. [角の半径]スラ。角の半径を0ピクセルに設定すると四角のバッジとなり,半径のピクセル数を増やすとバッジの角は丸くなります。
  5. バッジの[配色]を選択します。売り切れのア@ @テムには別の配色を設定できます。
  6. [保存]をクリックします。

アereplicationコン

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

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

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

  1. [テ,マ設定]をクリックします。
  2. [ア电子邮箱コン]をクリックします。
  3. ドロップダウンメニュを使用して,アコンのデフォルトの色を選択します。ストアのアイコンの色として,[アクセント1],[アクセント2],[アウトラインボタン],[テキストの配色]の中から選択します。
  4. [保存]をクリックします。

SNS

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

snsの設定をカスタマ电子邮箱ズする

  1. [テ,マ設定]をクリックします。
  2. (SNS)をクリックします。
  3. SNSアカウントへのリンクを追加するには,[アカウント]の下にある所定フィールドに,アカウントへのリンクを入力します。その際には,https://instagram.com/shopify,またはhttps://twitter.com/shopifyなどの完全なリンクを入力します。
  4. [保存]をクリックします。

検索行動

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

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

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

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

  1. [テ,マ設定]をクリックします。
  2. [入力を検索]をクリックします。
  3. 設定を使用して,ストアの検索動作をカスタマ。
  4. [保存]をクリックします。

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

通貨形式

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

  1. [テ,マ設定]をクリックします。
  2. [通貨フォ,マット]をクリックします。
  3. 通貨コ,ドを有効にするには,[通貨コ,ドを表示]チェックボックスをクリックします。
  4. [保存]をクリックします。

カト

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

手順:

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

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

空のカ,トドロワ,にコレクションを追加するには,[コレクションを選択]をクリックします。コレクションを選択したら,[変更]をクリックして別のコレクションを選択するか,カートドロワーからコレクションを削除することができます。[コレクションを作成]をクリックして,新しいコレクションを作成することもできます。このボタンをクリックすると,[テ,マ設定]からShopify Adminの[コレクション]エリアに移動します。

チェックアウト

このセクションでは,ストアのチェックアウトをカスタマ。ストアのチェックアウトペジの詳細にいては,”Shopifyのチェックアウトを参照してください。

テマスタルを変更する

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

手順:

  1. [テ,マ設定]>[スタ电子邮箱ル]の順にクリックします。

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

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

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

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

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

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

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

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

無料体験を試す