Narrativeのセクション

このページはMar 01, 2021に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/online-store/os/using-themes/themes-by-shopify/narrative/sectionsをご覧ください。

テーマコンテンツはセクションを使用して作成されます。セクションは、オンラインストアのさまざまなページのレイアウトと外観を決定するカスタマイズ可能なコンテンツブロックです。

静的セクションは、オンラインストアの所定のロケーションに表示されるセクションです。これらのセクションを削除または再配置することはできません。静的セクションには、商品ページやコレクションページなどのページ上で、ヘッダー、フッター、ナビゲーションセクション、またはコンテンツセクションが含まれる場合があります。たとえば、商品セクションでは、オンラインストアの各商品ページの外観を決定します。

動的セクションはオプションセクションで、ホームページのレイアウトをカスタマイズするために使用することができます。ストアのホームページで、動的セクションを追加、再配置、また削除してページレイアウトを作成することができます。ホームページには最大25個の動的セクションを追加できます。

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

静的セクション

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

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

動的セクション

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

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

ヘッダー

ヘッダーセクションには、ストアの各ページ上部に表示されるコンテンツが含まれます。Narrativeでは、お客様がナビゲーションアイコン (☰) をクリックすることでアクセス可能なナビゲーションメニューを2つ選択できます。

また、ストアのヘッダーを透明にすることにより見た目を変更することもできます。

ヘッダーをカスタマイズする

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

  1. [ヘッダー] セクションをクリックします。

  2. ロゴ画像エリアで [画像を選択する] をクリックし、次のいずれかの操作を行います。- 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。

  3. Burstからストック画像を選択するには、[無料の画像] タブをクリックします。ここで検索ワードを入力するか、画像カテゴリーを閲覧することができます。

  4. ローカルコンピューターから画像を選択する場合は、[ライブラリー] タブをクリックし、次に [アップロード] をクリックします。

  5. カスタムロゴの高さ (ピクセル) フィールドにロゴのピクセル高を入力します。

  6. ショッピングカートアイコンリストから、ヘッダーに表示するバッグまたはカートロゴのいずれかを選択します。

  7. ストアのヘッダーを透明にする場合は、以下の操作を行います。

    1. [ホームページの透過ヘッダーを有効にする] をクリックします。
    2. 透明の背景に表示する画像を選択します。ヘッダーページに表示するロゴとは異なるロゴの選択が必要な場合もあります。たとえば暗めの背景に表示する場合は、白色のロゴが必要となります。
    3. 透明ヘッダーアイコンのカラーパレットをクリックし、ロゴ画像、メニュー、カートアイコンの色を選択します。

  8. プライマリメニューリストから、顧客がメニューアイコンをクリックしたときに表示されるプライマリメニューを選択します。

  9. サブメニューを [サブメニュー] リストから選択します。

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

告知バーを追加する

ヘッダーに告知バーを追加してお客様にメッセージを表示できます。メッセージはカスタマイズ可能で、連絡先情報、ストアのイベントや販売に関する情報、またはストアのスローガンを含めることが可能です。

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Narrativeのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. [ヘッダー] をクリックします。
  2. 告知エリアで、[告知を表示する] にチェックを入れます。
  3. 告知のテキストを入力します。
  4. オプション: URLを入力して告知へのリンクを追加します。
  5. オプション: アイコンメニューから、告知バーに表示するアイコンを選択します。アイコンには告知のテキストと同じ色が使われます。
  6. 告知バーの背景色を変更するには、バーの色見本をクリックして色を選択します。
  7. 告知のテキストの配色を変更するには、テキストの色見本をクリックして配色を選択します。
  8. [保存] をクリックします。

スライドショー

最大5枚の画像もしくはビデオを切り替えられるホームページスライドショーを作成できます。

高解像度の画像をスライドに使用することをおすすめします。Shopifyのアップロード制限を超えない限り、4,000 x 2,200ピクセル以上の画像を使用してください。

スライドショーのサイズと形状は、お客様が所有するデバイスのサイズや形状に依存するため、一部の画面ではスライドショー画像がトリミングされます。中心に焦点を合わせた画像を使用して、各画像の重要な部分が常に表示されるようにします。

スライドショー画像のベストプラクティスについては、「画像をアップロードする」を参照してください。

