【2026年】Shopifyに画像Before Afterスライダーを導入する方法は？おすすめアプリも紹介！

はじめに
記事の構成
Shopify で画像 Before After スライダーを表示できる？
画像 Before After スライダーを表示するメリット・デメリット
- メリット
- デメリット
テーマのコード編集とアプリ導入の比較
おすすめ Shopify アプリ「シンプル画像ビフォーアフター｜お手軽イメージ前後比較」紹介
- アプリの基本情報
- できること
アプリのインストール手順
アプリをテーマに追加（有効化）
アプリの設定項目を理解する
すぐ使えるおすすめ設定例
テーマのコード編集で実装する場合のサンプルコード
運用のコツ
よくある質問
まとめ
参考記事

はじめに

Shopify でネットショップを運営していると、「商品の使用前後の変化をもっとわかりやすく伝えたい」「施工事例のビフォーアフターを効果的に見せたい」と感じることはありませんか？

テキストだけの説明では、商品の効果やサービスの成果を十分に伝えることが難しく、購入の決め手に欠けてしまうケースも少なくありません。そんなときに活躍するのが、画像 Before After スライダーです。

Shopify に画像 Before After スライダーを導入すれば、ユーザーが自分の手でスライダーを動かしながら、使用前と使用後の違いを直感的に確認できます。スキンケア商品の肌の変化、リフォーム前後の部屋の様子、写真加工の仕上がりなど、あらゆるジャンルで「変化」を強力に訴求できるのが大きな強みです。

この記事では、Shopify ストアに画像 Before After スライダーを導入する方法を、テーマのコード編集からアプリの活用まで、網羅的に解説します。実際のアプリの設定手順やサンプルコードも掲載しているので、ぜひ最後までご覧ください。

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

記事の構成

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

Shopify で画像 Before After スライダーを表示できるかどうか
画像 Before After スライダーを表示するメリット・デメリット
テーマのコード編集とアプリ導入の比較
おすすめアプリ「シンプル画像ビフォーアフター｜お手軽イメージ前後比較」の紹介
アプリのインストール手順とテーマへの追加方法
アプリの設定項目の詳細解説
すぐ使えるおすすめ設定例
テーマのコード編集で実装する場合のサンプルコード
運用のコツとよくある質問

Shopify で画像 Before After スライダーを表示できる？

結論から言うと、Shopify で画像 Before After スライダーを表示することは可能です。

ただし、Shopify の標準機能には画像 Before After スライダーの機能は搭載されていません。そのため、導入するには以下の 2 つの方法のいずれかを選ぶ必要があります。

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

Shopify テーマの Liquid ファイルに HTML・CSS・JavaScript を直接記述して、スライダー機能を自作する方法です。コーディングの知識がある方であれば、自由度の高いカスタマイズが可能です。

アプリを導入して実装する方法

Shopify App Store で提供されている画像 Before After スライダーアプリをインストールして導入する方法です。ノーコードで設定でき、テーマエディタから直感的に操作できるため、初心者の方でも安心して利用できます。

それぞれの方法にはメリット・デメリットがあります。次のセクションから詳しく見ていきましょう。

画像 Before After スライダーを表示するメリット・デメリット

画像 Before After スライダーを Shopify ストアに導入する前に、そのメリットとデメリットを理解しておきましょう。

メリット

商品効果の直感的な訴求力

画像 Before After スライダーの最大のメリットは、商品やサービスの効果を「見て・触って」体感できる点です。テキストや静止画だけでは伝わりにくい変化も、スライダーを操作することで一目瞭然になります。

たとえば、スキンケア商品であれば使用前後の肌の変化、クリーニングサービスであれば洗浄前後の仕上がりなど、「変化の度合い」をユーザー自身がスライダーで確認できるため、商品の価値をダイレクトに伝えることができます。

静止画を 2 枚並べるよりも、同一画面で直接比較できるため説得力が高い
言葉では伝えにくい「微妙な変化」も視覚的に表現できる

