Pop

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

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

テーマエディタ

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

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

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

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

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

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

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

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

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

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

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

動的セクション

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

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

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

商品ページ

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

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

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

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

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

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

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

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

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

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

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

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

  10. [保存] をクリック

ニュースレター

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

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

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

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

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

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

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

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

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

  7. [保存] をクリック

ビデオ

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

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

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

  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. Pop を検索して、[カスタマイズ] をクリックします。

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

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

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

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

  6. 保存をクリック

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

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

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

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

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

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

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

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

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

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

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

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

  1. 保存をクリック

文字体裁

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

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

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

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

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

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

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

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

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

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

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

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

  8. 保存をクリック

ソーシャルメディア

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

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

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

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

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

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

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

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

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

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

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

  1. [保存] をクリック

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

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

ストアロゴの最適サイズ

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

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

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

モバイル端末でロゴを拡大

レイアウト上でロゴを拡大する場合は、ロゴグラフィック周りのネガティブスペースまたは透明ピクセルをすべてトリミングした後で、ファイルをShopifyにアップロードすることが重要です。

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

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

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

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

ネガティブスペースが含まれているためロゴの縮小が難しい場合、モバイルヘッダーの高さを調節することで、ロゴを拡大するためのスペースを設けることができます。これによりロゴの拡大が可能です。

テーマエディタに進み、ヘッダーとナビゲーションセクションで「サイズ変更 > モバイルメニュー高さ」の値を拡大します。

サイドバーでロゴを拡大

レイアウト上でロゴを拡大する場合は、ロゴグラフィック周りのネガティブスペースまたは透明ピクセルをすべてトリミングした後で、ファイルをShopifyにアップロードすることが重要です。

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

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

ネガティブスペースが残ったままポップテーマにアップロードされたロゴ

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

ネガティブスペースが含まれているためロゴの縮小が難しい場合、サイドバーの幅を調節することで、ロゴを拡大するためのスペースを設けることができます。これによりロゴの拡大が可能です。

テーマエディタに進み、ヘッダーとナビゲーションセクションで「サイズ変更 > デスクトップメニュー幅」の値を拡大します。

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

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

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

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

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

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

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

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

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

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

```sass {% comment %} 次に示すメディアクエリ関数が生成するのは、@media画面および (最小幅: 1025ピクセル) { ... } サイドバーは、幅が1025ピクセルを超える場合にのみ表示されます。{% 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で販売を開始する準備はできていますか?

無料体験を試す