Debut

Debutは、在庫サイズに関係なく、すべてのストアに適したフレキシブルなテーマです。Debutでは、すぐにストアを立ち上げて販売を開始できます。Debutはテーマのカスタマイズなしでも洗練されています。

Debutを使用したオンラインストアの例

以下のような方には、Debutが最適のテーマです。

  • テーマをあまりカスタマイズせず、すぐに商品販売を始めたい
  • タブレットやスマートフォンでストアがきれいに表示されるようにしたい
  • ストアのレイアウト調整が簡単で、リアルタイムで変更を確認したい

テーマエディタ

テーマエディタを使用して、テーマをカスタマイズします。テーマエディタのツールバーは、セクションテーマ設定に分かれています。

セクションとテーマ設定を表示するテーマエディタのツールバー

セクションを使用して、ストアの各種ページのコンテンツとレイアウトを変更できます。テーマ設定を使用して、ストアのフォントと色をカスタマイズし、ソーシャルメディアのリンクやチェックアウトの設定を変更することができます。

セクションは、オンラインストアの各ページのレイアウトを決定するカスタマイズ可能なコンテンツブロックです。

  • ホームセクションでは、スライドショーやメールマガジン登録といった機能が含まれており、追加、再配置、削除することができます。ホームページには最大25個のセクションを追加できます。

  • 各ページタイプには、独自のセクションが含まれています。たとえば、商品ページセクションで、オンラインストアの各商品ページのレイアウトを決定します。

  • ページセクションは常に、オンラインストアの特定の場所にあります。カスタマイズ可能ですが、再配置および削除することはできません。

  • 各テーマには、ヘッダーやフッターなどの固定セクションが含まれており、オンラインストアの各ページに表示されます。

独自のセクションの選択、およびビジネスに適したカスタマイズ方法を詳しく知ることができます。

Debutには、以下の静的セクションが含まれます。

  • ヘッダー
  • フッター
  • 商品ページ
  • コレクションページ
  • コレクションリストのページ
  • ブログページ
  • 投稿
  • カートページ

動的セクション

動的セクションを追加並べ替え、あるいは削除して、ホームページのレイアウトをカスタマイズすることができます。各テーマには、選択可能な固有の動的セクションがあります。

Debutには、以下の動的セクションが含まれます。

  • ブログ記事
  • コレクションリスト
  • 特集コレクション
  • ギャラリー
  • テキスト付き画像
  • テキストオーバーレイ付き画像
  • ロゴリスト
  • スライドショー
  • おすすめ商品
  • ニュースレター
  • マップ
  • リッチテキスト
  • お客様の声
  • 画像付きテキスト列
  • ビデオ
  • コンテンツをカスタムする

ヘッダー

ヘッダーセクションでは、ストアの各ページの上部に表示されるコンテンツを編集できます。ロゴ画像を追加したり、表示するメニューを選択したり、告知メッセージを作成したりすることができます。

John's Apparelというウェブサイトのヘッダーバーには、メインメニューアイテム、検索アイコン、カートアイコンが表示されます

ヘッダーセクションをカスタマイズするには

  1. Debut を検索して、[カスタマイズ] をクリックします。

  2. [セクション] をクリックします。

  3. [ヘッダー] をクリックします。

  4. ロゴの配置を設定するには、ロゴアラインメントエリアで、[左揃え] または [中央揃え] を選択します。ロゴ画像を追加しない場合、代わりにストア名がテキストで表示されます。管理画面の一般設定ページで、ストア名を変更できます。

  5. ロゴを追加するには、ロゴ画像エリアで [画像を選択する] をクリックします。コンピューターから画像をアップロードするには、[アップロード] をクリックします。Burstから無料のストック画像を使用するには、[無料の画像] をクリックします。

  6. ロゴのサイズを変更するには、[ロゴの幅をカスタムする] スライダーを希望の幅に調整します。ロゴの幅を調整してもロゴ画像が歪むことはありません。

  7. ヘッダーに表示するメニューを選択するには、メニューエリアで [変更] をクリックします。既存のメニューを選択するか、[メニューを作成する] をクリックして新しいメニューを作成します。ヘッダーにメニューを表示したくない場合は、[削除] をクリックします。

  8. ページの上部に告知メッセージを表示するには、次の手順を実行します。

  9. 告知バーエリアで、[告知を表示する] にチェックを入れます。

  10. ホームページのみで告知を表示するには、[ホームページのみ] をオンにします。それ以外の場合は、ストアの各ページに告知が表示されます。

  11. 告知のテキストをテキストフィールドに入力します。

  12. リンクフィールドにURLを入力し、告知にリンクを追加します。

  13. 告知バーの背景色を変更するには、バーの色見本をクリックして色を選択します。

  14. 告知のテキストの色を変更するには、テキストの色見本をクリックして色を選択します。

  15. 保存をクリック