スライドショーセクションには、以下の設定が含まれます。

  • スライドの高さ - スライドショーの高さを設定します。最初の画像のスライドの高さに適応するを選択して、スライドショーの高さを最初の画像の高さに合わせることができます。
  • 中央ボタン - スライド上のボタンの位置を設定します。
  • オーバーレイ - スライドに色のレイヤーを追加します。オーバーレイを使用すると、スライドショーのテキストを読みやすくできます。
  • オーバーレイの色 - オーバーレイの色を設定します。
  • 不透過率 - オーバーレイの不透過率を設定します。
  • 画像 - スライドショーに表示する画像を追加します。
  • 画像アラインメント - スライドショーで最優先してフォーカスする画像の領域を選択します。
  • ビデオリンク - ビデオのYouTubeリンクを追加します。
  • 表紙画像 - ビデオスライドの表紙画像を追加します。表紙画像は、ビデオが再生されていないときに表示されます。
  • 見出し - 見出しをスライドに追加します。
  • スライドタイトル - スライドのタイトルを追加します。スライドが複数ある場合は、スライドショーの下部に表示されます。
  • ボタンのラベル - スライドにテキストラベル付きのボタンを追加します。
  • ボタンのリンク - ボタンのリンク先となるURLまたはページを設定します。URLに貼り付けるか、メニューからページを選択します。セクションにボタンを含めない場合は、このフィールドを空白のままにします。

ホームページにスライドショーを追加する

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Narrativeのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. [セクションを追加する] をクリックします。
  2. [スライドショー] をクリックし、[選択] をクリックします。

  3. 設定でスライドショーをカスタマイズします。

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

フッター

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

フッターをカスタマイズする

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Narrativeのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. [フッター] をクリックします。
  2. [ソーシャルアイコンを表示する] にチェックを入れ、SNSアイコンをフッターに追加します。SNSのアカウントにアイコンをリンクするには、ソーシャル設定から行います。
  3. [支払いアイコンを表示する] にチェックを入れることで、フッターに支払いアイコン (MastercardやPayPalなど) を追加します。 このエリアには、管理画面の決済設定セクションで有効にした決済サービスに関連付けられているアイコンが表示されます。

  4. フッターにニュースレターの登録を追加するには、次の手順を実行します。

    1. [ニュースレターの登録を表示する] にチェックを入れます。
    2. 見出しフィールドに、ニュースレターの登録の見出しを入力します。デフォルトの見出しは「更新に登録する」です。
    3. 見出しフィールドにニュースレターの登録の小見出しを入力します。デフォルトのテキストは、「プロモーション、新商品、セールについて、あなたの受信箱に直接知らせる。」です。

  5. フッターにメニューを追加するには、次の手順を実行します。

    1. コンテンツの [メニューを追加する] をクリックします。
    2. デフォルトのメニューを編集するには、[メニューを編集] をクリックします。別のメニューに変更するには、[変更] をクリックし、既存のメニューを選択するか、[メニューを作成する] をクリックします。

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

商品ページ

商品ページセクションは、商品ページの主なカスタマイズ可能なセクションです。次のオプションを使用して、このセクションをカスタマイズすることができます。

  • 数量セレクターを表示する - ユーザーがカートに追加する数量を指定することができます。
  • バリエーションのラベルを表示する - バリエーションのドロップダウンメニューの上の「サイズ」および「色」などのバリエーションのラベルを表示します。表示されるバリエーションのラベルは、商品のバリエーションのオプション名に基づいて決まります。
  • 商品の販売元を表示する - 商品のブランドまたは販売元を表示します。ブランドや販売元を表示するには、商品に販売元を追加する必要があります。
  • 動的チェックアウトボタンを表示する - お客様がカートをスキップして、特集商品セクションから直接チェックアウトに進むことができます。
  • SNSでの共有ボタンを表示する - お客様が商品をSNSで共有できるようボタンを表示します。表示される共有オプションはテーマ設定で管理されます。

メディア

  • ビデオループを有効にする - 商品のビデオをループ再生します。このオプションの選択が解除されると、ビデオの再生終了時に再生ボタンが表示されます。
  • ギャラリーのバリエーションメディアを非表示にする - このオプションを選択して、ページ下部のギャラリーにバリエーションメディアが表示されないようにします。このオプションが有効になっている場合、バリエーションに添付されていないメディアだけが表示されます。

商品ページの設定を編集する

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Narrativeのセクションの隣にある [カスタマイズする] をクリックします。
  3. ページ上部のドロップダウンメニューを開きます。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [テンプレート] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [テンプレート] をタップします。
  1. [商品ページ] を選択します。
  2. [商品ページ] セクションをクリックします。
  3. 設定で商品ページセクションをカスタマイズします。
  4. [保存] をクリックします。

