Shopify でカードカルーセルを設置する方法｜テキスト付き画像でストアの訴求力を高めよう

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

はじめに

ECストアの第一印象を左右する要素として、近年ますます重要視されているのが 「カードカルーセル」 です。Apple Store のトップページや Netflix の作品一覧などで使われている横スクロール型のカード表示は、限られたファーストビューの中で複数のメッセージを伝えられる強力な UI として、Shopify でも採用するストアが増えてきました。

特に 「テキスト付き画像」 をカード状に並べるカードカルーセルは、画像だけのスライダーよりも情報量が多く、テキストだけのバナーよりも視覚的に訴求力が高いため、新商品・キャンペーン・ブランドストーリーなど複数のテーマを一気に伝えるのに最適です。

しかし、いざ Shopify でカードカルーセルを実装しようとすると、

テーマ標準のセクションには横スクロールのカードカルーセルが用意されていない
自分でコードを書こうとすると、レスポンシブ対応・無限スクロール・自動再生など考慮することが多すぎる
せっかく作ってもテーマアップデートで影響を受けるのが怖い

といった壁にぶつかる方が少なくありません。

この記事では、Shopify ストアに カード・カルーセル・テキスト付き画像 の UI をシンプルに導入できるおすすめアプリ 「シンプルカードカルーセル｜お手軽テキスト付き画像スライダー」 を中心に、設置方法・設定項目・運用のコツ・テーマのコード編集での実装サンプル・関連施策との組み合わせまでを徹底解説します。

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

記事の構成

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

カードカルーセルとは何か
Shopify でカードカルーセルを表示する方法（テーマ編集 vs アプリ）
カードカルーセルを設置するメリット・デメリット
おすすめアプリ「シンプルカードカルーセル｜お手軽テキスト付き画像スライダー」の紹介
インストール・テーマ追加・設定手順
すぐ使えるおすすめ設定例（ユースケース別）
関連施策との組み合わせ
テーマのコード編集で実装する場合のサンプルコード
運用のコツ
よくある質問

Shopify でカードカルーセルを表示できる？

結論から言うと、Shopify でテキスト付き画像のカードカルーセルを表示することは可能です。ただし、Shopify テーマのデフォルト機能だけでは難しい部分があるため、以下の 2 つの方法から選ぶことになります。

テーマのコード編集で実装する方法
アプリを導入して実装する方法

それぞれにメリット・デメリットがあるため、ストアの規模・運用体制・予算に応じて最適な方法を選ぶのがおすすめです。

カードカルーセルを表示するメリット・デメリット

メリット

1. 限られたスペースで複数のメッセージを伝えられる

1 つのセクション内で複数のテキスト付きカードを横スクロールで見せられるため、新商品・セール・コレクションなどを同時にアピールできます。

新商品の紹介
期間限定セールのバナー
ブランドストーリー
ピックアップコレクション
スタッフのおすすめ

2. 各カードに個別のリンクを設定でき、回遊動線を作れる

カードごとに商品ページや特集ページへの遷移先を設定できます。お客様が興味を持ったカードから直接ランディングページへ誘導できるため、CV までのクリック数を最小化できます。

3. 「テキスト付き画像」で視覚と言葉の両面から訴求できる

画像だけでは伝わりにくい価格や条件、特徴をテキストで補足できます。「NEW」「期間限定」「30% OFF」などのサブタイトルを添えれば、視線を集めるアクセントにもなります。

4. Apple Store 風のおしゃれなデザインでブランド価値を演出できる

横スクロール、影付きカード、丸みのある角などの要素を組み合わせると、プレミアム感のある上質なストアを演出できます。

5. 自動再生で複数キャンペーンをローテーションできる

自動再生機能があれば、お客様が操作しなくてもカードが順番にスライドするため、ヒーローエリアでの活用に最適です。

デメリット

1. カードの内容を作り込む手間がかかる

カード 1 枚あたり画像・サブタイトル・メイン見出し・補足テキスト・リンクを設定するため、シンプルなバナー設置よりも準備時間が必要です。

2. 画像のクオリティに依存しやすい

カードカルーセルはビジュアルを大きく見せる UI のため、画像の品質や撮り方が見た目に直結します。低解像度の画像や構図のばらつきがあるとブランドイメージを損なう可能性があります。

3. モバイル表示の確認が欠かせない

PC で美しく見えても、スマホでは文字が小さくなったりカードの幅が中途半端になったりすることがあります。レスポンシブ対応のアプリを選び、必ず実機確認することが大切です。

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

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