フッター

フッターセクションでは、ストアの各ページの下部に表示されるコンテンツを編集できます。以下の機能をフッターに追加できます。

  • 最大2つのメニュー
  • ニュースレターのサインアップ
  • 支払いアイコン

メニュー、ニュースレターのサインアップ、および著作権のテキストを表示するフッターセクション。

フッターセクションをカスタマイズするには、以下の手順を実行します。

  1. Debut を検索して、[カスタマイズ] をクリックします。

  2. [セクション] をクリックします。

  3. [フッター] をクリックします。

  4. プライマリメニューエリアからプライマリフッターメニューをカスタマイズします。デフォルトのメニューを編集するには、[メニューを編集] をクリックします。別のメニューに変更するには、[変更] をクリックし、既存のメニューを選択するか、[メニューを作成する] をクリックします。

  5. 追加メニューエリアからフッターに追加メニューを追加します。

  6. フッターにニュースレターのサインアップを追加するには、次の手順を実行します。

    1. [ニュースレターのサインアップを表示する] にチェックを入れます。
    2. 見出しフィールドにニュースレターの登録の小見出しを入力します。
  7. [支払いアイコンを表示する] にチェックを入れることで、フッターに支払いアイコン (マスターカードやPayPalなど) を追加します。

  8. 保存をクリック

商品ページ

商品ページセクションでは、以下の要素を追加したり削除したりできます。

  • 数量セレクター
  • バリエーションのラベル
  • 商品のブランド名または販売元
  • 画像ズーム
  • 動的チェックアウトボタン
  • ソーシャル共有ボタン

さらに画像のサイズを設定することもできます。

商品ページの設定を編集するには、以下の手順を実行します。

  1. トップバーのドロップダウンメニューから [商品ページ] を選択します。

  2. [セクション] をクリックします。

  3. [商品ページ] をクリックします。

  4. 画像のサイズを設定するには、画像のサイズドロップダウンメニューから画像のサイズを選択します。

  5. 数量セレクターを表示するには、[数量セレクターを表示する] にチェックを入れます。

  6. 「サイズ」や「色」などのバリエーションのラベルを表示するには、[バリエーションのラベルを表示する] にチェックを入れます。表示されるバリエーションのラベルは、その商品のバリエーションのオプション名に基づいて決まります。

  7. 商品のブランド名または販売元を表示するには、[販売元を表示する] にチェックを入れます。ブランド名や販売元を表示するには、商品に販売元を追加する必要があります。

  8. お客様が商品画像にマウスポインターを重ねてズームインできるようにするには、[画像ズームを有効にする] にチェックを入れます。

  9. 動的チェックアウトボタンを表示するには、[動的チェックアウトボタンを表示する] をオンにします。

  10. ソーシャル共有ボタンを表示するには、[ソーシャル共有ボタンを表示する] にチェックを入れます。

  11. 保存をクリック

コレクションページ

顧客がコレクション内の商品を絞り込んだり並べ替えたりできるよう、コレクションページを設定できます。グリッドまたはリストのコレクションレイアウトを選択し、表示する商品の数を選択することができます。

