Simple

Simpleはクリーンかつミニマルなテーマで、商品を紹介するのに最適です。モバイルファーストのレスポンシブなデザイン、サイドバーナビゲーション、画像アニメーション、商品画像のズームなどの機能があります。

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

以下の場合はSimpleを用いるのが最適です。

  • サイドバーナビゲーション
  • 大型メニュー
  • 5点以上の商品

テーマエディタ

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

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

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

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

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

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

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

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

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

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

  • ヘッダー
  • Sidebar menu
  • フッター
  • 商品ページ
  • コレクションページ
  • コレクションリストのページ
  • 記事ページ

動的セクション

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

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

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

ヘッダー

あなたの会社のロゴをストアの見出し部分に追加できます。Simpleのカスタムロゴ画像を使用できます。最適なフォーマットは背景を透明にした.pngファイルです。ロゴ画像のサイズは450 x 200ピクセルに指定してください。幅を縮小することで、ロゴ画像のサイズを変更できます。

カスタムロゴをアップロードするには

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

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

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

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

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

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

  2. タグラインエリアで、ヘッダー右上に表示するテキストを追加します。

  3. 保存をクリック

Simpleにはナビゲーションメニューに含まれるサイドバー機能が備えられています。

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

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

  3. [サイドバー] をクリックします。

  4. メニューリストからサイドバーメニューのメニューを選択します。

  5. 保存をクリック

フッター

Simpleにはナビゲーションメニュー、テキストエリア、メールマガジン登録の表示に用いるフッター機能が備えられています。デフォルトではSimpleに含まれるホームページセクションは1つです。

  • リンクには、ナビゲーションメニューからのリンク機能が備えられています。

リンク

Simpleではホームページのフッターにリンクを表示できます。

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

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

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

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

  5. フッターリンク上部に表示するテキストを見出しフィールドに入力します。

  6. メニューリストからフッターリンクのメニューを選択します。

  7. 保存をクリック

ニュースレター

Simpleでは、ホームページにメールマガジンのサインアップフォームを表示できます。このセクションタイプにはオプションはありません。ニュースレターフォームを表示する場合は、セクションをそのままの状態にします。ニュースレターフォームを非表示にする場合は、ホームページからセクションを削除することができます。

ニュースレターのサインアップを行った顧客はストアに追加されます。メールマガジンセクションには、管理画面の顧客ページへのリンクが含まれます。このリンクをクリックすると、最新の顧客リストが参照できます。

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

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

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

  4. [コンテンツを追加する] をクリックし、次に [ニュースレターのサインアップ] をクリックします。

  5. 保存をクリック

テキスト

テキストセクションを使用して、フッターに表示したい文字コンテンツを用意するか、管理画面で作成したページを埋め込むことができます。たとえばブログページを埋め込んで開催予定のイベントを特集したり、次のいずれかのページを表示したりできます。

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

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

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

  4. [コンテンツを追加する] をクリックし、次に [テキスト] をクリックします。

  5. リッチテキスト上部に表示するテキストを見出しフィールドに入力します。

  6. テキストを追加する場合は、テキストフィールドに入力します。選択されたテキストの書式を設定するには、太字またはイタリックのアイコンをクリックします。

  7. 保存をクリック

商品ページ

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

  • 数量セレクター
  • 商品のブランド名または販売元
  • 各種ソーシャル共有アイコン
  • 商品説明内のタブ
  • 画像ズーム
  • 動的チェックアウトボタン
  • 商品の推奨