コンバージョン率の向上

画像 Before After スライダーは、購入を迷っているユーザーの背中を押す効果があります。「本当に効果があるのか？」という不安を、視覚的な証拠で解消できるため、カート追加率や購入率の向上が期待できます。

特に、美容・健康・リフォームなど「変化」を売りにする商品カテゴリーでは、Before After の比較表示がコンバージョンに直結するケースが多く報告されています。

商品の効果を視覚的に証明することで、購入のハードルを下げられる
ランディングページや商品ページに設置することで、離脱率の低減にもつながる

ユーザーエンゲージメントの向上

スライダーはインタラクティブな UI 要素であり、ユーザーの操作を促す仕組みです。ページを訪れたユーザーがスライダーを動かすことで、ストアへの滞在時間が延び、商品への関心が深まります。

一般的な静止画コンテンツと比較して、スライダーのようなインタラクティブ要素はユーザーの注意を引きつけやすく、ページ内の回遊率向上にも寄与します。

ページ滞在時間の向上は、SEO の観点からもプラスに働く
SNS でシェアされやすいコンテンツとしても機能する

信頼感の醸成（実例提示）

Before After の比較画像は、「実際の使用結果」を示すものとして、ユーザーに信頼感を与えます。テキストだけのレビューや説明よりも、視覚的な実例は圧倒的に説得力があります。

特に、初めてストアを訪れた新規ユーザーに対しては、実際の効果を目で見て確認できることが購入の大きな後押しになります。

口コミやレビューと合わせて掲載すると、さらに説得力が増す
実例を通じてブランドの誠実さをアピールできる

デメリット

画像品質に依存する

画像 Before After スライダーは、Before 画像と After 画像の品質に大きく依存します。画質が低かったり、撮影条件（明るさ・アングル・背景）が異なっていたりすると、逆にマイナスの印象を与えてしまう可能性があります。

スライダーで 2 つの画像を重ねて表示するため、画像のサイズやアスペクト比が揃っていないと、表示が崩れてしまうこともあります。効果的な Before After を実現するためには、撮影段階から計画的に準備することが大切です。

画像準備の手間

Before After 用の画像を用意するには、使用前と使用後のそれぞれのタイミングで撮影する必要があります。同じアングル・同じ照明条件で撮影しなければ、公正な比較として機能しません。

特に、継続使用が前提の商品（スキンケア、ヘアケアなど）では、一定期間をあけて撮影する必要があるため、コンテンツの準備に時間がかかります。また、お客様から提供いただく画像を使用する場合は、使用許可の取得やプライバシーへの配慮も必要です。

表示速度への影響

画像 Before After スライダーは、1 つのセクションに 2 枚の画像を読み込む必要があります。画像サイズが大きい場合や、複数のスライダーをページ内に設置する場合は、ページの読み込み速度に影響を与える可能性があります。

ページ速度の低下はユーザー体験の悪化や SEO への悪影響につながるため、画像の最適化（WebP 形式の使用、適切なサイズへのリサイズ）を行い、必要最小限の画像サイズで運用することが重要です。

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

Shopify で画像 Before After スライダーを導入する 2 つの方法について、それぞれのメリット・デメリットを整理します。

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

テーマのコード（Liquid / HTML / CSS / JavaScript）を直接編集して、Before After スライダーを実装する方法です。

メリット

ランニングコストがかからない（アプリの月額料金が不要）
デザインや動作を自由にカスタマイズできる
外部アプリへの依存がなく、テーマ内で完結する
不要なスクリプトを読み込まないため、軽量に実装できる可能性がある

デメリット

HTML / CSS / JavaScript のコーディング知識が必要
テーマアップデート時にコードが上書きされるリスクがある
バグが発生した場合、自力で修正しなければならない
レスポンシブ対応やタッチ操作への対応を自分で実装する必要がある
実装・テストに時間がかかる