コレクションページのレイアウトを設定するには、以下の手順を実行します。

  1. テーマエディタのコレクションページに移動します。

  2. [セクション] タブをクリックします。

  3. [コレクションページ] をクリックします。

  4. レイアウトリストから、グリッドまたはリストを選択します。

  5. グリッドスタイルを選択する場合、1行あたりの商品数と1ページあたりの行数をリストから選択します。

  6. ページ上部にコレクション画像を表示する場合、[コレクションの画像を表示する] にチェックを入れます。

  7. 商品のブランド名や販売元を表示する場合、[商品の販売元を表示する] にチェックを入れます。

  8. 並び替えメニューを表示する場合、[並び替えを有効にする] をクリックします。

  9. お客様が商品タグごとにコレクションを絞り込めるようにする場合、[タグでの絞り込みを有効にする] にチェックを入れます。

  10. 保存をクリック

コレクションリストのページ

コレクションリストのページでは、商品コレクションすべてがグリッド形式で表示されます。お客様は、コレクションリストのページでコレクション全体を閲覧し、希望するコレクションを見つけることができます。Debutでは、コレクションリストのページは最上位のリンクで、ヘッダーメニューに配置されています。

Debutのホームページで、トップメニューにあるカタログへのリンクをハイライトしている

グリッド形式でコレクションすべてのサムネイルを表示することや、コレクションの一部を選択して表示することができます。ページのコレクションを並び替えることも可能です。

コレクションリストのページレイアウトを設定するには、以下の手順を実行します。

  1. 最上位のコレクションメニュー項目をクリックして、コレクションリストのページに移動します。

  2. [セクション] タブをクリックします。

  3. [コレクションリストのページ] をクリックします。

  4. 以下のいずれかの操作を実行します。

    1. グリッド形式でコレクションすべてのサムネイルを表示するには、すべてを選択します。
    2. コレクションリストのページで特定のコレクションを1つ表示するには、選択項目のみを選択します。
  5. 1つ前のステップで すべてを選択した場合は、以下の手順を実行します。

    1. コレクションの並び替え方法リストから、並び替えオプションを選択します。
    2. 行あたりのコレクション数リストから、1行あたりのコレクションの数を選択します。
  6. 保存をクリック

ブログページ

Debutでは、ブログ記事をリスト形式またはグリッド形式で表示できます。ブログ執筆者が複数の場合、各ブログに執筆者名を表示することが可能です。ブログを公開した日付を表示することもできます。

  1. テーマエディタのプレビューエリアにあるブログページに移動します。

  2. [セクション] をクリックします。

  3. [ブログページ] をクリックします。

  4. レイアウトリストで、ブログ記事の表示形式をリストまたはグリッドから選択します。

  5. [執筆者を表示する] にチェックを入れると、執筆者名を表示できます。

  6. [日付を表示する] にチェックを入れると、ブログ記事の公開日を表示できます。

  7. 保存をクリック

カートページ

Debutでは、お客様が注文の際にカートページでメモを追加できるように設定できます。

  1. カートに商品を追加して、テーマエディタのカートページに移動します。

  2. [セクション] タブをクリックします。

  3. [カートページ] をクリックします。

  4. [カートメモを有効にする] にチェックを入れます。

  5. 保存をクリック

特集コレクション

ホームページにコレクションを特集することができます。コレクションの特集は、販売促進や新作コレクションの宣伝に役立ちます。

Debutでは、[すべて表示] ボタンの追加が可能で、お客様はコレクションを一括して確認することができます。また、各商品画像の下に販売元名を表示することが可能です。