メリット：

自分のストアに完全に合わせた UI を作れる
アプリ料金がかからない

デメリット：

HTML / CSS / JS / Liquid の知識が必須
レスポンシブ対応・自動再生・無限スクロールなどを自前で実装する必要がある
テーマアップデート時に手動で再適用が必要
実装後の変更や A/B テストにも工数がかかる

アプリを導入する方法

メリット：

ノーコードで設置できる
自動再生・無限スクロール・レスポンシブ対応がはじめから組み込まれている
テーマアップデートの影響を受けにくい
設定項目が用意されているため A/B テストしやすい

デメリット：

月額料金が発生する（多くは数ドル〜十数ドル）
機能の細部はアプリの仕様に従うことになる

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

カードカルーセルの効果を検証する段階では、アプリを使ってまず設置 → 効果が出ることが確認できたら本格的にデザインや運用を磨く、という流れが現実的です。月額数ドルの投資で、デザイナー・エンジニアの工数を大幅に節約できます。

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

「シンプルカードカルーセル｜お手軽テキスト付き画像スライダー」のインストールは、以下の手順で行います。

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

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

インストール完了後、テーマにカードカルーセルブロックを追加します。追加方法は 2 通りあります。

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

アプリ管理画面からワンクリックで既定の位置に追加する方法です。すぐに設置したい方におすすめです。

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

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

任意のページや位置に設置したい場合は、テーマエディタから手動で追加します。

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

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

カードカルーセルブロックの設定項目は、以下のグループに分かれています。

見出し設定

カルーセルの最上部に表示されるセクションタイトルに関する設定です。「Featured」「新着商品」「ピックアップ」など、カルーセルの内容を一目で伝えるテキストを設定します。

見出しテキスト：表示する見出し。空欄にすると見出し自体が非表示
見出しの大きさ（px）：16〜48px の範囲で 2px 刻みに調整
見出しテキストの色：ブランドカラーに合わせて指定
見出しの配置：左揃え／中央揃えから選択
上の余白（px）／下の余白（px）：直前・直後のセクションとの間隔を調整

見出し設定画面

自動再生設定

カードを自動でスライドさせるかどうかの設定グループです。

自動再生を有効にする：チェックすると、ページ表示時にカードが自動で 1 枚ずつスライド
自動再生の間隔（秒）：3〜10 秒の範囲で設定可能
無限スクロールを有効にする：最後のカードまで進んだあと、先頭へループ

自動再生設定画面

カードスタイル設定

カード全体の見た目を整える設定グループです。

カードの横幅：200〜500px、10px 刻み
カードの比率：4:5 / 3:4 / 1:1 / 3:2 / 16:9
カードの角丸：0〜30px、1px 刻み
カードの間隔：0〜40px、2px 刻み
カードの影：ON / OFF
サブタイトル文字サイズ：8〜20px
メイン見出し文字サイズ：14〜48px
補足テキスト文字サイズ：10〜24px

カードスタイル設定画面

カード 1〜6 の個別設定

カードごとに以下を設定できます。

画像：表示する画像
画像レイアウト：標準（画像全面）／カードの下半分／カードの上半分
サブタイトル＋色：「NEW」「期間限定」などの小さなラベル
メイン見出し＋色：商品名やキャッチコピー
補足テキスト＋色：リッチテキスト対応の説明文
リンク URL：商品ページや特集ページへの遷移先

💡 ワンポイント：画像と「メイン見出し」のいずれかが入力されているカードのみ表示されます。表示したくないカードは画像と見出しを空欄のままにしておくと、自動的にカルーセルから除外されます。

カードの設定画面

追加設定（カスタム CSS）

カスタム CSS を直接記述できる上級者向けの設定です。

追加設定画面

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

ストアの目的別に、推奨する設定例を紹介します。

ヒーローエリアでキャンペーン訴求したい場合

カードの横幅：480px
カードの比率：16:9
自動再生：ON、間隔 5 秒
無限スクロール：ON
メイン見出しサイズ：32px
影：ON、角丸：16px

コレクションページで商品テーマを並べたい場合

カードの横幅：300px
カードの比率：4:5
自動再生：OFF
影：ON、角丸：12px
メイン見出しサイズ：20px、補足テキストサイズ：14px

商品ページで関連特集や使い方ガイドを見せたい場合

カードの横幅：260px
カードの比率：1:1
自動再生：OFF
角丸：20px、影：OFF
サブタイトル：「使い方」「お手入れ」「ストーリー」など短めのラベル

