Narrative

Narrativeはビジュアルストーリーテリングのためにデザインされたブティックテーマです。物語を語るためのイメージに焦点を当てている点が、Narrative独自のポイントです。初期設定では、ホームページには全画面スライドショー、テキスト付きの画像、ビデオがある設定になっています。このレイアウトは視覚的な影響が強く、テキストを多く使わずにブランドストーリーを伝えることができます。

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

以下の場合はNarrativeが推奨されます。

  • 画像とビデオを用いてブランドについて説明
  • ストアのビジョン、ミッション、価値など強力なメッセージを配信
  • 特定の商品または希少在庫について独自のデザインを訴求

テーマエディタ

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

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

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

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

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

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

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

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

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

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

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

動的セクション

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

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

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

ヘッダー

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

またストアのヘッダーを透明にすることで体裁を変更できます。このとき、下のセクションと同じ背景が用いられます。

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

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

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

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

- 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。 - Shopifyのバーストストック画像コレクションからストック画像を選択するには、[無料の画像] タブをクリックします。ここに検索語を入力するか、画像カテゴリーを閲覧することができます。 - ローカルコンピューターから画像を選択するには、[ライブラリー] タブをクリックし、次にプラスボタンをクリックします。

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

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

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

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

  5. サブメニューをセカンダリーナビゲーション リストから選択します。

  6. 保存をクリック

スライドショー

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

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

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

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

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

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

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

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

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

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

  4. 保存をクリック

フッター

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

メニュー、ニュースレターのサインアップ、著作権のテキスト、支払いアイコンを表示するウェブサイトのフッターセクション。

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

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

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

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

  4. [ソーシャルアイコンを表示する] にチェックを入れ、ソーシャルメディアアイコンをフッターに追加します。ソーシャルメディアのアカウントにアイコンをリンクするには、ソーシャル設定から行います。

  5. [支払いアイコンを表示する] にチェックを入れることで、フッターに支払いアイコン (マスターカードやPayPalなど) を追加します。

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

    1. [ニュースレターのサインアップを表示する] にチェックを入れます。
    2. 見出しフィールドに、ニュースレターのサインアップの見出しを入力します。デフォルトの見出しは「更新にサインアップする」です。
    3. 見出しフィールドにニュースレターのサインアップの小見出しを入力します。デフォルトのテキストは、「プロモーション、新商品、セールについて、あなたのインボックスに直接知らせる。」です。
  7. フッターにメニューを追加するには、次の手順を実行します。

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

商品ページ

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

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

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

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

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

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

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

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

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

  7. バリエーション画像がページ下部のギャラリーに表示されないようにするには、[ギャラリーのバリエーション画像を非表示にする] にチェックを入れます。これを行うと、バリエーションに添付されていない画像のみが表示されるようになります。

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

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

  10. 保存をクリック

商品の推奨を追加または削除する

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

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

  2. [商品の推奨] をクリックします。

  3. 商品ページで商品のおすすめを表示または非表示にするには、[動的推奨を表示する] チェックボックスを使用します。

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

  5. オプション: チェックボックスを使用して、商品の推奨の表示方法を選択します。

- 画像の間隔を有効にする - 商品の販売元を表示する

  1. 保存をクリック

コレクションページ

顧客がコレクション内の商品の絞り込みや並べ替えを行えるよう、コレクションページを設定することができます。また表示する商品数を選択することも可能です。

コレクションページのレイアウトを設定するには

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

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

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

  4. 行ごとの商品数およびページごとの行数をリストから選択します。

  5. 異なるブランドまたはベンダーの商品を販売する場合は、[商品の販売元を表示する] にチェックを入れ、商品画像の下に販売元の名前を表示します。

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

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

  8. 並べ替えメニューを表示するには、 [コレクションの並べ替えを有効にする] にチェックを入れます。

  9. 保存をクリック

カートページ

注文にメモを追加できるようにすることができます。顧客はカートのメモを使用して、注文の準備や配送方法に関する特別な指示を行うことができます。