商品の推奨

お客様が興味のある可能性がある他の商品を見つけやすくするために、商品ページにおすすめ商品を表示できます。

商品のおすすめを有効にする

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Narrativeのセクションの隣にある [カスタマイズする] をクリックします。
  3. ページ上部のドロップダウンメニューを開きます。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [テンプレート] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [テンプレート] をタップします。

  1. [商品ページ] を選択します。

  2. [商品のおすすめ] セクションをクリックします。

  3. 商品ページに商品のおすすめを表示するには、[ダイナミックレコメンデーションを表示する] にチェックを入れます。

  4. オプション: おすすめ商品の上に表示されるタイトルを変更するには、[見出し] フィールドに新しいタイトルを入力します。

  5. オプション: 商品説明で販売元を表示または非表示にするには、販売元を表示するチェックボックスを使用します。

  6. オプション: 商品画像の間隔を追加するには、[画像の間隔を有効にする] を選択します。

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

コレクション

コレクションセクションは、コレクションページの主なカスタマイズ可能なセクションです。

コレクションセクションには次の設定が含まれています。

  • タグでの絞り込みを有効にする - 絞り込みを追加することにより、お客様が特定のタグでコレクションの商品を表示できるようにします。コレクションページに絞り込みを表示するには、そのコレクションの商品にタグを追加する必要があります。
  • コレクションの並び替えを有効にする: お客様がコレクションをアルファベット順や価格順などの方法で並び替える際に使用するメニューを追加できます。
  • グリッドスタイル - ページ上の商品レイアウトを設定します。
  • コレクションの画像を表示する - コレクションページの上部にコレクションの画像を表示します。
  • 画像の間隔を有効にする - このオプションを選択して画像の間隔を広げます。
  • 商品の販売元を表示する - 商品ブランドまたは販売元を表示します。

コレクションページをカスタマイズする

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Narrativeのセクションの隣にある [カスタマイズする] をクリックします。
  3. ページ上部のドロップダウンメニューを開きます。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [テンプレート] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [テンプレート] をタップします。
  1. [コレクションページ] を選択します。
  2. [コレクションページ] セクションをクリックします。
  3. 設定でコレクションページセクションをカスタマイズします。
  4. [保存] をクリックします。

カートページ

カートページセクションは、カスタマイズ可能なオンラインストアのカートの主要なセクションです。カートページでは、カートメモを有効にすることにより、お客様が注文への特別な指示を入力できるようにします。

注文メモを有効にする

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Narrativeのセクションの隣にある [カスタマイズする] をクリックします。
  3. ページ上部のドロップダウンメニューを開きます。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [テンプレート] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [テンプレート] をタップします。
  1. [カート] を選択します。
  2. [カートページ] セクションをクリックします。
  3. [カートメモを有効にする] を選択します。
  4. [保存] をクリックします。

ヒント: カートドロワーのテーマ設定から、ドロワーのスタイルにカートを設定することができます。ページの右側にカートドロワーがスライドして表示されるので、お客様は商品ページを離れることなくカートに商品を追加できます。

特集コレクション

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

特集コレクションセクションには次の設定が含まれます。

  • コレクション - セクションに表示するコレクションを選択します。
  • 画像の間隔を有効にする - このオプションを選択して画像の間隔を広げます。
  • 見出し - コレクションの商品の上に表示されるテキストを追加します。デフォルトのテキストは特集コレクションです。
  • 商品の販売元を表示する - 商品名の下に各商品の販売元を表示します。
  • 「すべてを表示する」ボタンを表示する - このオプションを選択して、すべてを表示するボタンをセクションの最終行の下に追加します。お客様はこのボタンをクリックすることにより、コレクション全体を表示することができます。
  • サブボタンのスタイルを使用する - ボタンをソリッドアウトラインの透明ボタンで表示します。
  • グリッドスタイル - ページ上の商品レイアウトを設定します。
  • 行あたりの商品数 - セクションの各行に表示する商品数を選択します。
  • 行 - セクションに表示する商品の行数を選択します。

特集コレクションをホームページに追加する

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Narrativeのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. [セクションを追加する] をクリックします。
  2. [特集コレクション] をクリックして、[選択] をクリックします。
  3. [コレクションを選択する] をクリックして、[コレクション] リストからコレクションを選択します。
  4. 設定で特集コレクションセクションをカスタマイズします。
  5. [保存] をクリックします。