文言のテンプレ例

新商品紹介：「2026 SPRING」「NEW ARRIVAL」「春の新作」
セール：「期間限定」「LIMITED」「SALE 30% OFF」
特集：「Featured」「PICKUP」「Editor's Choice」
ストーリー：「OUR STORY」「ブランドの想い」「品質へのこだわり」

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

「アプリではなく自前で実装したい」という方向けに、Liquid・CSS・JavaScript の最小サンプルを掲載します。実際のテーマに組み込む際は、テーマ全体の命名規則・余白・タイポグラフィに合わせて調整してください。

実装の流れ

テーマファイル（sections/card-carousel.liquid など）を新規作成
必要な CSS・JavaScript を assets/ に配置（または sections 内にインライン）
テーマのテンプレート（templates/index.json など）からセクションを参照
テーマエディタで内容を編集して保存

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

{% schema %}
{
  "name": "カードカルーセル",
  "settings": [
    { "type": "text", "id": "heading", "label": "見出し" },
    { "type": "checkbox", "id": "autoplay", "label": "自動再生", "default": true },
    { "type": "range", "id": "interval", "label": "再生間隔（秒）", "min": 3, "max": 10, "step": 1, "default": 5 }
  ],
  "blocks": [
    {
      "type": "card",
      "name": "カード",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "画像" },
        { "type": "text", "id": "subtitle", "label": "サブタイトル" },
        { "type": "text", "id": "title", "label": "メイン見出し" },
        { "type": "richtext", "id": "description", "label": "補足テキスト" },
        { "type": "url", "id": "link", "label": "リンク" }
      ]
    }
  ]
}
{% endschema %}

<section
  class="card-carousel"
  data-card-carousel
  data-autoplay="{{ section.settings.autoplay }}"
  data-interval="{{ section.settings.interval | times: 1000 }}"
>
  {% if section.settings.heading != blank %}
    <h2 class="card-carousel__heading">{{ section.settings.heading }}</h2>
  {% endif %}

  <div class="card-carousel__track" data-card-carousel-track>
    {% for block in section.blocks %}
      <a class="card-carousel__card" href="{{ block.settings.link | default: '#' }}">
        {% if block.settings.image %}
          <img
            class="card-carousel__image"
            src="{{ block.settings.image | image_url: width: 800 }}"
            alt="{{ block.settings.title }}"
          />
        {% endif %}
        <div class="card-carousel__body">
          {% if block.settings.subtitle != blank %}
            <p class="card-carousel__subtitle">{{ block.settings.subtitle }}</p>
          {% endif %}
          {% if block.settings.title != blank %}
            <p class="card-carousel__title">{{ block.settings.title }}</p>
          {% endif %}
          {% if block.settings.description != blank %}
            <div class="card-carousel__description">{{ block.settings.description }}</div>
          {% endif %}
        </div>
      </a>
    {% endfor %}
  </div>
</section>

CSS を追加

.card-carousel {
  padding: 32px 16px;
}

.card-carousel__heading {
  font-size: 24px;
  margin-bottom: 16px;
  text-align: left;
}

.card-carousel__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.card-carousel__track::-webkit-scrollbar {
  display: none;
}

.card-carousel__card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  color: inherit;
  background-color: #fff;
  transition: transform 0.2s ease;
}

.card-carousel__card:hover {
  transform: translateY(-4px);
}

.card-carousel__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.card-carousel__body {
  padding: 16px;
}

.card-carousel__subtitle {
  font-size: 12px;
  color: #888;
  margin: 0 0 4px;
}

.card-carousel__title {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 8px;
}

.card-carousel__description {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}

JavaScript を追加

document.addEventListener('DOMContentLoaded', () => {
  const carousels = document.querySelectorAll('[data-card-carousel]');

  carousels.forEach((carousel) => {
    const track = carousel.querySelector('[data-card-carousel-track]');
    if (!track) return;

    const autoplay = carousel.getAttribute('data-autoplay') === 'true';
    const interval = parseInt(carousel.getAttribute('data-interval'), 10) || 5000;

    if (!autoplay) return;

    let index = 0;
    const cards = track.children;

    setInterval(() => {
      index = (index + 1) % cards.length;
      const target = cards[index];
      if (!target) return;
      track.scrollTo({ left: target.offsetLeft, behavior: 'smooth' });
    }, interval);
  });
});

コード実装の注意点