カートページに表示される「セラーへの特別な指示」とラベル付けされたテキストフィールド。フィールドは、注文の小計とチェックアウトボタンの横に表示されます。

顧客がメモを書き込むと、そのメモは管理画面の注文のメモ領域に表示されます。

カートページにメモフィールドを追加するには、次のとおりにします。

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

  2. トップバーのドロップダウンメニューから [カート] を選択します。

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

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

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

  6. 保存をクリック

特集コレクション

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

特集コレクションを追加するには

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

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

  3. コレクションリストから、表示するコレクションを選択します。

  4. [画像の間隔を有効にする] にチェックを入れ、画像の間隔を広げます。

  5. セクション上部に表示するテキストを見出しフィールドに入力します。デフォルトのテキストは「特集コレクション」です。

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

  7. 顧客がコレクションの全商品を参照できるよう設定する場合は、「すべて表示」ボタンの表示にチェックを入れます。顧客がこのボタンをクリックすると、コレクションページが開きすべての商品が表示されます。

  8. すべて表示をソリッドアウトラインの透明ボタンで表示する場合は、[サブボタンのスタイルを使用する] にチェックを入れます。

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

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

  11. 保存をクリック

ギャラリー

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

猫の写真3点が横並びで表示されているギャラリーセクション

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

  2. [ギャラリー] をクリックします。

  3. コンテンツエリアで [画像] をクリックします。

  4. 画像を追加するには、画像エリアで [画像を選択する] をクリックのうえ次のいずれかの操作を行います。

- 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。 - Shopifyのバーストストック画像コレクションからストック画像を選択するには、[無料の画像] タブをクリックします。ここに検索語を入力するか、画像カテゴリーを閲覧することができます。 - ローカルコンピューターから画像を選択するには、[ライブラリー] タブをクリックし、次にプラスボタンをクリックします。

  1. 画像のアラインメントリストから、画像のアラインメントを選択します。たとえば「左上」を選択すると、セクションエリアの左上に画像が配置されます。

  2. アイコンリストから、画像上に表示するアイコンを選択します。

  3. キャプションフィールドの各画像に表示するテキストを、テキストエリアに入力します。

  4. キャプションテキストをページにリンクさせるには、次のいずれかの操作を行います。

    1. テキストをストア内のページにリンクさせる場合は、リンクフィールドをクリックし、ストア内のページを選択します。
    2. テキストをウェブサイトにリンクさせる場合は、リンクフィールドにサイトのURLを入力します。
  5. 保存をクリック

テキスト付き画像

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

画像を円形にトリミングすることができます。

また正方形にトリミングすることも可能です。

画像をトリミングしないようにすることもできます。代わりに、モバイルデバイスで閲覧した際に画像の大切な部分がトリミングされていないことを確認するため、画像アラインメントを選択できます。たとえば、販売商品を表示する画像の下部が切り取られないようにしたい場合は、Bottom centerアラインメントを選びます。

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

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

  3. セクション間隔リストで、特大の中からセクションのサイズを選択します。

  4. 背景色を追加する場合は、[背景の色] 見本をクリックしパレットから色を選択します。

  5. 画像を追加するには、画像エリアで [画像を選択する] をクリックのうえ次のいずれかの操作を行います。

- 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。 - Shopifyのバーストストック画像コレクションからストック画像を選択するには、[無料の画像] タブをクリックします。ここに検索語を入力するか、画像カテゴリーを閲覧することができます。 - ローカルコンピューターから画像を選択するには、[ライブラリー] タブをクリックし、次にプラスボタンをクリックします。

  1. 画像をトリミングする場合は、画像のトリミングリストから円形または正方形のいずれかを選択します。

  2. 画像のトリミングを行わない場合は、次のいずれかの操作を行います。

    1. 画像のトリミングリストから [なし] を選択します。
    2. 画像のアラインメントリストから、画像のアラインメントを選択します。たとえば「左上」を選択すると、セクションエリアの左上に画像が配置されます。
  3. テキストを追加する場合は、次の操作を行います。

    1. 見出しフィールドに、表示する見出しのテキストを入力します。
    2. テキストフィールドに、見出しの下に表示するテキストを入力します。
    3. ソリッドアウトラインの透明ボタンを表示する場合は、[サブボタンのスタイルを使用する] にチェックを入れます。
    4. ボタンラベルフィールドに、ボタンに表示するテキストを入力します。
    5. ボタンリンクフィールドにURLへのリンクを貼り付けるか、またはフィールドをクリックしストアからページを選択します。