アプリを導入する方法

Shopify App Store から Before After スライダーアプリをインストールして導入する方法です。

メリット

コーディング不要で、管理画面から直感的に設定できる
レスポンシブ対応やタッチ操作が標準で搭載されている
テーマアップデートの影響を受けにくい
アプリ開発元のサポートを受けられる
導入・設定が短時間で完了する
無料体験期間で事前に動作確認できるアプリも多い

デメリット

月額料金が発生する
アプリによっては、カスタマイズの自由度が限られる
アプリの読み込みにより、ページ速度にわずかな影響がある場合がある

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

画像 Before After スライダーを初めて導入するなら、まずはアプリで小さく試すことをおすすめします。

理由はシンプルです。アプリであれば、コーディング不要で数分で導入でき、実際にストアでどのように表示されるかをすぐに確認できます。多くのアプリには無料体験期間が用意されているため、コストをかけずに効果を検証することも可能です。

「まず試してみて、効果が確認できたら本格的に運用する」というアプローチが、リスクを最小限に抑えながら成果を出す最善の方法です。コード編集による実装は、アプリで効果を実感したあとに、より高度なカスタマイズが必要になった段階で検討しても遅くはありません。

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

ここからは、「シンプル画像ビフォーアフター｜お手軽イメージ前後比較」の具体的なインストール手順を解説します。

ステップ 1: Shopify 管理画面から「設定」をクリック

まず、Shopify の管理画面にログインし、左下の「設定」をクリックします。

ステップ 2: 「アプリと販売チャネル」から Shopify App Store に移動

設定画面の左メニューから「アプリと販売チャネル」を選択し、「Shopify App Store」ボタンをクリックして App Store に移動します。

AppStore

ステップ 3: アプリを検索する

App Store の検索バーに「シンプル画像ビフォーアフター」と入力して検索します。検索結果に「シンプル画像ビフォーアフター｜お手軽イメージ前後比較」が表示されるので、クリックしてアプリの詳細ページに移動します。

ステップ 4: 「インストール」ボタンをクリック

アプリの詳細ページで「インストール」ボタンをクリックします。

インストール

ステップ 5: アクセス権限を確認して「インストール」

アプリが必要とするアクセス権限の確認画面が表示されます。内容を確認し、問題がなければ「インストール」ボタンをクリックしてインストールを完了します。

ステップ 6: アプリの管理画面が表示される

インストールが完了すると、アプリの管理画面が表示されます。ここからアプリの各種設定を行うことができます。次のステップで、テーマへの追加（有効化）を行います。

管理画面

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

アプリをインストールしただけでは、ストアのページにスライダーは表示されません。テーマエディタからアプリブロックを追加して有効化する必要があります。

ステップ 1: テーマエディタでアプリブロックを追加

Shopify 管理画面から「オンラインストア」>「テーマ」>「カスタマイズ」をクリックしてテーマエディタを開きます。スライダーを表示したいページのセクションで「ブロックを追加」をクリックし、「アプリ」カテゴリーから「シンプル画像ビフォーアフター」を選択します。

テーマ追加

ステップ 2: 設定を確認して「保存」をクリック

アプリブロックが追加されたら、プレビューで表示を確認します。問題がなければ、画面右上の「保存」ボタンをクリックして設定を保存します。これでストアのページに Before After スライダーが表示されるようになります。

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

「シンプル画像ビフォーアフター｜お手軽イメージ前後比較」には、さまざまな設定項目が用意されています。ここでは、各設定項目の詳細を解説します。

コンテンツ設定

コンテンツ設定では、Before 画像と After 画像の登録、ラベルの表示・非表示、ラベルの位置、ラベルのテキストを設定できます。

コンテンツ設定

Before 画像 / After 画像

スライダーに表示する Before 画像と After 画像をそれぞれ設定します。画像は Shopify のメディアライブラリからアップロードして選択できます。Before と After で同じサイズ・アスペクト比の画像を使用すると、スライダーの表示がきれいに揃います。