自動再生をモバイルで動かすとデータ通信量が増えるため、設定で OFF にできるようにしておくのが望ましい
横スクロールは scroll-snap を使うと滑らかになるが、古いブラウザでは挙動が異なる場合がある
画像は width 属性を Liquid の image_url フィルタで明示し、レスポンシブ画像に対応する
アクセシビリティ観点では、矢印ボタンによる操作とキーボード操作も追加実装しておくのがおすすめ
A11y の観点で prefers-reduced-motion メディアクエリを尊重し、自動再生を停止する処理を入れておく

このように自前実装は柔軟ですが、運用・改修コストが高いことが分かります。リソースに余裕がない場合は、まず「シンプルカードカルーセル｜お手軽テキスト付き画像スライダー」を導入し、必要になったらコード化を検討するのが現実的です。

運用のコツ

カードの順序は「最も伝えたいもの」を先頭に

横スクロールではお客様が右にスクロールするとは限りません。1 枚目に最も訴求したいキャンペーンや新商品を配置するのが鉄則です。

サブタイトルは短く、コントラストを意識する

「NEW」「LIMITED」「2026 SPRING」など、3〜10 文字程度で視線を引くワードが効果的です。サブタイトルの色を背景画像とのコントラストが取れる色に設定すると、より目立たせられます。

モバイルでは 1 枚ずつ視認できる幅にする

PC では 3〜4 枚同時表示でも、モバイルでは 1〜1.2 枚程度が見える幅が目安です。スマホでの表示確認を必ず行い、見出しの折り返しや文字サイズが適切かチェックしてください。

季節・キャンペーンに合わせて定期的に更新する

カードカルーセルは「設置したら終わり」ではなく、季節やセールに合わせて中身を更新するのが重要です。月 1 回程度のペースで内容を見直し、ストアに鮮度を保つ運用が理想的です。

自動再生間隔は 5 秒前後がバランス良し

短すぎるとお客様が読み切れず、長すぎると単調に感じられます。テキスト量の多いカードがある場合は 6〜7 秒、画像主体なら 4〜5 秒が目安です。

よくある質問

Q1. テーマを変更してもカードカルーセルは引き継がれますか？

A. アプリブロックは各テーマごとに設定されるため、新しいテーマでも改めてブロックを追加していただく必要があります。再追加は「テーマに追加」ボタンから 1 クリックで行えます。

Q2. カードは何枚まで表示できますか？

A. 最大 6 枚までです。画像とメイン見出しのいずれかが入力されているカードのみ表示されるため、表示したくないカードは空欄のままにしておくと自動的に除外されます。

Q3. スマホでも横スクロールが滑らかに動きますか？

A. はい。レスポンシブ対応の実装により、スマホでも指でのスワイプ操作が自然に動作します。

Q4. 補足テキストにリンクを入れることはできますか？

A. はい。補足テキストはリッチテキストに対応しているため、太字・リンク・リストなどを利用できます。

Q5. 既存のテーマと干渉しませんか？

A. アプリブロックとして提供されているため、テーマ本体のコードには手を加えません。テーマの保守性を損なわずに利用できます。

Q6. 月の途中で解約した場合、料金はどうなりますか？

A. Shopify の課金は 30 日ごとのサイクルです。解約タイミングや日割りについては、Shopify の請求仕様に従いますので、詳細は Shopify ヘルプセンターをご確認ください。

まとめ

Shopify ストアに「カード・カルーセル・テキスト付き画像」を導入すると、限られたファーストビューに複数のメッセージを盛り込み、回遊・CV を伸ばせる
テーマのコード編集でも実装可能だが、レスポンシブ対応・自動再生・無限スクロールなどを含めると工数が大きい
アプリ導入なら、ノーコードかつ短時間で Apple Store 風のカードカルーセルを実現できる
おすすめは 「シンプルカードカルーセル｜お手軽テキスト付き画像スライダー」。月額 $4.99、7 日間の無料体験あり、最大 6 枚のカード、3 種類の画像レイアウト、自動再生・無限スクロール、細かなカスタマイズ性まで揃う
スライドショー・Instagram フィード・Before/After スライダーなどとの組み合わせで、さらに効果を高められる

「テキスト付き画像のカードカルーセル」を Shopify ストアに導入したい方は、まずは無料体験から 「シンプルカードカルーセル｜お手軽テキスト付き画像スライダー」 を試してみてください。

👉 シンプルカードカルーセル｜お手軽テキスト付き画像スライダー｜Shopify App Store