レイアウトをカスタマイズするには

  1. レイアウトエリアのデスクトップレイアウトリストから、デスクトップ上でテキストの左または右のどちらに画像を表示するか選択します。

  2. モバイルレイアウトリストから、モバイルデバイス上でテキストの上または下のどちらに画像を表示するか選択します。

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

顧客に対するカスタムメッセージをホームページ上に表示することができます。メッセージは商品紹介、お知らせの共有、ストアへのウェルカムメッセージとして使用できます。

テキストオーバーレイ付き画像セクションをカスタマイズするには

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

  2. [テキストオーバーレイ付き画像] をクリックします。

  3. セクション間隔リストで、特大の中からセクションのサイズを選択します。

背景画像を追加するには

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

- 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。 - Shopifyのバーストストック画像コレクションからストック画像を選択するには、[無料の画像] タブをクリックします。ここに検索語を入力するか、画像カテゴリーを閲覧することができます。 - ローカルコンピューターから画像を選択するには、[ライブラリー] タブをクリックし、次にプラスボタンをクリックします。

  1. 画像のアラインメントリストから、画像のアラインメントを選択します。たとえば「左上」を選択すると、セクションエリアの左上に画像が配置されます。

テキストを追加するには

  1. テキストエリアに、見出しフィールドのセクションタイトルを入力します。

  2. このセクションで表示するテキストを、テキストフィールドに入力します。

  3. テキストサイズリストのまたはから、テキストのサイズを選択します。

ボタンを追加するには

  1. ソリッドアウトラインの透明ボタンを表示する場合は、[サブボタンのスタイルを使用する] にチェックを入れます。

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

  3. ボタンリンクフィールドにURLへのリンクを貼り付けるか、またはフィールドをクリックしストアからページを選択します。

オーバーレイを適用するには

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

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

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

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

ニュースレター

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

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

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

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

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

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

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

  5. 見出しフィールドにニュースレターのサインアップの小見出しを入力します。デフォルトのテキストは、「プロモーション、新商品、セールについて、あなたのインボックスに直接知らせる。」です。

  6. 成功のメッセージフィールドに成功のメッセージを入力します。お客様がメールアドレスを送信した後に成功のメッセージが表示されます。デフォルトの成功のメッセージは「ご登録ありがとうございます」です。

  7. ニュースレターのサインアップフィールドの文字の色を設定するには、[文字の色] 見本をクリックして色を選択します。

  8. ニュースレターのサインアップセクションの背景色を設定するには、背景の色見本をクリックして色を選択します。

  9. 保存をクリック

マップ

ホームページにマップを掲載することができます。マップはストアの所在地や営業時間の周知に役立ちます。

マップを追加するには

  1. セクションタブをクリックし、[セクションの追加] を選択します。

  2. [マップ] をクリックします。

  3. セクション上部に表示するテキストをオーバーレイ見出しフィールドに入力します。

  4. テキストの住所および時間フィールドに、企業情報を入力します。

  5. マップの住所フィールドに、会社住所を入力します。

  6. Google Maps API Keyフィールドに、有効なAPIキーを入力します。

  7. 画像フィールドで、地図セクションの読み込みに問題がある場合に表示される画像をアップロードまたは選択します。

ビデオ

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

