Shopify でテキスト付き画像（バナー）を設置する方法を徹底解説！ノーコードでおしゃれな画像セクションを実現

はじめに
記事の構成
Shopify でテキスト付き画像を表示できる？
テキスト付き画像（バナー）を表示するメリット・デメリット
- メリット
- デメリット
テーマのコード編集とアプリ導入の比較
おすすめ Shopify アプリ「シンプルテキスト付き画像｜Image with Text」紹介
- アプリの基本情報
- できること
アプリのインストール手順
アプリをテーマに追加（有効化）
- 自動でテーマに追加（1 クリック追加）
- 手動でテーマに追加（任意ページに設置したい場合）
アプリの設定項目を理解する
デザインスタイル別の使い方ガイド
すぐ使えるおすすめ設定例
関連施策との組み合わせ
テーマのコード編集で実装する場合のサンプルコード
運用のコツ
よくある質問
まとめ
参考記事

はじめに

Shopify でストアを運営していると、「もっとブランドの世界観を伝えるバナーを設置したい」「商品ページに画像とテキストを組み合わせたおしゃれなセクションを置きたい」と感じる場面が必ず出てきます。テキスト付き画像（バナー）は、ストアの第一印象を決める重要な UI 要素であり、訴求力やコンバージョンに直結する部分です。

しかし、Shopify の標準テーマに用意されている「画像とテキスト」セクションは、デザインのバリエーションが少なく、画像の装飾や細かなカスタマイズには対応していません。コーディングで自作することもできますが、運用の柔軟性や保守コストを考えると、専用のアプリを活用するのが現実的です。

この記事では、Shopify でテキスト付き画像（バナー）を設置する方法を、メリット・デメリットからおすすめアプリの使い方、コーディングのサンプルまでまるごと解説します。特に「シンプルテキスト付き画像｜Image with Text」については、10 種類のデザインスタイル別の解説や、インストールから設定までの手順まで詳しく取り上げます。

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

記事の構成

この記事は以下の流れで解説します。

Shopify でテキスト付き画像（バナー）を表示できるか
テキスト付き画像を設置するメリット・デメリット
テーマのコード編集とアプリ導入の比較
おすすめアプリ「シンプルテキスト付き画像｜Image with Text」の紹介
インストール・テーマへの追加・設定方法
5 種類以上のデザインスタイル別の使い方
関連施策との組み合わせ
コード実装のサンプル
運用のコツ
よくある質問

Shopify でテキスト付き画像を表示できる？

結論から言うと、Shopify でテキスト付き画像（バナー）を設置することは可能です。ただし、その実現方法は大きく次の 2 つに分かれます。

テーマのコード編集（Liquid + CSS + JavaScript）で実装する方法
アプリを導入して設定画面から実装する方法

テーマのコード編集はカスタマイズ性が最も高い一方で、コーディング知識とテーマファイルへの理解が必要です。対してアプリは、ノーコードでテーマに追加でき、設定画面から細かい調整ができるため、運用面でも保守面でも優れています。

この記事では両方の方法を解説しますが、最終的にはアプリでスタートし、必要に応じてカスタム CSS で調整する運用がもっとも費用対効果が高いと考えています。

テキスト付き画像（バナー）を表示するメリット・デメリット

メリット

ブランドの世界観を視覚的に伝えられる
画像と文章を組み合わせることで、商品名や説明だけでは伝わりにくいブランドストーリーや雰囲気を、視覚的にダイレクトに届けられます。EC サイトでは「ぱっと見の印象」が購入判断に大きく影響するため、強力なメッセージ手段となります。

訪問者の視線を誘導しやすい
画像 + テキストの組み合わせは、本文や商品リストよりも明らかに目を引きます。ヒーローセクションや商品ページの中間、コレクションページの導線など、視線を集めたい場所に効果的に配置できます。

季節キャンペーンの誘導
注目商品コレクションへの導線
ブランドストーリーの紹介
商品の特徴ハイライト

CTA を明確に置けるためコンバージョン改善に寄与する
バナー内にボタンを設置すれば、商品ページ・コレクションページ・キャンペーンページなど、コンバージョンに直結するページへ訪問者を誘導できます。「詳しく見る」「コレクションを見る」「キャンペーンを見る」など、行動を促す CTA を明確に配置できる点が大きなメリットです。

