Zenn
🙄

Shopifyでページごとの背景色を実装する方法を解説

2025/03/10に公開
Shopify
tech

はじめに

今回は、Shopify でページごとの背景色を自由にカスタマイズする方法について考察していきます。

具体的には、HTML・CSS・Liquid を用いたコーディングでページごとの背景色を変更する方法と、シンプルページごとの背景色｜お手軽 BgColorという Shopify アプリを用いて、ノーコードでページごとの背景色を実装する方法を解説していきます。

それでは、頑張っていきましょう。

Shopify でページごとの背景色を実装する定義

「ページごとの背景色のカスタマイズ」とは、ホームページ、コレクションページ、商品ページ、ブログ記事ページ、コンタクトページなど、各ページに対して個別の背景色を割り当てる機能を指します。デザインやブランディングに合わせてページの見た目を変更できるため、訪問者に与える印象を自在にコントロールできます。

特に、ショップやサービスの世界観を演出したい場合、ページごとの背景色を変えることは、ユーザーの記憶に残る重要な手段となります。

Shopify でページごとの背景色を実装するメリット

まずは、Shopify でページごとの背景色を実装するメリットについて解説していきます。

1. ブランドイメージの向上

各ページに適切な背景色を設定することで、ブランドイメージを視覚的に表現しやすくなります。顧客がストアを訪れた際、統一感や世界観を意識しつつページに変化を加えることで「このショップは自分の好みに合いそうだ」とポジティブに感じてもらえます。

2. ユーザーエクスペリエンス（UX）の向上

ページごとに背景色を微妙に変えることで、「いま何のページを見ているのか」が直感的にわかりやすくなります。色だけでもページの種類を視覚的に分けることができるため、ユーザビリティ向上につながります。

3. 印象操作と強調表示が簡単

セールページやキャンペーンページの背景色を変えることで、訪問者の注意を強く惹きつけることができます。季節キャンペーンや期間限定セールなど、色を変えてメリハリをつければ、顧客の興味を喚起しやすくなります。

4. 他店との差別化

他のストアとの差別化を図る上でも、ページの雰囲気づくりは重要です。デザイン性の高さや洗練された印象を与えることで、競合ショップと一線を画した魅力あるショップを演出できます。

5. ノーコード対応で作業コスト削減

後述するように、Shopify アプリを使ってノーコードでページごとの背景色を実装できれば、専門的な知識がなくても短時間で導入が可能です。これにより、外注費や開発コストを大幅に抑えられます。

Shopify でページごとの背景色を実装するデメリット

次に、Shopify でページごとの背景色を実装する際のデメリットについて考察していきましょう。

1. 過度なカラーバリエーションによる混乱

ページごとに色がバラバラすぎると、サイト全体のデザインが散らかった印象になり、かえってユーザーを混乱させる可能性があります。ブランドイメージとの整合性を保ちながら、適度な範囲内で背景色を設定することが大切です。

2. コーディングでの実装には知識が必要

HTML、CSS、Liquid など、ある程度のコーディング知識が必要です。テーマによっては、デザインの調整が複雑になる場合があり、トラブルシューティングに時間を要することもあります。

3. 動作チェックの手間

一つひとつのページに対して背景色を設定すると、変更後に表示不具合がないかどうかを確認する作業が必要になります。特に大規模なストアの場合、すべてのページをチェックする手間が増える点に注意が必要です。

4. テーマアップデートとの整合性

テーマをアップデートすると、カスタマイズ部分が上書きされる場合があります。アップデート後に再度カスタマイズが必要になるケースもあるため、カスタマイズ管理をきちんと行うことが重要です。

Shopify でページごとの背景色を実装する方法

ここからは、コーディングによる背景色の実装方法について考察していきます。

1. テンプレートごとの背景色を CSS で管理する方法

Shopify では、各ページがテンプレート（例: product、collection、page、blog など）に紐づきます。そのテンプレート名を使用して、対応するページに対してだけ背景色を適用することが可能です。

以下は、Liquid で自動的に挿入されるクラスを利用したサンプルコードです。たとえば、body タグに template-product のようなクラスが付与されるため、ページごとに異なる背景色を設定することができます。

<!-- テンプレートごとにbodyタグにクラスが付与される例 -->
<body class="template-product">

  <!-- ページの内容 -->

</body>

/* productページ専用の背景色 */
body.template-product {
  background-color: #faf0e6; /* 商品ページは薄いアイボリー */
}

/* collectionページ専用の背景色 */
body.template-collection {
  background-color: #f0ffff; /* コレクションページは薄い水色 */
}

/* blog記事ページ専用の背景色 */
body.template-article {
  background-color: #fdf5e6; /* ブログ記事はクリーム色 */
}

/* 通常の固定ページ（page テンプレート） */
body.template-page {
  background-color: #ffffff; /* 一般的な固定ページは白 */
}

上記のように、テーマファイル内の theme.scss.liquid や theme.css.liquidなどにコードを追加します。すると、該当するページだけ自動的に指定した背景色が反映されるようになります。

2. ページ単位で個別の背景色を設定する方法

特定のページだけ別の背景色を使いたい場合は、URL やハンドル（handle）を条件分岐してあげます。たとえば、ブログ記事の URL に含まれる文字列を判定して別の背景色を適用する、などの実装が可能です。

以下は Liquid のサンプルです。page.contact というテンプレート名が付いたページだけに別の背景色を付けたいときの例です。