ホームページにビデオを追加するには、次のとおりにします。

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

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

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

  4. 見出しフィールドに、ビデオの見出しを入力します。再生ボタンがクリックされるまで、見出しのテキストがビデオに表示されます。

  5. ビデオリンクフィールドに、ビデオの共有リンクを入力します。

    YouTubeの共有リンクは次のようになります。https://youtu.be/OTJXAUZY9t0このYouTubeヘルプの記事では、YouTubeビデオの共有リンクをコピーする方法を学ぶことができます。

    Vimeoの共有リンクは次のようになります。https://vimeo.com/281332510このVimeoヘルプセンターの記事では、Vimeoビデオの共有リンクをコピーする方法を学ぶことができます。

  6. オプション: ビデオに表紙画像を追加するには、次のとおりにします。

    1. [画像を選択する] をクリックします。コンピューターから画像をアップロードするには、[アップロード] をクリックします。Burstから無料のストック画像を使用するには、[無料の画像] をクリックします。
    2. [画像の位置] ドロップダウンメニューから位置を選択し、表し画像のアラインメントを選択します。画像の位置を使用して、トリミングが発生したときに画像のどの部分を表示するかを選択することができます。
  7. オプション: ビデオと見出しテキストの間の色のレイヤーであるオーバーレイをビデオに追加します。

    1. [オーバーレイを表示する] をクリックします。
    2. オーバーレイの色を設定するには、オーバーレイ見本をクリックして色を選択します。
    3. テキストの色を設定するには、テキスト見本をクリックして色を選択します。
    4. 不透過率スライダーから割合を選択して、オーバーレイの不透過率を設定します。
  8. 保存をクリック

特集スライダー

特集スライダーを使用すると、多くの商品情報を表示できるため、お客様がホームページから離れる必要がありません。

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

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

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

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

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

  2. [特集スライダー] をクリックします。

画像スライドを追加するには

  1. コンテンツエリアで [スライド] をクリックします。

  2. [背景色] 見本をクリックし、パレットから背景色を選択します。

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

- 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。 - Shopifyのバーストストック画像コレクションからストック画像を選択するには、[無料の画像] タブをクリックします。ここに検索語を入力するか、画像カテゴリーを閲覧することができます。 - ローカルコンピューターから画像を選択するには、[ライブラリー] タブをクリックし、次にプラスボタンをクリックします。

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

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

  3. ボタンリンクフィールドにURLへのリンクを貼り付けるか、またはフィールドをクリックしストアからページを選択します。

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

  1. ソリッドアウトラインの透明ボタンとしてスライドボタンを表示する場合は、[サブボタンのスタイルを使用する] にチェックを入れます。

  2. テキストの色を変更する場合は、[スライド見出しの色] 見本をクリックしてパレットから色を選択します。

  3. 表紙設定エリアで [画像を選択する] をクリックのうえ次のいずれかの操作を行い、特集スライダーセクションの表紙画像を選択します。

- 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。 - Shopifyのバーストストック画像コレクションからストック画像を選択するには、[無料の画像] タブをクリックします。ここに検索語を入力するか、画像カテゴリーを閲覧することができます。 - ローカルコンピューターから画像を選択するには、[ライブラリー] タブをクリックし、次にプラスボタンをクリックします。

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

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

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

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

  5. [文字の色] の見本をクリックして、テキストの色を選択します。

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

  7. 保存をクリック

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

Narrativeには次のテーマ設定が含まれています。

  • 文字体裁
  • カートドロワー
  • ソーシャル
  • ファビコン
  • チェックアウト

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

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

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

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

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

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

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

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

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

  1. 保存をクリック

文字体裁

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

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

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

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

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

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

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

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

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

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

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

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

  8. 保存をクリック

カートドロワー

オンラインストアのカートドロワー設定は、次のようにカスタマイズできます。

  • カートをドロワースタイルに設定します。ページの右側にカートドロワーがスライドして表示されるので、顧客は商品ページを離れることなくカートに商品を追加できます。
  • 注文にメモを追加できるようにします。顧客はカートのメモを使用して、注文の準備や配送方法に関する特別な指示を行うことができます。