ノーコードで運用できる
アプリを活用すれば、テーマファイルを直接編集することなくバナーを差し替えたり、レイアウトを変更したりできます。マーケティング担当者でもストア運営者でも、コードを触らずに更新できるのは大きな利点です。

SEO とブランディング両方に貢献する
画像にはきちんと alt 属性を設定でき、テキスト部分は検索エンジンに読み取られるため、SEO 面でも効果が見込めます。また、統一感のあるバナーを継続的に運用することで、ストアのブランドイメージも強化されます。

デメリット

画像素材の準備に時間とコストがかかる
良いバナーを作るには、高品質な画像素材が欠かせません。撮影や画像編集にコストや時間がかかる点はあらかじめ理解しておく必要があります。素材バンクや AI 画像生成ツールの活用が現実的な対策になります。

設置しすぎるとページが重くなる
画像セクションを 1 ページに大量に詰め込むと、ページ表示速度が遅くなる原因になります。Lazy Load や画像最適化と組み合わせ、本当に必要なバナーだけを残す運用が重要です。

デザインの自由度が高い分、統一感が崩れやすい
カスタマイズの自由度が高いことは魅力ですが、設定を場当たり的に変えると、ストア全体のトーンが揃わなくなることもあります。フォント・カラー・余白などのデザインルールを最初に決めておくと、安定した運用が可能になります。

テーマのコード編集とアプリ導入の比較

テーマのコード編集で実装する方法

メリット:

完全に自由なデザインが可能
余分なコードが入らずパフォーマンスが良い
追加の月額費用が不要

デメリット:

Liquid / CSS / JavaScript の知識が必要
バナーを差し替えるたびにコードを触る必要がある
テーマアップデート時に競合する可能性がある
複数デザインを切り替えにくい

アプリを導入する方法

メリット:

ノーコードでテーマに追加できる
ブロック単位で複数バナーを管理できる
デザインタイプを画面上で切り替えられる
PC / モバイル別の設定がしやすい
アップデートや不具合対応が提供される

デメリット:

月額費用が発生する
アプリ仕様の範囲内でしかカスタマイズできない

結論：最初はアプリで小さく試すのがおすすめ

これからテキスト付き画像（バナー）を設置するなら、まずはアプリで導入し、設定画面で運用感を試すのが最も効率的です。アプリで足りない部分が出てきたら、カスタム CSS を組み合わせるか、必要に応じてテーマファイルに移植する流れが現実的です。

アプリのインストール手順

ここからは実際のインストール手順を解説します。

Shopify 管理画面の左下にある「設定」をクリックします。
「アプリ」をクリックし、「Shopify App Store」へ移動します。
検索窓にアプリ名「シンプルテキスト付き画像」を入力し、表示されたアプリをクリックします。
アプリ詳細画面で「インストール」をクリックします。
権限の確認画面が表示されるので内容を確認し、「インストール」を完了します。

アプリをテーマに追加（有効化）

インストールが完了したら、テーマにアプリブロックを追加します。「自動で追加（1 クリック追加）」と「手動で追加」の 2 通りがあります。

自動でテーマに追加（1 クリック追加）

アプリの管理画面を開きます。
「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックします。
テーマエディタが開いたら、表示位置や設定を確認して「保存する」をクリックします。

手動でテーマに追加（任意ページに設置したい場合）

Shopify 管理画面で「オンラインストア」→「テーマ」→「テーマ編集」を開きます。
テーマエディタ上部のプルダウンから、追加したいページに移動します。
「セクションを追加」または「ブロックを追加」をクリックし、「アプリ」タブからアプリブロックを選んで追加します。
表示を確認し、問題なければ「保存する」をクリックします。

アプリの設定項目を理解する

基本設定（デザイン・配置）

ブロック全体の見た目を決める基本のセクションです。まずはここでデザインの種類と画像の配置を決め、そのうえで他の設定を調整していくのがおすすめです。

デザインタイプ: 10 種類から選択（Classic / Color Split / Bold / Collage / Overlay / Panel / Checklist / Marquee / Scroll Fade / Gallery）
画像の配置: 左 / 右

デザインの設定画面

コンテンツ設定

実際に表示するテキスト・画像・ボタンを設定するセクションです。デザインタイプによって使われる項目が異なるので、選んだデザインに合わせて入力してください。

メイン画像
タイトル
サブタイトル
説明文（リッチテキスト）
ボタン URL / ボタンテキスト / ボタンの表示・非表示

コンテンツの設定画面