ラベルの表示

Before / After のラベル（テキスト）を表示するかどうかを切り替えられます。ラベルを表示することで、ユーザーがどちらが使用前でどちらが使用後なのかを直感的に理解できます。

ラベルの位置

ラベルの表示位置を「上部」または「下部」から選択できます。画像のデザインやコンテンツに合わせて、最適な位置を選びましょう。画像の下部に重要な情報がある場合は上部に、画像の上部にロゴやテキストがある場合は下部に配置するのがおすすめです。

ラベルのテキスト

Before / After のラベルに表示するテキストを自由に設定できます。デフォルトでは「Before」「After」ですが、日本語のストアであれば「使用前」「使用後」「施工前」「施工後」など、商品やサービスに合わせたテキストに変更できます。

モバイル画像設定

モバイル画像設定では、スマートフォンやタブレットなどのモバイルデバイス向けに、PC とは別の画像を設定できます。

モバイル設定

モバイル用 Before 画像 / After 画像

モバイルデバイスで表示する際に、PC 用とは異なる画像を設定できます。スマートフォンの画面サイズに最適化された画像を用意することで、モバイルユーザーにも快適な Before After 比較体験を提供できます。

モバイル用画像を設定しない場合は、PC 用の画像がそのまま表示されます。必須ではありませんが、モバイルユーザーの体験を最適化したい場合は設定することをおすすめします。

スライダー・文字・レイアウト設定

スライダーのハンドルデザインや文字のスタイル、レイアウトに関する設定を行えます。

その他設定

ハンドルデザイン

スライダーのハンドル（つまみ部分）のデザインを 3 種類から選択できます。

矢印: 左右の矢印アイコンが表示されるスタイル。操作方法が直感的に伝わるため、初めてスライダーを見るユーザーにもわかりやすいデザインです。
丸: シンプルな丸型のハンドル。ミニマルなデザインのストアに馴染みやすく、スタイリッシュな印象を与えます。
線のみ: ハンドルを線だけで表現するシンプルなスタイル。画像を邪魔せず、コンテンツに集中してもらいたい場合に最適です。

フォントサイズ

ラベルのフォントサイズを調整できます。画像のサイズやストア全体のデザインに合わせて、適切な大きさに設定しましょう。

文字色

ラベルの文字色を自由に設定できます。Before 画像と After 画像の色合いに応じて、視認性の高い色を選ぶことが大切です。明るい画像には暗めの文字色、暗い画像には明るめの文字色を設定すると、ラベルが読みやすくなります。

セクションの余白

スライダーセクションの上下の余白（パディング）を調整できます。前後のセクションとのバランスを見ながら、適切な余白を設定してください。

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

「シンプル画像ビフォーアフター｜お手軽イメージ前後比較」を使って、さまざまなユースケースに対応する設定例を紹介します。自分のストアに合った設定の参考にしてください。

スキンケア・美容系

スキンケアや美容商品を販売するストアでは、商品の使用前後の肌の変化を効果的に伝えることが重要です。

Before ラベル: 「使用前」
After ラベル: 「使用後」
ラベル位置: 下部
ハンドルデザイン: 矢印
ポイント: ラベルを下部に配置することで、肌の変化が見やすい画像の上部を邪魔しません。矢印ハンドルを使うことで、初めて訪れたユーザーにもスライダーの操作方法が直感的に伝わります。

スキンケア商品の場合、同じ照明条件・同じアングルで撮影した画像を使用することが非常に重要です。撮影時には自然光の下で、できるだけ同じ時間帯に撮影することで、公平な比較画像を作成できます。

リフォーム・インテリア

リフォームやインテリア関連のストア・サービスページでは、施工前後の空間の変化をダイナミックに見せることがポイントです。

