Pop

このページはMay 17, 2022に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/online-store/themes/themes-by-shopify/vintage-themes/popをご覧ください。

常にコンテンツにアクセスしやすいようにデザインされたミニマリストテーマです。Popは小規模から中規模の在庫があるストアに最適です。Popは、常に簡単にコンテンツにアクセスできる大きなサイドバーメニューを中心にデザインされています。

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

Shopify テーマストアからPopを取得する

テーマエディタ

テーマエディタを使用して、テーマをカスタマイズします。テーマエディタを使用して、テーマセクションを追加して編集することで、ストアに表示されるコンテンツを編集することができます。テーマ設定を使用して、ストアの見た目と雰囲気、および機能を変更することもできます。

セクション テーマ設定 ヒント

テーマコンテンツはセクションを使用して作成されます。セクションは、オンラインストアのさまざまなページのレイアウトと見た目を左右するカスタマイズ可能なコンテンツブロックです。アップデートされたテーマエディタを使用して、セクションを追加、削除、編集、カスタマイズできます。

Shopifyのテーマには、以下のようなセクションがあります。

  • 静的セクションは、オンラインストアの所定の位置に表示されるセクションです。これらのセクションを削除または再配置することはできません。静的セクションには、商品ページやコレクションページなどのページ上に配置されているヘッダー、フッター、メニューセクション、またはコンテンツセクションなどがあり、[商品] セクションはその一例です。[商品] セクションの内容は、オンラインストアの各商品ページの見た目を左右します。
  • 動的セクションは任意のセクションで、ホームページのレイアウトをカスタマイズするために使用できます。ストアのホームページで、動的セクションを追加、再配置、削除して、ページレイアウトを作成することができます。ホームページに最多25個の動的セクションを追加できます。

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

ヒント: Shopifyの無料テーマを使用している場合は、Shopifyの無料のテーマをチェックして、使用中のテーマ名をクリックすることで、セクションと設定の詳細を確認できます。

有料テーマのセクションと設定の詳細については、テーマのドキュメントを参照してください。

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

  • ロゴとメニュー
  • 告知バー
  • フッター
  • 商品ページ
  • コレクションページ
  • コレクションリストのページ
  • 記事

動的セクション

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

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

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

商品ページ

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

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

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

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

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

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

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

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

  6. ページの下部に関連商品を表示するには、[関連商品を表示する] を選択します。商品が属するコレクションによって表示される関連商品が決まります。関連商品を表示するには、商品のコレクションを作成するか、既存のコレクションに追加する必要があります。商品がコレクションの一部でない場合、関連商品は表示されません。

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

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

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

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

ニュースレター

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

ホームページにニュースレターの登録を追加するには、次のとおりにします。

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

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

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

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

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

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

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

ビデオ

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

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

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

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

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

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

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

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

HTMLをカスタムする

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

ホームページにカスタムHTMLセクションを追加する

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

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

  2. [カスタムHTML] をクリックし、[選択] をクリックします。

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

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

テーマ設定を使用して、オンラインストアの色とタイポグラフィーをカスタマイズすることができます。SNSアカウントへのリンクを設定したり、カートの設定を編集したり、ファビコンを追加したりすることもできます。

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

  • 色

  • タイポグラフィー

  • ファビコン

  • カートページ

  • SNS

  • チェックアウト

色

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

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

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

  3. カラーピッカーを開くには、変更するコンテンツタイプカラーのカラー見本をクリックします。[直近の選択] エリアには、あなたが最近テーマで選択したカラーが表示されます。[現在使用中] エリアには、あなたがテーマの別の部分で現在使用しているカラーが表示されます。

    特定の16進カラーコードを設定するには、テキストフィールドをクリックして色を入力します。

    色を透明に設定するには、テキストフィールドから16進コード値を削除します。

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

タイポグラフィー

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

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

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

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

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

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

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

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

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

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

  6. フォントを別のスタイルに変更するには、現在のフォントスタイルの名前をクリックし、ドロップダウンメニューから新しいフォントスタイルを選択します。

  7. [選択する] をクリックします。

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