カートドロワーに表示される「セラーへの特別な指示」とラベル付けされたテキストフィールド。フィールドは、注文の小計とチェックアウトボタンの横に表示されます。

カートドロワー設定をカスタマイズするには、次のとおりにします。

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

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

  3. [カートドロワー] をクリックします。

  4. [カートドロワーを表示する] にチェックを入れて、カートをドロワースタイルに設定します。このチェックボックスをオフのままにすると、フルページのカートが使用されます。

  5. [カートメモを表示する] にチェックを入れ、カートドロワーにメモフィールドを追加します。

  6. 保存をクリック

ソーシャル

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

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

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

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

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

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

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

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

- Facebookでシェアする - Twitterに投稿する - Pinterestでピンする (ブログ記事共有には使用できません)

  1. ソーシャルメディアアカウントへのリンクを追加するには、アカウントエリアで、所定フィールドにアカウントへのリンクを入力します。https://instagram.com/shopifyhttps://twitter.com/shopify 等の完全なリンクを入力してください。

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

  2. 保存をクリック

ファビコン

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

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

ファビコン推奨の画像のサイズは32 x 32ピクセルです。

ファビコンをアップロードするには

  1. [カスタマイズ] をクリックします。

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

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

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

- 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。 - ローカルコンピューターから画像を選択するには、[ライブラリー] タブをクリックし、次にプラスボタンをクリックします。

  1. 保存をクリック

チェックアウト

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

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

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

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

  1. [カスタマイズ] をクリックします。

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

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

バナー画像を追加するには

  • バナーエリアで [画像を選択する] をクリックのうえ、次のいずれかの操作を行います。 - 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。
    • Shopifyのバーストストック画像コレクションからストック画像を選択するには、[無料の画像] タブをクリックします。ここに検索語を入力するか、画像カテゴリーを閲覧することができます。
    • ローカルコンピューターから画像を選択するには、[ライブラリー] タブをクリックし、次にプラスボタンをクリックします。

ロゴを追加するには

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

- 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。 - ローカルコンピューターから画像を選択するには、[ライブラリー] タブをクリックし、次にプラスボタンをクリックします。

  1. ポジションリストで、右、左、中央の中から画像の表示位置を選択します。

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

チェックアウトページの背景を変更するには

チェックアウトページに背景画像を表示、または背景色を選択することができます。背景画像の場合はグリッドパターンで表示されます。

  1. メインコンテンツエリアで [画像を選択する] をクリックのうえ、次のいずれかの操作を行います。

- 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。 - Shopifyのバーストストック画像コレクションからストック画像を選択するには、[無料の画像] タブをクリックします。ここに検索語を入力するか、画像カテゴリーを閲覧することができます。 - ローカルコンピューターから画像を選択するには、[ライブラリー] タブをクリックし、次にプラスボタンをクリックします。 - [背景色] 見本をクリックし、パレットから新しい色を選択します。

  1. フォームフィールドリストから、白または透明のどちらでフィールドを表示するか選択します。

注文サマリーページの背景を変更するには

  1. 注文サマリーエリアで [画像を選択する] をクリックのうえ、次のいずれかの操作を行います。 - 管理画面にアップロード済みの画像を選択するには、[ライブラリー] タブをクリックします。
    • Shopifyのバーストストック画像コレクションからストック画像を選択するには、[無料の画像] タブをクリックします。ここに検索語を入力するか、画像カテゴリーを閲覧することができます。
    • ローカルコンピューターから画像を選択するには、[ライブラリー] タブをクリックし、次にプラスボタンをクリックします。
    • [背景色] 見本をクリックし、パレットから新しい色を選択します。

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

  • タイポグラフィーエリアのリストから、見出しおよび本文に使用するフォントを選択します。

カラーオプションを設定するには

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

テーマのスタイルを変更

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

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

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

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

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

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

無料体験を試す