{% if template.name == 'page' and template.suffix == 'contact' %}
  <style>
    body.template-page {
      background-color: #ffeeee; /* コンタクトページは薄いピンク */
    }
  </style>
{% endif %}

このように、Liquid のオブジェクト（template など）を活用すると、ページごとに背景色を柔軟に切り替えることができます。

3. 実装をまとめたサンプルコード

以下に、背景色をテンプレートごとに切り替える最小限のサンプルコードを示します。theme.liquid の <head> 内や、共通の CSS ファイル内で管理する方法など、好みに合わせて調整してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Shopify Sample</title>
  <style>
    /* テンプレートごとの背景色設定 */
    body.template-product {
      background-color: #faf0e6;
    }
    body.template-collection {
      background-color: #f0ffff;
    }
    body.template-article {
      background-color: #fdf5e6;
    }
    body.template-page {
      background-color: #ffffff;
    }
  </style>
</head>
<body class="template-{{ template.name }}{% if template.suffix %}-{{ template.suffix }}{% endif %}">
  <header>
    <!-- ヘッダー要素 -->
  </header>
  <main>
    <h1>Sample Page</h1>
    <p>Shopify テンプレートごとに背景色を変えてみましょう。</p>
  </main>
  <footer>
    <!-- フッター要素 -->
  </footer>
</body>
</html>
  • bodyタグのクラスに、template.name、template.suffix を動的に連結させているのがポイントです。
  • たとえば、template = 'page.contact' の場合、class="template-page-contact" のように自動付与されるので、こちらを使ってページごとの背景色を割り当てることができます。

Shopify アプリを用いてページごとの背景色を実装する方法

ここまで解説したように、コーディングでページごとの背景色を実装する場合は、HTML・CSS・Liquid に関する知識が必要となります。
一方で、「もっと簡単に、ノーコードで導入したい」「複数のページをまとめて管理したい」という場合は、Shopify アプリを活用する方法があります。

今回は、シンプルページごとの背景色｜お手軽 BgColorというアプリを紹介します。

シンプルページごとの背景色｜お手軽 BgColor の機能について

シンプルページごとの背景色｜お手軽 BgColorは、月額 $3.99 で利用できる、Shopify ストアの各ページの背景色を自由にカスタマイズできるアプリです。開発元は株式会社 UnReact で、最新テーマにも対応しています。

  • ハイライト

    • ノーコードでページごとの背景色をカスタマイズできる
    • ページの種類ごとに背景色を設定できる
    • 特定のページだけ個別に背景色を指定可能
    • 忙しいマーチャントでも簡単に操作できる管理画面
    • 最新テーマにも対応

  • 価格設定

    • Basic Plan: 月額 $3.99
    • すべての料金は USD で請求されます
    • 定期請求と使用料に基づく請求は 30 日ごとに行われます

  • 評価: 0.0 (0 レビュー)

  • デモストア: インストール前にデモストアを確認可能

  • 開発者: 株式会社UnReact

以下の公式のShopifyアプリストアからインストールできます。
https://apps.shopify.com/sa-090-ur-page-bgcolor-app?locale=ja

シンプルページごとの背景色｜お手軽 BgColor の魅力

  1. 直感的な管理画面で設定が簡単
    コード編集不要で、管理画面から色を選ぶだけ。誰でも数クリックで背景色を変えられます。

  2. 豊富なカラーパレット
    テーマやブランドカラーに合わせやすい色見本が準備されているため、デザインが苦手でも安心です。

  3. ページごとに細かい指定が可能
    「商品ページは薄いブルー」「ブログページは淡いベージュ」など、ページタイプにあわせた色分けができます。特定の固定ページやコレクションページだけ別の色にするなど、カスタマイズ自由度が高いです。

  4. 最新テーマに対応
    Shopify の最新テーマ（OS 2.0 など）にも対応しているため、テーマアップデート後のデザイン崩れが起きにくいのもメリットです。

  5. 運用コストの低減
    技術的な実装が不要なので、メンテナンスやサポートに掛かるコストを削減できます。すぐにデザイン変更が必要な場合でも、管理画面から瞬時に設定を切り替えられます。

シンプルページごとの背景色｜お手軽 BgColorの概要

それではここから、Shopifyアプリであるシンプルページごとの背景色｜お手軽 BgColorの概要について解説していきます。

こちらのアプリを利用すると、ノーコードでページごとの背景色を設定できます。

ページの種類ごとに背景色を設定できます。

特定のページに対して、個別の背景色を設定できます。

特定のページに対して、個別の背景色を設定できます。

ノーコードでページごとの背景色をカスタマイズできます。

以下の公式のShopifyアプリストアからインストールができます。
https://apps.shopify.com/sa-090-ur-page-bgcolor-app?locale=ja

1 クリックでテーマに追加できます。

最後に

今回は、Shopify でページごとの背景色を実装する方法として、

  1. コーディングによる実装方法

    • テンプレート名や suffix を活用して、HTML・CSS・Liquid を使い分ける
    • ページ単位で個別の背景色を適用可能

  2. Shopify アプリを用いたノーコード実装

    • シンプルページごとの背景色｜お手軽 BgColor を活用して、簡単に背景色を設定

の 2 つを解説しました。

ストアのデザインやブランディングを高めるうえで、ページごとの背景色変更は効果的な手段の一つです。初心者から上級者まで、それぞれのスキルや目的に応じて最適な方法を選んでみてください。お疲れさまでした。

参考記事

今回は、以下の記事を参考にしています。

Discussion