ギャラリー

ギャラリーセクションには、最大3枚の画像が表示されます。13個のカスタムアイコンリストから、各画像の上に表示するアイコンを選択することができます。必要に応じて各画像をストアのURLまたはページにリンクさせることができます。

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

コンテンツ

  • 画像 - セクションに表示する画像を追加します。
  • 画像アラインメント - セクションの画像の整列方法を選択します。アイコンを表示したくない場合は、[アイコン] リストから「なし」を選択します。
  • アイコン - 画像に表示するアイコンを追加します。
  • キャプション - 画像に表示するテキストを入力します。
  • リンク - URLへのリンクを貼り付ける、またはフィールドをクリックしてストアからページを選択します。

設定

  • セクションの高さ - このセクションのサイズを選択します。
  • オーバーレイを表示する - 画像に色のレイヤーを追加します。オーバーレイによりテキストが読みやすくなります。
  • オーバーレイの色 - オーバーレイの色を設定します。
  • テキストの配色 - 見出しおよびテキストの色を設定します。背景画像が暗い場合、明るいテキストの配色を選択すると、テキストが読みやすくなります。
  • 不透過率 - オーバーレイの不透過率を設定します。

ホームページにギャラリーを追加する

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Narrativeのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. [セクションを追加する] をクリックします。
  2. [ギャラリー] をクリックし、[選択] をクリックします。
  3. 画像を追加するには、画像エリアで [画像を選択する] をクリックし、次のいずれかを実施します。- 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。
  4. Burstからストック画像を選択するには、[無料の画像] タブをクリックします。ここで検索ワードを入力するか、画像カテゴリーを閲覧することができます。

  5. ローカルコンピューターから画像を選択する場合は、[ライブラリー] タブをクリックし、次に [アップロード] をクリックします。

  6. 設定で、ギャラリーセクションをカスタマイズします。

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

テキスト付き画像

Narrativeにはカスタムメッセージ付きの画像を顧客に表示するためのテキスト付き画像セクションが含まれています。

画像アライメントを選択して、モバイルデバイスで表示する際に画像の重要な部分が切り取られないようにすることができます。たとえば、販売商品を表示している画像の下部が切り取られないようにする場合、下部中央のアラインメントを選択して、その部分が切り取られないようにすることができます。

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

設定

  • セクションの高さ - このセクションのサイズを選択します。
  • 背景色 - セクションの背景色を設定します。

画像

  • 画像 - セクションに表示する画像を追加します。
  • 画像スタイル - 画像のトリミングスタイルを選択します。[なし] を選択すると、画像はトリミングされません。
  • 画像の位置 - フレーム内の画像のアラインメントを選択します。

テキスト

  • 見出し - セクションに見出しを追加します。
  • テキスト - セクションにテキストを追加します。
  • サブボタンのスタイルを使用する - ボタンをソリッドアウトラインの透明ボタンで表示します。
  • ボタンラベル - テキスト付きボタンのラベルをセクションに追加します。
  • ボタンのリンク - ボタンのリンク先となるURLまたはページを設定します。URLに貼り付けるか、メニューからページを選択します。セクションにボタンを含めない場合は、このフィールドを空白のままにします。

画像アラインメント

  • デスクトップ - デスクトップコンピューターから閲覧するときにセクションの画像を左または右のどちらに表示させるかを選択します。
  • モバイル - モバイルデバイスで閲覧するときにセクション内の画像を最初または2番目のどちらに表示させるかを選択します。

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

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Narrativeのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. [セクションを追加する] をクリックします。
  2. [テキスト付き画像] をクリックし、[選択] をクリックします。
  3. 画像エリアで [画像を選択する] をクリックし、次のいずれかを実施します。- 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。
  4. Burstからストック画像を選択するには、[無料の画像] タブをクリックします。ここで検索ワードを入力するか、画像カテゴリーを閲覧することができます。

  5. ローカルコンピューターから画像を選択する場合は、[ライブラリー] タブをクリックし、次に [アップロード] をクリックします。

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

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

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

テキストオーバーレイ付き画像セクションを使用して、ホームページ上のお客様にカスタムメッセージを表示することができます。メッセージは、商品の説明、告知、またはストアへのお客様歓迎に使用することもできます。

テキストオーバーレイ付き画像セクションには次の設定が含まれます。

設定

  • セクション間隔 - [小]、[中]、[大]、[特大] の中からセクションのサイズを選択します。
  • 画像 - セクションに表示する画像を追加します。
  • 画像アラインメント - セクションの画像の整列方法を選択します。