さらに商品説明の位置を設定することもできます。

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

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

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

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

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

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

  6. 各種ソーシャル共有アイコンを表示するには、[商品の共有を有効にする] にチェックを入れます。

  7. 商品説明の位置を設定するには、位置ドロップダウンメニューから [画像の右] または [画像の下] を選択します。

  8. 商品説明でタブを使用するには、以下の手順を実行します。

    1. [商品説明の横にタブを表示する] にチェックを入れます。これで商品説明が1つのタブに表示され、サイズ表、返品ポリシーなどのその他のコンテンツが2つ目のタブに表示されるようになります。
    2. タブのコンテンツエリアで、[ページを選択] をクリックし、2つ目のタブに表示するコンテンツの入ったページを選択します。
  9. 記事のサムネイル画像のズームタイプを選択するには、ズームタイプドロップダウンメニューから [Lightbox][ズームイン]、または [ズームなし] を選択します。

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

  11. 保存をクリック

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

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

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

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

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

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

  5. オプション: 商品の推奨で商品の販売元を表示するには、[商品の販売元を表示する] を選択します。

  6. 保存をクリック

コレクションページ

顧客がコレクション内の商品を絞り込んだり並べ替えたりできるように、コレクションページを設定できます。

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

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

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

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

  4. [商品の販売元を表示する] にチェックを入れ、商品販売元を表示します。

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

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

  7. 保存をクリック

特集コレクション

Simpleではコレクションの商品のうちいずれかを、ホームページで特集することができます。ホームページの特集コレクションの見出しおよび行数の選択が可能です。

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

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

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

  4. コレクションリストからコレクションを選択します。最大で50個の商品をコレクションから選択して表示できます。

  5. 行数リストから表示する行数を選択します。

  6. 保存をクリック

特集バナー

Simpleでは特集バナー画像をホームページに追加することができます。また見出しや画像リンクの追加も可能です。

ホームページに特集バナーセクションを追加するには

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

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

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

  4. [特集バナー] をクリックし、次に [追加] をクリックします。

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

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

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

  1. 画像リンクフィールドで、画像をリンクさせるストアページを選択します。

  2. 保存をクリック

テキスト付き画像

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

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

テキスト付き画像セクションをホームページに追加するには

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

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

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

  4. [テキスト付き画像] をクリックし、次に [追加] をクリックします。

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

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

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

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

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

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

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

  6. 保存をクリック

スライドショー

最大6枚の画像を切り替えられるホームページスライドショーを作成できます。

Simpleテーマのスライドショーセクション

スライドショー画像の推奨サイズは1280 x 460ピクセルです。

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

  • スライドの高さ - スライドショーの高さを設定します。最初の画像のスライドの高さに適応するを選択して、スライドショーの高さを最初の画像の高さに合わせることができます。
  • スライドの自動切り替え - 自動的に再生するようにスライドショーを設定します。
  • スライドを変更する間隔 - スライドを変更する頻度を選択します。
  • トランジション効果 - 画像をスライドするかフェードするかを選択します。
  • テキストサイズ - スライドショーのテキストサイズを設定します。
  • 画像 - 画像スライドをスライドショーに追加します。
  • 画像位置 - スライドショーで最優先してフォーカスする画像の領域を選択します。
  • オーバーレイ不透過率 - 画像のオーバーレイの濃淡を設定します。オーバーレイで画像のアピアランスを暗くすると、スライドショーのテキストを読みやすくすることが可能です。
  • テキストの色 - スライドショーのテキストの色を設定します。
  • テキストアラインメント- スライドに合わせてテキストを配置します。
  • 見出し - 見出しをスライドに追加します。
  • ボタンラベル - スライドにテキストラベル付きのボタンを追加します。
  • ボタンリンク - ボタンをオンラインストアの別の部分にリンクさせます。

ホームページにスライドショーを追加するには、以下の手順を実行します。

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

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

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

  4. 保存をクリック

ニュースレター

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

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

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

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

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

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

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

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

  6. 保存をクリック

リッチテキスト

リッチテキストセクションを使用すると、ホームページの文字コンテンツの表示や、管理画面で作成したページの埋め込みができます。たとえばブログページを埋め込んで開催予定のイベントを特集したり、次のいずれかのページを表示したりできます。

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

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

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

  4. [リッチテキスト] をクリックし、次に [追加] をクリックします。

  5. テキストを追加するには、[リッチテキスト] をクリックして、テキストフィールドにテキストを入力します。選択されたテキストの書式を設定するには、太字または斜体のアイコンをクリックします。

  6. ストアのページを特集する場合は、[コンテンツを追加する] をクリックし、次に [ページ] をクリックします。ホームページ上で特集するページをドロップダウンメニューから選択します。

  7. リッチテキスト上部に表示するテキストを見出しフィールドに入力します。

  8. 保存をクリック