Before ラベル: 「施工前」
After ラベル: 「施工後」
ラベル位置: 上部
ハンドルデザイン: 丸
ポイント: リフォームの Before After では、部屋全体の変化を見せることが多いため、ラベルを上部に配置して画像の中心部分を広く見せます。丸型のハンドルはインテリア系のストアに馴染みやすく、洗練された印象を与えます。

リフォーム事例の場合、広角レンズで撮影すると部屋全体の変化が伝わりやすくなります。また、家具や小物の配置も含めたトータルコーディネートの変化を見せると、より訴求力の高い Before After になります。

写真加工・デザイン

写真加工サービスやデザインツールを提供するストアでは、オリジナル画像と加工後の画像を比較して、サービスの品質をアピールしましょう。

Before ラベル: 「オリジナル」
After ラベル: 「加工後」
ラベル位置: 上部
ハンドルデザイン: 線のみ
ポイント: 写真加工の比較では、画像そのものの品質が主役です。線のみのシンプルなハンドルデザインを使うことで、ハンドルが画像を邪魔せず、加工の仕上がりに集中してもらえます。

写真加工系の Before After では、色味の補正、レタッチ、背景処理など、細かな違いが見どころになります。高解像度の画像を使用し、ディテールの変化がわかるようにすると効果的です。

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

アプリを使わずに、テーマのコード編集で画像 Before After スライダーを実装したい方向けに、サンプルコードを紹介します。以下のコードは、HTML・CSS・JavaScript で構成されるシンプルな Before After スライダーです。

実装の流れ

テーマの Liquid ファイルに HTML を追加する
CSS を追加してスライダーのスタイルを定義する
JavaScript を追加してドラッグ＆タッチ操作を実装する

HTML を追加

テーマエディタから「テーマコードを編集」を開き、スライダーを表示したいテンプレートファイル（例: product.liquid や page.liquid）に以下の HTML を追加します。

<div class="ba-slider-container">
  <div class="ba-slider" id="baSlider">
    <div class="ba-slider__after">
      <img src="AFTER画像のURLをここに入力" alt="After" />
    </div>
    <div class="ba-slider__before" id="baBefore">
      <img src="BEFORE画像のURLをここに入力" alt="Before" />
    </div>
    <div class="ba-slider__handle" id="baHandle">
      <span class="ba-slider__handle-icon">&larr; &rarr;</span>
    </div>
    <div class="ba-slider__label ba-slider__label--before">Before</div>
    <div class="ba-slider__label ba-slider__label--after">After</div>
  </div>
</div>

BEFORE画像のURLをここに入力 と AFTER画像のURLをここに入力 の部分を、実際の画像 URL に置き換えてください。Shopify のメディアライブラリにアップロードした画像の URL を使用できます。

CSS を追加

テーマの CSS ファイル（base.css や theme.css など）に以下のスタイルを追加します。

.ba-slider-container {
  max-width: 800px;
  margin: 40px auto;
  padding: 0 16px;
}

.ba-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ba-slider img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.ba-slider__after {
  position: relative;
  width: 100%;
}

.ba-slider__before {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
}

.ba-slider__before img {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

.ba-slider__handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  background: #ffffff;
  z-index: 3;
  transform: translateX(-50%);
  cursor: ew-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ba-slider__handle-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #333333;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  letter-spacing: -2px;
}

.ba-slider__label {
  position: absolute;
  bottom: 16px;
  padding: 6px 16px;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  z-index: 4;
  pointer-events: none;
}

.ba-slider__label--before {
  left: 16px;
}

.ba-slider__label--after {
  right: 16px;
}