SNS

商品やブログ記事用のSNSでの共有ボタン、SNSアカウントへのリンクを追加することができます。

SNSの設定をカスタマイズするには

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

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

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

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

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

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

- **Share on Facebook**
- **Tweet on Twitter**
- **Pin on Pinterest** (not available for blog post sharing)
  1. [保存] をクリックします。

サイドバーにサブメニューを追加

メインメニューにプルダウンメニューを追加するには、ナビゲーションページにメニューを作成する必要があります。この記事では、この処理について順を追って説明します。

ストアロゴの最適サイズ

ロゴはサイドバーに表示されるため、ポップテーマでは均一に圧縮されたロゴを使用するのが最適です。横幅の広いバナータイプのロゴは、このテーマでは正しく表示されません。

ロゴの最大幅と高さはそれぞれ450ピクセルと200ピクセルです。アップロードされたロゴファイルは、所定の制約内に収まるようサイズ変更が加えられます。

推奨フォーマットはPNGです。

サイドバーロゴ周りの余白を削除

ポップテーマで追加されたロゴ上下のパディングを削除する前に、画像自体のパディングをトリミングすることが重要です。またファイルをShopifyにアップロードする前に、ロゴグラフィック周りのネガティブスペースまたは透明ピクセルをトリミングする必要があります。

ネガティブスペースが残っているロゴ

ネガティブスペースが取り除かれたロゴ

トリミングせずにポップテーマで使用した場合のロゴ

トリミングのうえポップテーマで使用した場合のロゴ

トリミング済みのロゴをテーマアセットにアップロードした後は、テーマエディタに進みサイドバーの幅を調整することができます。ヘッダーとナビゲーションセクションで、「サイズ変更 > デスクトップメニュー幅」の値を必要に応じて変更します。

ロゴ上下のパディングを削減する場合は、次の手順に従ってください。

  1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。

  2. 編集するテーマを見つけて、アクション>コードを編集するをクリックします。

  1. Shopifyアプリから [Store] をタップします。

  2. [販売チャネル] セクションで、[オンラインストア] をタップします。

  3. [テーマを管理する] をタップします。

  4. 編集するテーマを見つけて、アクション>コードを編集するをクリックします。

  1. Shopifyアプリから [Store] をタップします。

  2. [販売チャネル] セクションで、[オンラインストア] をタップします。

  3. [テーマを管理する] をタップします。

  4. 編集するテーマを見つけて、アクション>コードを編集するをクリックします。

  1. アセットの下でtimber.scss.liquidをクリックし、オンラインコードエディタでテーマのスタイルシートを開くか、またはこのURLに進みます。

  2. ファイルの下部に以下を追加します。

{% comment %}
  The following media query function produces this:
  @media screen and (min-width: 1025px) { ... }
  Sidebar is only shown when width > 1025 pixels.
{% endcomment %}

@include at-query ($min, $large) {
  .header-logo {
    margin-bottom: 30px /* original is 60px */;
  }

  .site-header {
    padding-top: 30px /* original is 90px */;

    .hr--small {
      margin: 0 auto 10px /* original is 15px auto 30px */;
    }
  }
}
  1. ファイルを保存します。

商品ページの設定を編集

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

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

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

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

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

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

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

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

  6. ページの下部に関連商品を表示するには、[関連商品を表示する] を選択します。商品が属するコレクションによって、表示される関連商品が決まります。関連商品を表示するには、商品のコレクションを作成するか既存のコレクションに追加する必要があります。商品がコレクションの一部でない場合、関連商品は表示されません。

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

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

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

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

最適なポップの商品画像

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

商品ページセクションのテーマエディタで有効にできる、画像ズーム機能を使用する場合は、高解像度の写真を使用することが特に重要です。

コレクションページの商品の記事のサムネイルは、同じ縦横比に統一すると見た目も効果的です。

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

無料体験を試す