追加画像設定

複数の画像やアイコン、リスト項目を使うデザインで利用する設定です。選んだデザインで使われる項目だけを入力すれば問題ありません。

画像 2〜4（Bold / Collage / Scroll Fade などで使用）
画像レイアウト（Bold で複数画像の並べ方を選択）
アイコン 1〜3（Gallery 用）
アイコン幅（20〜80px）
リスト項目 1〜3（Checklist 用）

追加画像の設定画面

カラー設定

文字や背景、ボタンなどの色を調整するセクションです。ブランドカラーに合わせて細かく整えると、ストア全体に統一感を出せます。

テキスト色 / 背景色 / テキストエリア背景色
ボタン色 / ボタンテキスト色
タイトル色 / サブタイトル色 / 説明文色 / リスト項目色

カラーの設定画面

画像装飾設定

画像の見せ方を細かく調整できるセクションです。装飾を加えることで、シンプルな画像でもおしゃれな印象に仕上げられます。

画像の角丸（0〜50px）
フレームの表示 / フレームの色
オフセット影の表示 / オフセット影の色

画像装飾の設定画面

レイアウト設定

セクションの幅や揃え方、モバイル表示など、レイアウトを調整するセクションです。

最大幅（600〜1600px）
画像幅（30〜70%）
オーバーレイの不透明度（Overlay 専用）
テキスト揃え（左 / 中央 / 右）
垂直揃え（上 / 中央 / 下）
モバイル時の画像位置（上 / 下）

レイアウトの設定画面

詳細設定（カスタム CSS）

標準の設定では実現できない細かなスタイル調整をしたい場合は、こちらにカスタム CSS を記述できます。ブロック固有のセレクタを使うことで、他のセクションに影響を与えずスタイルを上書きできます。

カスタム CSS の設定画面

デザインスタイル別の使い方ガイド

ここでは、特に利用シーンの多い 5 種類のデザインスタイルについて、おすすめの使い方を解説します。

Classic（クラシック）

王道のレイアウトで、画像と文章を左右に並べるシンプルなデザインです。ブランドストーリーや商品の特徴紹介など、汎用的な場面で活躍します。

Classic デザインのプレビュー

おすすめ設定:

画像配置: 左
画像装飾: フレーム + 角丸 12px
最大幅: 1200px
画像幅: 50%
テキスト揃え: 左揃え

Overlay（オーバーレイ）

画像の上にテキストを重ねる、ヒーローセクション向けのデザインです。トップページのファーストビューに最適で、視覚的なインパクトが強く出せます。

Overlay デザインのプレビュー

おすすめ設定:

オーバーレイ不透明度: 30〜50%
テキスト揃え: 中央
ボタン: 表示

Checklist（チェックリスト）

リスト項目を強調できる、特徴やメリット紹介向けのデザインです。「ご利用のメリット」「商品の選ばれる理由」といった訴求に最適です。

Checklist デザインのプレビュー

おすすめ設定:

リスト項目 1〜3: 訴求ポイントを 3 つ記入
リスト項目色: ブランドのアクセントカラー
画像配置: 右

Marquee（マーキー）

サブタイトルがスクロールするように動く、目を引くデザインです。キャンペーン告知やセールバナーで効果を発揮します。

Marquee デザインのプレビュー

おすすめ設定:

サブタイトル: 短いフレーズでリズム良く（例: 「SUMMER SALE / 期間限定 / 30% OFF」）
画像配置: 左
ボタン: 表示（「セールを見る」など）

すぐ使えるおすすめ設定例

ユースケースごとに、すぐ参考にできる設定例をいくつか紹介します。

ホームページのブランドストーリー

デザイン: Classic
画像配置: 左
タイトル: ブランド名 + キーフレーズ
説明文: ブランドの背景・想いを 2〜3 行
ボタン: 「ブランドストーリーを読む」

商品ページの特徴紹介

デザイン: Checklist
画像配置: 右
リスト項目: 商品の特徴 3 つ
ボタン: 非表示

キャンペーン告知

デザイン: Marquee
サブタイトル: 「SUMMER SALE / 期間限定 / 最大30% OFF」
ボタン: 「キャンペーンページを見る」

文言のテンプレ例

ブランドストーリー: 「ひとつひとつ、丁寧に。私たちの〇〇は、地域の素材と職人の技から生まれます。」
商品ハイライト: 「毎日の暮らしを、もっと心地よく。〇〇シリーズが寄り添う3つの理由。」
セール告知: 「期間限定！〇〇日まで対象商品が最大30% OFF」