ホームページでコレクションを特集するには、以下の手順を実行します。

  1. [セクション] タブをクリックします。

  2. [特集コレクション] セクションをクリックします。

  3. コレクションの上に表示されるテキストを変更する場合、[見出し] フィールドにテキストを入力します。

  4. コレクションリストから、表示するコレクションを選択します。選択したコレクションに商品を追加または削除するには、[コレクションを編集] リンクをクリックし、新しいタブでコレクションページを開きます。

  5. 行ごとの商品リストから、各行に表示する商品の数を選択します。

  6. リストから、表示する商品の行数を選択します。

  7. 各商品画像の下に販売元またはブランド名を表示する場合は、[商品の販売元を表示する] にチェックを入れます。

  8. お客様がコレクションのすべての商品を閲覧できるようにするに、[「すべて表示」ボタンを表示する] にチェックを入れます。

  9. 保存をクリック

テキスト付き画像

Debutでは画像を追加し、画像の左右いずれかにテキストを表示することができます。ストアのページにリンクするボタンを追加することも可能です。

テキスト付き画像セクションは通常、商品やコレクションの宣伝、ウェブサイトのトラフィックをブログページに誘導することに使用できます。

テキスト付き画像セクションをホームページに追加するには、以下の手順を実行します。

  1. [セクション] タブをクリックします。

  2. [テキスト付き画像] セクションをクリックします。

  3. 画像エリアで [画像を選択する] をクリックし、以下のいずれかの操作を実行します。