ビデオ

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

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

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

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

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

  4. 見出しフィールドに、ビデオの見出しを入力します。

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

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

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

  6. 保存をクリック

HTMLをカスタムする

カスタムHTMLセクションでは、HTMLコードを使用してホームページのカスタムコンテンツを作成できます。たとえば、HTMLを使用してテキストブロックの書式を設定し、表を作成し、外部のウェブサイトからコンテンツを埋め込んだりすることができます。

カスタムHTMLをホームページに追加するには

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

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

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

  4. 高度なレイアウトエリアで、[カスタムHTML] > [追加] をクリックします。

  5. [カスタムHTML] をクリックし、ホームページに追加するHTMLコードを入力します。

  6. 保存をクリック

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

Simpleには、以下のテーマ設定が含まれます。

  • 文字体裁
  • カート
  • ナビゲーション
  • ソーシャルメディア
  • ファビコン
  • チェックアウト

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

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

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

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

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

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

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

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

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

  1. 保存をクリック

文字体裁

Simpleではストア内のテキストのフォントおよびフォントサイズを変更できます。

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

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

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

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

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

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

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

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

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

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

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

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

  8. 保存をクリック

ソーシャルメディア

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

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

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

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

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

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

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

  6. ブログのリッチサイトサマリーまたはRSSを追加するには、ソーシャルアカウントエリアで [ブログを選択する] をクリックします。

    ソーシャルメディアアカウントとブログRSSへのリンクは、オンラインストアのサイドバーに表示されます。

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

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

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

  1. 保存をクリック

シェアのオプション

顧客がオンラインストアのコンテンツをソーシャルメディアアカウントで共有することを許可することもできます。シェアのオプションセクションで、共有を許可するソーシャルメディアのチェックボックスを選択します。

  • [Facebookでシェアする] にチェックを入れ、商品またはブログ記事のFacebook共有を有効にします。

  • [Twitterに投稿する] にチェックを入れ、商品またはブログ記事のTwitter共有を有効化します。

  • [Pinterestでピンする] にチェックを入れ、商品またはブログ記事のPinterest共有を有効にします。

Pinterestの [

ファビコン

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

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

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

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

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

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

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

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

  1. 保存をクリック

ナビゲーションのヒント

ドロップダウンメニューの追加

メインメニューにドロップダウンメニューを追加するには、ナビゲーションページにメニューを作成する必要があります。この記事で方法を確認してください。

画像のヒント

最適なSimpleの商品画像

洗練されたプロフェッショナルな印象を与えるために、Simpleテーマでは解像度の高い写真を用いることが必要です。このため1024 x 1024ピクセル以上の画像を使用することをおすすめします。画像は2048 x 2048ピクセルでも結構です。画像サイズは必要に応じて自動的に縮小されることがありますので、なるべく高画質のものを使用してください。

商品写真に最適な縦横比は正方形です。

縁に沿って単一色の背景がある写真が理想的です。単一色とは、陰影やハイライトのないソリッドカラーを指します。すべての写真に同じ単一色の縁取りを施してください。

ブログ記事の画像を設定

ブログ記事の最初の画像は、ブログのランディングページに用いられるアイキャッチ画像として選択されます。ブログ記事に画像を追加する場合の詳細は、こちらをクリックしてください。

ページ下部のクレジットカードアイコンを変更

この記事では、クレジットカードの追加または削除についてご説明します。

ブログ記事のビデオサムネイルを表示

ブログ記事にビデオが掲載されている場合、記事の抜粋にサムネイルを追加するとブログのランディングページにこれが表示されます。

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

無料体験を試す