テーマのコード編集で実装する場合のサンプルコード

ここでは、テーマファイルに直接「テキスト付き画像」を実装する場合のサンプルを紹介します。

実装の流れ

テーマファイルにセクション用 Liquid を追加
テーマエディタで設定項目を編集できるよう Schema を定義
CSS でレイアウト・装飾を整える
必要に応じて JavaScript で演出を加える

HTML を追加（Liquid セクション）

sections/image-with-text-custom.liquid を新規作成し、以下のように記述します。

{%- comment -%} sections/image-with-text-custom.liquid {%- endcomment -%}
<section
  class="iwt-section iwt-{{ section.settings.image_position }}"
  style="--iwt-max-width: {{ section.settings.max_width }}px;"
>
  <div class="iwt-inner">
    <div class="iwt-image">
      {% if section.settings.image %}
        <img
          src="{{ section.settings.image | image_url: width: 1200 }}"
          alt="{{ section.settings.image.alt | escape }}"
          loading="lazy"
          width="1200"
          height="800"
        >
      {% endif %}
    </div>
    <div class="iwt-content">
      {% if section.settings.subtitle != blank %}
        <p class="iwt-subtitle">{{ section.settings.subtitle }}</p>
      {% endif %}
      {% if section.settings.title != blank %}
        <h2 class="iwt-title">{{ section.settings.title }}</h2>
      {% endif %}
      {% if section.settings.description != blank %}
        <div class="iwt-description">{{ section.settings.description }}</div>
      {% endif %}
      {% if section.settings.button_label != blank and section.settings.button_url != blank %}
        <a class="iwt-button" href="{{ section.settings.button_url }}">
          {{ section.settings.button_label }}
        </a>
      {% endif %}
    </div>
  </div>
</section>

{% schema %}
{
  "name": "Image with Text (Custom)",
  "settings": [
    { "type": "image_picker", "id": "image", "label": "画像" },
    { "type": "text", "id": "subtitle", "label": "サブタイトル" },
    { "type": "text", "id": "title", "label": "タイトル" },
    { "type": "richtext", "id": "description", "label": "説明文" },
    { "type": "text", "id": "button_label", "label": "ボタンテキスト" },
    { "type": "url", "id": "button_url", "label": "ボタン URL" },
    {
      "type": "select",
      "id": "image_position",
      "label": "画像の配置",
      "options": [
        { "value": "left", "label": "左" },
        { "value": "right", "label": "右" }
      ],
      "default": "left"
    },
    {
      "type": "range",
      "id": "max_width",
      "label": "最大幅",
      "min": 600,
      "max": 1600,
      "step": 50,
      "unit": "px",
      "default": 1200
    }
  ],
  "presets": [
    { "name": "Image with Text (Custom)" }
  ]
}
{% endschema %}

CSS を追加

assets/image-with-text-custom.css を作成し、テーマレイアウトから読み込みます。

.iwt-section {
  max-width: var(--iwt-max-width);
  margin: 0 auto;
  padding: 64px 16px;
}
.iwt-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.iwt-right .iwt-inner {
  direction: rtl;
}
.iwt-right .iwt-content {
  direction: ltr;
}
.iwt-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 8px 8px 0 rgba(17, 17, 17, 0.1);
}
.iwt-subtitle {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 13px;
  color: #666;
  margin: 0 0 8px;
}
.iwt-title {
  font-size: 32px;
  line-height: 1.3;
  margin: 0 0 16px;
}
.iwt-description {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 24px;
}
.iwt-button {
  display: inline-block;
  padding: 14px 28px;
  background: #111;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.iwt-button:hover {
  opacity: 0.85;
}
@media (max-width: 768px) {
  .iwt-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .iwt-title {
    font-size: 24px;
  }
}

JavaScript を追加

assets/image-with-text-custom.js を作成し、スクロール時にフェードインさせます。

document.addEventListener('DOMContentLoaded', () => {
  const sections = document.querySelectorAll('.iwt-section');
  if (!('IntersectionObserver' in window)) {
    sections.forEach((s) => s.classList.add('is-visible'));
    return;
  }

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible');
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.15 });

  sections.forEach((section) => observer.observe(section));
});

CSS にもフェードイン用のスタイルを追加します。

.iwt-section {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.iwt-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}