- To select an image you have already uploaded to your Shopify admin, click the **Library** tab.
- To select a stock image from [Shopify's Burst stock image collection](https://burst.shopify.com/), click the **Free images** tab. From here you can enter a search term, or browse the image categories.
- To select an image from your local computer, click the **Library** tab, and then click the plus button.
  1. レイアウトリストで、テキストの左右どちらに画像を表示するか選択します。

  2. [見出し] フィールドに、このセクションの新しいタイトルを入力します。

  3. [テキスト] フィールドのヘッダーの下に表示するテキストを入力します。

  4. ボタンに表示するテキストを、[ボタンラベル] フィールドに入力します。

  5. [ボタンリンク] フィールドで、ボタンをリンクさせるストアのページを選択します。

  6. 保存をクリック

テキストオーバーレイ付き画像

ホームページにカスタムテキストオーバーレイ付きの大きな画像を特集することができます。

テキスト付き画像セクションには、以下の設定が含まれます。

  • 画像 - セクションに追加する画像を選択します。
  • 画像アラインメント - 画像を表示するページの横側を設定します。
  • レイアウト - セクションの幅を設定します。
  • セクションの高さ - セクションの高さを設定します。画像がトリミングされないようにするには、[画像に適応する] を選択し、画像の高さに基づいてセクションの高さを設定します。
  • テキストサイズ - テキストのサイズを設定します。
  • 見出し - セクションに見出しを追加します。
  • テキスト - セクションにテキストを追加します。テキストオーバーレイ付き画像セクションの名前は、入力した見出しに自動的に変更されます。
  • ボタンラベル - テキストラベル付きボタンをセクションに追加します。
  • ボタンリンク - ボタンを別のページまたはウェブサイトにリンクさせます。

テキスト付き画像をホームページに追加する

  1. Debut を検索して、[カスタマイズ] をクリックします。

  2. [セクションを追加] > [テキスト付き画像] > [追加] の順にクリックします。

  3. 設定でテキストオーバーレイ付き画像セクションをカスタマイズします。

  4. 保存をクリック

ニュースレター

ホームページにニュースレターのサインアップを追加することができます。これにより、メールマーケティングキャンペーンのお客様のメールアドレスを収集できます。メールマーケティングについて詳しくは、Shopifyブログをご覧ください。

ウェブサイトにあるニュースレターのセクション。お客様がメールアドレスを入力するフィールドと「購読」と書かれたボタンがあります。

ホームページにニュースレターのサインアップを追加するには、次のとおりにします。

  1. Debut を検索して、[カスタマイズ] をクリックします。

  2. [セクション] をクリックします。

  3. [セクションを追加] > [ニュースレター] をクリックします。

  4. 見出しフィールドに、ニュースレターのサインアップの見出しを入力します。デフォルトの見出しは「ストアからのお知らせを受け取る」です。

  5. 見出しフィールドにニュースレターの登録の小見出しを入力します。

  6. 保存をクリック

ビデオ

YouTubeのビデオをホームページに追加できます。ビデオによってお客様を引き込み、ビジネスへの関心を高めることができます。

ビデオセクションには、以下の設定が含まれます。

  • ビデオの高さ - ビデオの高さを設定します。
  • テキストサイズ - ビデオにテキストを追加します。ビデオのスタイルを再生ボタン付き画像に設定した場合、ビデオの再生中はテキストが削除されます。
  • オーバーレイを表示する - ビデオに色のレイヤーを追加し、テキストを読みやすくできます。ビデオのスタイルを再生ボタン付き画像に設定した場合、ビデオの再生中はオーバーレイが削除されます。
  • スタイル - ビデオのスタイルを設定します。バックグラウンドビデオスタイルはデスクトップのみで利用可能です。お客様がタブレットやモバイル端末を使用してストアにアクセスした場合、常に再生ボタン付き画像スタイルで表示されます。
  • 見出し - ビデオに見出しを追加します。
  • ビデオリンク - ビデオのYouTube URLを追加します。
  • 表紙画像 - ビデオに表紙画像を追加します。ビデオの再生中は、表紙画像は非表示になります。
  • 画像アラインメント - 最も重要な部分が常に見えるように表紙画像を配置します。

ホームページにビデオを追加する

  1. Debut を検索して、[カスタマイズ] をクリックします。

  2. [セクションを追加] > [ビデオ] をクリックします。

  3. 設定でビデオセクションをカスタマイズします。

  4. 保存をクリック

スライドショー

ホームページに画像スライドショーを追加できます。スライドショーセクションでは、スライドの高さを設定し、テキストとボタンを追加し、スライドショーを自動再生するかどうかを選択できます。

スライドショーを備えたPure Teaと呼ばれるオンラインストアのホームページです。カウンタートップ上のティーカップのスライドは、「手作り」という見出しと「産業用機械ではなくお茶職人によって作られた」という小見出しで表示されています。

スライドショー画像のトリミングや推奨される画像のサイズの詳細情報については、下のガイドラインを参照してください。

スライドショーを作成する

  1. Debut を検索して、[カスタマイズ] をクリックします。

  2. [セクション] をクリックします。

  3. [スライドショー] をクリックします。

  4. [スライド高さ] ドロップダウンメニューでスライドの高さを設定します。

    詳しくはスライドの高さがスライドショーに与える影響をご覧ください。

  5. [テキストサイズ] ドロップダウンメニューで見出しと小見出しのサイズを設定します。

  6. [テキストアラインメント] ドロップダウンメニューでスライド上のテキストの位置を設定します。

  7. オプション: [オーバーレイを表示する] をチェックします。画像オーバーレイは、画像とその画像上に配置された任意のテキストとの間の色の層のことです。オーバーレイは、色のコントラストと読みやすさに役立ちます。オーバーレイの色と不透明度は [色の設定] で設定できます。

  8. オプション: [スライドの自動切り替え] をチェックすると、自動的にスライドショーが再生されます。[スライドを変更する間隔] スライダーを使用して、各スライドがどのくらいの時間表示されるかを選択します。

  9. 画像スライドを追加するには、次の手順を実行します。

    1. コンテンツエリアで [画像スライドを追加する] をクリックします。
    2. 画像[画像を選択する] をクリックします。コンピューターから画像をアップロードするには、[アップロード] をクリックします。Burstから無料のストック画像を使用するには、[無料の画像] をクリックします。
    3. スライドショーでどのように画像の位置を調整するかを選択するには [画像の位置] ドロップダウンメニューで位置を選択します。画像の位置については詳しく知るには、以下のガイドラインをご覧ください。
    4. 画像スライドにテキストを追加するには [見出し] フィールド [小見出し] フィールド、またはその両方にテキストを入力します。
    5. [テキストのボタンラベル] フィールドにテキストを入力して、画像スライドにボタンを追加します。[ボタンリンク] フィールドで、リンクするボタンのためのオンラインストアの一部を選択します。

    テーマエディタのボタンリンクフィールド。リンクをクリックすると、コレクション、商品、ページ、ブログ、ブログ記事を含むメニューが表示されます。このメニューを使用して、特定のコレクション、商品などにリンクさせることができます。

  10. 保存をクリック

スライドショーのガイドライン

以下の設定と推奨画像を使用して、オンラインストアでのスライドショーの表示方法をコントロールできます。スライドの表示方法は以下の要素によって決まります。

  • 画像の寸法
  • 画像の位置設定
  • スライドの高さ設定
  • 画像の幅と高さの比

画面のサイズと形状が異なるため、スライド表示がモバイル端末とデスクトップ端末で異なる場合があります。

推奨画像のサイズ

スライドショー画像で推奨される寸法は、スライドの高さ設定によって異なります。

テーマエディタ上のスライドの高さ設定。スライドの高さのドロップダウンメニューには、次のオプションが表示されます。最初の画像に適応する、小、中、大。

次のガイドラインを使用してください。

スライドの高さ設定 推奨される幅 推奨される高さ
最初の画像に適応する 1200ピクセル 600ピクセル
1200ピクセル 475ピクセル
1200ピクセル 489ピクセル
1200ピクセル 775ピクセル

スライドの高さ設定を表示または変更するには、スライドショーの作成手順のステップ5を参照します。

画像のトリミング

画像のトリミングをコントロールする、あるいはすべてトリミングされてしまうことを回避するためのステップを実行できます。

画像のトリミング方法をコントロールする

次の状況では、一部の画面サイズで画像のトリミングが発生することがあります。

  • 画像の幅と高さの比が同じではありません。
  • スライドの高さが [小] [中] または [大] に設定されています。
  • スライドの高さは最初の画像に適応するに設定され、画像は端末の画面やブラウザーのウィンドウよりも高くなります。

[画像の位置] の設定を使用して、画像のトリミングをコントロールできます。

テーマエディタの画像の位置設定。ドロップダウンメニューには、「左上」や「中央右」などの9つの異なるオプションが表示されます。

各画像について、トリミングが発生したときに表示する部分を選択することができます。次の例では、一部の画面サイズで同じ画像がどのようにトリミングされるかを確認できます。左側のスライドでは画像の位置が [中央中] に設定されています。右側のスライドでは画像の位置が [左上] に設定されています。

画像の位置設定に応じて別々にトリミングされるスライドの例。

画像の位置設定を表示または変更するには、スライドショーの作成手順のステップ10を参照します。

画像のトリミングを避ける

スライドショーで画像のトリミングを避けるには、次のステップを実行してください。

  • スライドの高さを最初の画像に適応するに設定します。
  • 幅が長さに対して2倍の画像を使用してください。このような画像の幅と高さの比は2:1です。推奨される寸法は1200ピクセルx600ピクセルです。
  • すべてのスライドの幅と高さの比が同じであることを確認してください。スライドの比はピクセル単位の寸法よりも重要です。

次の例では、デスクトップとモバイル端末に2:1の比のスライドショー画像が表示されます。

スライドはトリミングされることなくデスクトップやモバイル端末上に表示されます。

スライドの高さ

スライドショーセクションの幅は、常にブラウザーウィンドウの100%です。スライドの高さはその幅に比例します。画面サイズが異なるため、スライドの幅と高さは端末によって異なります。スライドの高さは、スライドの高さ設定の影響を受けます。

最初の画像に適応するのスライドの高さ設定を使用して、スライドショーの高さを最初の画像の高さに合わせることができます。この設定は、すべての画像が同じサイズであるか、幅と高さの比が同じ場合に最適です。画像のサイズや比が異なる場合は、スライドの順序を変更して異なる高さでどのように表示されるかを確認できます。

次の例では、最短のスライドが最初に配置されます。

より低いスライドによって他の2つのスライドの高さが決まります。他のスライドは高いので、上部と下部でトリミングされます。

次の例では、より大きなスライドが最初に配置されます。

中程度の高さのスライドにより他の2つのスライドの高さが決まります。より高いスライドは上部と下部でトリミングされます。より低いスライドは画像の端がトリミングされます。

代わりに [小][中][大] のいずれかの高さの設定を使用する場合は、スライドの推奨画像のサイズを参照してください。

画像比

スライドショーで画像のトリミングを避けたい場合は、画像の幅と高さの比を2:1にすることをおすすめします。

デスクトップディスプレイでなく、モバイル端末のトリミングによる影響を考慮する場合、正方形の画像、または幅よりも高さのある画像を使用してください。次のスライドの例は幅と高さの比が1:1の正方形の画像を示しています。

正方形のスライドがデスクトップとモバイル端末に表示されます。画像はデスクトップ端末でトリミングされますが、モバイル端末でトリミングされません。

次のスライドの例は、幅と高さの比率が2:3のポートレート画像を示しています。

高いスライドがデスクトップとモバイル端末に表示されます。画像はデスクトップ端末でトリミングされますが、モバイル端末でトリミングされません。

テーマ設定。テーマ設定を使用して、オンラインストアの色と文字体裁をカスタマイズすることができます。ソーシャルメディアアカウントへのリンクを設定したり、カートの設定を編集したり、ファビコンを追加することもできます。

Debutには以下のテーマ設定が含まれています。

  • 文字体裁
  • SNS
  • ファビコン
  • チェックアウト

オンラインストアのさまざまな部分のカラーを選択できます。

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

  1. *の隣にある *[カスタマイズする] をクリックします。

  2. [テーマ設定] をクリックします。

  3. [カラー] をクリックします。

  4. コンテンツのタイプごとに、カラー見本をクリックしてカラーピッカーを使用します。

    テーマエディタのカラーピッカー

- 最近選択されたエリアには、あなたが最近テーマで選択したカラーが表示されます。 - 現在使用されているエリアには、あなたがテーマの別の部分で現在使用しているカラーが表示されます。

カラーを透明に設定するには、[なし] をクリックします。

  1. 保存をクリック

文字体裁

オンラインストアのテキストのフォントスタイルとサイズを設定できます。

文字体裁の設定をカスタマイズする

  1. *の隣にある *[カスタマイズする] をクリックします。

  2. [テーマ設定] をクリックします。

  3. [文字体裁] をクリックします。

  4. テキストのタイプごとに、[変更] をクリックしてフォントピッカーを使用します。

    フォントピッカーの「変更」ボタン

  5. 検索フィールドを使用するか、[さらに読み込む] をクリックしてフォントを検索します。

    利用可能なフォントをすべて表示するには、「Shopifyのフォントライブラリー」を確認してください。

  6. 使用するフォントの名前をクリックします。

  7. フォントを太字や斜体などの別のスタイルに変更するには、[標準] をクリックします。次に、使用するスタイルをクリックし、[選択] をクリックします。

    フォントピッカーで使用可能なフォントウェイトの選択

  8. 保存をクリック

SNS

商品やブログ記事用のソーシャル共有ボタン、ソーシャルメディアアカウントへのリンクを追加することができます。

ソーシャルメディアの設定をカスタマイズするには

  1. Debut を検索して、[カスタマイズ] をクリックします。

  2. [テーマ設定] をクリックします。

  3. [ソーシャルメディア] をクリックします。

  4. ソーシャル共有画像をアップロードするには、ソーシャル共有画像エリアで、[画像を選択する] または [無料の画像を探す] をクリックします。

  5. 商品やブログ記事にソーシャル共有ボタンを追加するには、シェアのオプションエリアでチェックボックスのいずれか、またはすべてをオンにします。

    次の共有ボタンを追加できます。

- **Share on Facebook**
- **Tweet on Twitter**
- **Pin on Pinterest** (not available for blog post sharing)
  1. ソーシャルメディアアカウントへのリンクを追加するには、アカウントエリアで、所定フィールドにアカウントへのリンクを入力します。https://instagram.com/shopifyhttps://twitter.com/shopify 等の完全なリンクを入力してください。

    ソーシャルメディアアカウントへのリンクは、オンラインストアのフッターに表示されます。

  2. 保存をクリック

ファビコン

「ファビコン」と呼ばれるお気に入りのアイコンをアップロードして、以下の場所にロゴを表示することで、オンラインストアのブランディングに役立ちます。

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

Debutに最適なファビコンの画像サイズは32 x 32ピクセルです。

ファビコンをアップロードするには、以下の手順を実行します。

  1. Debutセクションで、[カスタマイズ] をクリックします。

  2. [テーマ設定] タブをクリックします。

  3. [ファビコン] をクリックします。

  4. ファビコン画像エリアで [画像を選択する] をクリックし、以下のいずれかの操作を実行します。

- To select an image you have already uploaded to your Shopify admin, click the **Library** tab.
- To select an image from your local computer, click the **Library** tab, and then click the plus button.
  1. 保存をクリック

チェックアウト

チェックアウトページをカスタマイズして、以下の項目を含めることができます。

  • ページ上部のカスタム画像バナー
  • ストアのロゴ
  • メインコンテンツエリアの背景画像および色
  • カスタムテキストのフォントおよび色

変更を確認しながら適用するには、テーマエディタのチェックアウトページに移動します。

チェックアウトページの設定にアクセスする

  1. Debutセクションで、[カスタマイズ] をクリックします。

  2. [テーマ設定] タブをクリックします。

  3. チェックアウトをクリックします。

バナー画像を追加するには、以下の手順を実行します。

  1. バナーエリアで、[カスタムバックグラウンドを使用する] のチェックボックスをオンにします。

  2. [ファイルを選ぶ] をクリックして画像ファイルをアップロードします。

ロゴを追加する

  1. ロゴエリアの [画像] ドロップダウンメニューで、[カスタム] を選択します。

  2. [ファイルを選ぶ] リンクをクリックして、画像ファイルをアップロードします。

  3. [位置] のドロップダウンメニューで、画像を表示する位置を右、左、中央のいずれかから選択します。

  4. ロゴサイズリストから、ロゴのサイズを選択します。

メインコンテンツエリアをカスタマイズする

  1. メインコンテンツエリアのエリアで、[カスタムバックグラウンドを使用する] のチェックボックスをオンにします。

  2. 以下のいずれかの操作を実行します。

  • [ファイルを選ぶ] をクリックして画像ファイルをアップロードします。
  • バックグラウンドの色の見本をクリックし、パレットから新しい色を選択します。
  1. [フォームフィールド] のドロップダウンメニューで、フィールドの表示方法を白または透明から選択します。

注文サマリーのページをカスタマイズする

  1. 注文サマリーエリアで、[カスタムバックグラウンドを使用する] のチェックボックスをオンにします。

  2. 以下のいずれかの操作を実行します。

  • [ファイルを選ぶ] をクリックして画像ファイルをアップロードします。

  • バックグラウンドの色の見本をクリックし、パレットから新しい色を選択します。

フォントのオプションを設定する

  • 文字体裁エリアのドロップダウンメニューから、見出しと本文に使用するフォントを選択します。

カラーオプションを設定するには、以下の手順を実行します。

  • カラーエリアでアクセントボタンエラーのカラー見本をクリックし、パレットから新しい色を選択します。

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

テーマの一般設定をデフォルト値にリセットすることができます。テーマのスタイルをリセットすると、一般設定タブで行った変更はすべて失われますが、テキストや画像などのコンテンツは保存されます。

  1. [一般設定] タブをクリックします。

  2. [テーマスタイルを変更する] をクリックします。

  3. テーマスタイルを変更するの下にあるボタンをクリックします。通常このボタンはテーマ名と表示されます。

  4. [スタイルを変更する] をクリックします。

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

無料体験を試す