テキスト

  • 見出し - セクションにタイトルを追加します。
  • テキスト - セクションに本文を追加します。
  • テキストサイズ - 見出しおよび本文のテキストサイズを設定します。
  • サブボタンのスタイルを使用する - ボタンをソリッドアウトラインの透明ボタンで表示します。
  • ボタンのラベル - テキストラベル付きボタンをセクションに追加します。
  • ボタンのリンク - ボタンのリンク先となるURLまたはページを設定します。URLに貼り付けるか、メニューからページを選択します。セクションにボタンを含めない場合は、このフィールドを空白のままにします。

オーバーレイ

  • オーバーレイを表示する - 画像に色のレイヤーを追加します。オーバーレイによりテキストが読みやすくなります。
  • オーバーレイの色 - オーバーレイの色を設定します。
  • テキストの配色 - 見出しおよびテキストの色を設定します。背景画像が暗い場合、明るいテキストの配色を選択すると、テキストが読みやすくなります。
  • 不透過率 - オーバーレイの不透過率を設定します。

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

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Narrativeのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. [セクションを追加する] をクリックします。
  2. [テキストオーバーレイ付き画像] をクリックし、[選択] をクリックします。
  3. 画像エリアで [画像を選択する] をクリックし、次のいずれかを実施します。- 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。
  4. Burstからストック画像を選択するには、[無料の画像] タブをクリックします。ここで検索ワードを入力するか、画像カテゴリーを閲覧することができます。

  5. ローカルコンピューターから画像を選択する場合は、[ライブラリー] タブをクリックし、次に [アップロード] をクリックします。

  6. 設定で、セクションをカスタマイズします。

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

ニュースレター

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

ホームページにニュースレターの登録を追加する

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Narrativeのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. [セクションを追加する] をクリックします。
  2. [ニュースレター] をクリックし、[選択] をクリックします。
  3. 見出しフィールドに、ニュースレターの登録の見出しを入力します。
  4. 見出しフィールドにニュースレターの登録の小見出しを入力します。
  5. 成功のメッセージフィールドに成功のメッセージを入力します。お客様がメールアドレスを送信した後に成功のメッセージが表示されます。デフォルトの成功のメッセージは「ご登録ありがとうございます」です。
  6. ニュースレターの登録フィールドの文字の色を設定するには、[テキストの配色] 見本をクリックして色を選択します。
  7. ニュースレターの登録セクションの背景色を設定するには、背景の色見本をクリックして色を選択します。
  8. [保存] をクリックします。

マップ

ホームページにGoogleマップを追加して、お客様にビジネスの拠点を表示できます。

ヒント: マップを表示するには、GoogleマップのAPIキーを登録する必要があります。

マップセクションには、以下の設定が含まれます。

  • 見出し - マップセクションに見出しを追加します。
  • 住所と営業時間 - ストアの住所と営業時間をマップセクションに追加します。
  • マップアドレス - ストアのロケーションを示すマップを設定します。
  • マップリンクラベル - Googleマップ上のロケーションにリンクするボタンを追加します。
  • ピンを表示する - ストアの特定ロケーションを地図上に示すピンを追加します。
  • GoogleマップのAPIキー - マップのAPIキーをマップセクションに追加します。
  • 画像 - マップが読み込まれない場合に表示される画像を追加します。
  • 画像の位置 - 画像の配置を設定します。

ホームページにマップを追加する

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Narrativeのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. [セクションを追加する] をクリックします。
  2. [マップ] をクリックし、[選択] をクリックします。
  3. 設定でマップセクションをカスタマイズします。
  4. [保存] をクリックします。

ビデオ

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

ビデオを追加するには、そのビデオの共有リンクを見つける必要があります。

  • YouTube - YouTube共有リンクは次のようになります。https://youtu.be/ZXWgHlnVVEYこのYouTubeヘルプの記事では、YouTubeビデオの共有リンクをコピーする方法を説明しています。
  • Vimeo - Vimeoの共有リンクは次のようになります。https://vimeo.com/123456789このVimeoヘルプセンターの記事では、Vimeoビデオの共有リンクをコピーする方法を説明しています。

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

設定

  • 見出し - 再生ボタンの上部に表示されるテキストを追加します。
  • ビデオリンク - ビデオの共有リンクを追加します。

表紙

  • 画像 - ビデオが再生されていないときに、ビデオセクションに表示される画像を追加します。
  • 画像の位置 - ビデオセクション内の画像の位置を選択します。