@media (max-width: 768px) {
  .ba-slider-container {
    margin: 24px auto;
  }

  .ba-slider__handle-icon {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .ba-slider__label {
    font-size: 12px;
    padding: 4px 12px;
    bottom: 12px;
  }
}

JavaScript を追加

テーマの JavaScript ファイル、またはテンプレートファイル内の <script> タグ内に以下のコードを追加します。マウスドラッグとタッチ操作の両方に対応しています。

document.addEventListener('DOMContentLoaded', function () {
  const slider = document.getElementById('baSlider');
  const before = document.getElementById('baBefore');
  const handle = document.getElementById('baHandle');

  if (!slider || !before || !handle) return;

  let isDragging = false;

  function getPositionX(e) {
    if (e.touches && e.touches.length > 0) {
      return e.touches[0].clientX;
    }
    return e.clientX;
  }

  function updateSlider(clientX) {
    const rect = slider.getBoundingClientRect();
    let x = clientX - rect.left;
    x = Math.max(0, Math.min(x, rect.width));
    const percent = (x / rect.width) * 100;

    before.style.width = percent + '%';
    handle.style.left = percent + '%';
  }

  // マウスイベント
  slider.addEventListener('mousedown', function (e) {
    isDragging = true;
    updateSlider(e.clientX);
    e.preventDefault();
  });

  document.addEventListener('mousemove', function (e) {
    if (!isDragging) return;
    updateSlider(e.clientX);
    e.preventDefault();
  });

  document.addEventListener('mouseup', function () {
    isDragging = false;
  });

  // タッチイベント
  slider.addEventListener('touchstart', function (e) {
    isDragging = true;
    updateSlider(getPositionX(e));
    e.preventDefault();
  });

  slider.addEventListener('touchmove', function (e) {
    if (!isDragging) return;
    updateSlider(getPositionX(e));
    e.preventDefault();
  });

  slider.addEventListener('touchend', function () {
    isDragging = false;
  });
});

コード実装の注意点

テーマのコード編集で Before After スライダーを実装する場合、以下の点に注意してください。

テーマのバックアップを取る

コードを編集する前に、必ずテーマのバックアップ（複製）を取っておきましょう。万が一、コードにエラーが発生した場合でも、バックアップから復元できます。

画像サイズを統一する

Before 画像と After 画像は、同じサイズ（幅・高さ）で用意してください。サイズが異なると、スライダーの表示が崩れる原因になります。

パフォーマンスに配慮する

画像は WebP 形式で保存し、適切なサイズにリサイズしてからアップロードしましょう。大きすぎる画像はページの読み込み速度を低下させます。推奨サイズは、幅 1200px 以下、ファイルサイズ 200KB 以下を目安にしてください。

複数のスライダーに対応する場合

上記のサンプルコードは 1 つのスライダー用です。ページ内に複数のスライダーを設置する場合は、各要素に固有の ID を設定し、JavaScript で複数のスライダーを初期化するように修正する必要があります。

テーマアップデートに注意

テーマをアップデートすると、追加したカスタムコードが上書きされて消えてしまう可能性があります。テーマアップデートの際は、カスタムコードのバックアップを忘れずに取っておきましょう。

運用のコツ

画像 Before After スライダーを効果的に運用するためのコツを紹介します。

画像サイズを揃える

Before 画像と After 画像は、必ず同じサイズ（幅 x 高さ）で用意しましょう。サイズが異なると、スライダーの境界線がずれたり、画像が歪んで表示されたりする原因になります。

撮影後に画像編集ソフトでトリミング・リサイズを行い、両方の画像のピクセル数を完全に一致させることをおすすめします。推奨の画像比率は 16:9 または 4:3 が一般的で、多くのデバイスできれいに表示されます。

同じアングルで撮影する

Before と After の撮影は、できるだけ同じアングル・同じ距離・同じ照明条件で行いましょう。撮影条件が異なると、商品の効果ではなく撮影環境の違いが目立ってしまい、公正な比較として信頼されにくくなります。

三脚を使って固定位置から撮影する、目印をつけて毎回同じ場所に被写体を置くなど、撮影時のルールを決めておくと、品質の安定した Before After 画像を効率的に作成できます。

ラベルを分かりやすくする

ラベルのテキストは、ユーザーが一目で内容を理解できるものに設定しましょう。英語の「Before / After」でも通じますが、日本語のストアであれば「使用前 / 使用後」「施工前 / 施工後」「導入前 / 導入後」など、日本語のラベルにすることでわかりやすさが向上します。

また、ラベルの文字色は画像の背景色に対してコントラストの高い色を選ぶと、視認性が高まります。暗い画像には白い文字、明るい画像には暗い文字を使うのが基本です。

よくある質問

Q: 画像 Before After スライダーは無料で導入できますか？

A: テーマのコード編集で実装する場合は無料で導入できます。ただし、HTML / CSS / JavaScript のコーディング知識が必要です。アプリを使う場合は月額料金が発生しますが、「シンプル画像ビフォーアフター｜お手軽イメージ前後比較」は 7 日間の無料体験期間があるため、まずは無料で試してみることができます。

Q: スマートフォンでもスライダーは動作しますか？

A: はい、動作します。「シンプル画像ビフォーアフター｜お手軽イメージ前後比較」アプリはタッチ操作に標準対応しており、スマートフォンやタブレットでも快適にスライダーを操作できます。さらに、モバイル用の画像を別途設定できるため、デバイスごとに最適化された表示が可能です。

Q: Before After スライダーはどのページに設置できますか？

A: アプリブロックに対応した Shopify テーマ（OS 2.0 以降）であれば、商品ページ、コレクションページ、固定ページ、ブログ記事ページなど、テーマエディタで編集可能なあらゆるページに設置できます。トップページに設置してストアの魅力を伝えたり、商品ページに設置して購入を後押ししたりと、目的に応じて柔軟に活用できます。

Q: 1 つのページに複数のスライダーを設置できますか？

A: はい、できます。テーマエディタでアプリブロックを複数追加することで、1 つのページに複数の Before After スライダーを設置できます。ただし、画像の読み込み枚数が増えるため、ページの読み込み速度に影響が出ないよう、画像サイズの最適化に注意してください。

Q: 画像の推奨サイズはありますか？

A: Before 画像と After 画像は同じサイズ（幅 x 高さ）で用意することが重要です。推奨サイズとしては、幅 1200px 程度、アスペクト比 16:9 または 4:3 が一般的です。ファイルサイズは 1 枚あたり 200KB 以下に圧縮すると、ページの読み込み速度を損なわずに十分な画質を維持できます。WebP 形式で保存すると、JPEG と同等の画質でファイルサイズを大幅に削減できます。

Q: 既存のテーマを変更せずにスライダーを導入できますか？

A: はい、アプリを使えばテーマのコードを一切変更せずに導入できます。「シンプル画像ビフォーアフター｜お手軽イメージ前後比較」はアプリブロックとしてテーマエディタから追加するだけなので、既存のテーマファイルに影響を与えません。アプリをアンインストールすれば、テーマは元の状態に戻ります。

まとめ

この記事では、Shopify ストアに画像 Before After スライダーを導入する方法について解説しました。最後に要点をまとめます。

Shopify の標準機能には画像 Before After スライダーは搭載されていないため、テーマのコード編集またはアプリの導入で実装する必要がある
画像 Before After スライダーは、商品の効果を直感的に訴求でき、コンバージョン率やユーザーエンゲージメントの向上に効果的
初めて導入する場合は、ノーコードで設定できるアプリから小さく試すのがおすすめ
**「シンプル画像ビフォーアフター｜お手軽イメージ前後比較」**は、日本語対応・直感的な操作・豊富なカスタマイズ機能を備えた Before After スライダーアプリ
月額 $5.99 で利用でき、7 日間の無料体験があるため、リスクなく効果を検証できる
画像の品質が成果を左右するため、同じアングル・同じ照明条件で撮影し、画像サイズを揃えることが重要
テーマのコード編集で実装する場合は、HTML / CSS / JavaScript の知識が必要で、テーマアップデート時の管理も必要