オーバーレイ

  • オーバーレイを表示する - プレースホルダー画像とボタンのラベルの間に色のレイヤーを追加します。オーバーレイは、動画上のテキストを読みやすくし、再生ボタンがクリックされるまで表示されます。
  • オーバーレイ - オーバーレイの色を設定します。
  • テキスト - 見出しテキストおよび再生ボタンの色を設定します。
  • 不透過率 - オーバーレイの不透過率を設定します。

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

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Narrativeのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. [セクションを追加する] をクリックします。
  2. ビデオ をクリックし、[選択] をクリックします。
  3. ビデオリンクフィールドに、ビデオの共有リンクを貼り付けます。
  4. 設定でビデオセクションをカスタマイズします。
  5. [保存] をクリックします。

特集スライダー

特集スライダーを使用すると、ホームページに商品情報をさらに表示することができます。

商品の機能、新作コレクション、商品のバリエーションなどを表示することができます。デスクトップ上のセットをブラウズする間、スライドショーではページのスクロールがロックされるため、少なめのスライドを用いるのが最も効果的です。

モバイルデバイスで特集スライダーを開いて表示するには、タップまたはピンチ操作が必要です。お客様が特集スライダーを開くよう促すためには、魅力的な表紙画像と「行動喚起」につながるテキストを用いることが重要です。

特集スライダーには最大5点のスライドを追加できます。

特集スライダーをカスタマイズする

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
  2. Narrativeのセクションの隣にある [カスタマイズする] をクリックします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. Shopifyアプリから [Store] をタップします。
  2. [販売チャネル] セクションで、[オンラインストア] をタップします。
  3. [テーマを管理する] をタップします。
  4. Narrativeのセクションの横にある [カスタマイズ] をタップします。
  5. [編集] をタップします。
  1. [セクションを追加する] をクリックします。
  2. [特集スライダー] をクリックして、[選択] をクリックします。
  3. 設定で特集スライダーセクションをカスタマイズします。
  4. [保存] をクリックします。

画像スライドを追加する

  1. コンテンツエリアで [スライド] をクリックします。
  2. [背景色] 見本をクリックし、パレットから背景色を選択します。
  3. 画像エリアで [画像を選択する] をクリックし、次のいずれかを実施します。- 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。
  4. Burstからストック画像を選択するには、[無料の画像] タブをクリックします。ここで検索ワードを入力するか、画像カテゴリーを閲覧することができます。

  5. ローカルコンピューターから画像を選択する場合は、[ライブラリー] タブをクリックし、次に [アップロード] をクリックします。

  6. スライドに表示するテキストを見出しフィールドに入力します。

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

  8. ボタンのリンクフィールドで、ボタンのリンク先となるURLまたはページを設定します。URLに貼り付けるか、メニューからページを選択します。セクションにボタンを含めない場合は、このフィールドを空白のままにします。

特集スライダー設定をカスタマイズする

  1. ソリッドアウトラインの透明ボタンとしてスライドボタンを表示する場合は、[サブボタンのスタイルを使用する] にチェックを入れます。
  2. テキストの配色を変更する場合は、[スライド見出しの色] 見本をクリックしてパレットから色を選択します。
  3. カバー画像設定エリアで、[画像を選択する] をクリックのうえ、次のいずれかを実施し、特集スライダーセクションのカバー画像を選択します。- 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。
  4. Burstからストック画像を選択するには、[無料の画像] タブをクリックします。ここで検索ワードを入力するか、画像カテゴリーを閲覧することができます。

  5. ローカルコンピューターから画像を選択する場合は、[ライブラリー] タブをクリックし、次に [アップロード] をクリックします。

  6. ヘッダーリストから、表紙画像に表示するテキストを入力します。

  7. 見出しの位置リストから、表紙画像の左または中央のどちらに見出しテキストを表示するか選択します。この設定はデスクトップビューにのみ適用されます。

  8. オーバーレイエリアで、[オーバーレイを表示する] にチェックを入れます。

  9. [オーバーレイの色] 見本をクリックし、画像オーバーレイの色を選択します。

  10. [テキストの配色] 見本をクリックし、テキストの色を選択します。

<aside class="note note-information">
<h4>ヒント</h4>
<p>If the background image is dark, picking a light text color makes the text easier to read.</p>
</aside>

  1. 不透過率リストから、画像オーバーレイの透明度を選択します。

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

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

無料体験を試す