Shopifyで画像ビフォーアフターを表示できるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2026/03/26

はじめに

Shopify は、誰でも簡単にネットショップを開設・運営できる EC プラットフォームです。Shopify アプリを追加することで、ストアにさまざまな機能を追加できます。

「シンプル画像ビフォーアフター｜お手軽イメージ前後比較」は、Before/After 画像をスライダーで並べて比較できるアプリです。お客様がスライダーをドラッグするだけで、商品の効果や変化がひと目で分かります。スキンケア、リフォーム、写真加工など、ビフォーアフターが伝わる商品にぴったりです。

料金

プラン名: Basic Plan
月額: $5.99/月
無料期間: インストールから 7 日間、無料でお試しいただけます
年払い: 年払いで実質 2 ヶ月分無料でお得にご利用いただけます

アプリストア

アプリストアはこちら

シンプル画像ビフォーアフター｜お手軽イメージ前後比較のメイン画像

「シンプル画像ビフォーアフター｜お手軽イメージ前後比較」でできること

「シンプル画像ビフォーアフター｜お手軽イメージ前後比較」を使えば、Before/After 画像をスライダーで並べて比較できます。PC 用・モバイル用の画像を個別に設定でき、ハンドルデザインは 3 種類から選べます。ラベルの位置や色、フォントサイズもテーマエディタから自由にカスタマイズ可能。コーディング不要で、ワンクリックでテーマに追加できます。

シンプル画像ビフォーアフター｜お手軽イメージ前後比較のメイン画像

特徴

ドラッグ＆タッチ操作で Before/After 画像をスライダーで比較できます。
PC 用とモバイル用の画像を個別に設定できます。
ハンドルデザインを 3 種類（矢印・丸・線のみ）から選べます。
ラベルの位置・色・フォントサイズをテーマエディタからカスタマイズできます。
ワンクリックでテーマに追加。コーディング不要です。

Before/After 画像を設置できる

ストアの商品ページにBefore/After画像をスライダーで設置できます。お客様がスライダーをドラッグするだけで、商品の効果や変化をひと目で確認できます。

Before/After画像をスライダーで設置した様子

ハンドルデザインやラベルをカスタマイズできる

ハンドルのデザインは「矢印あり」「シンプルな丸」「縦線のみ」の 3 種類から選べます。ラベルの表示・非表示、位置（上・中央・下）、テキスト、色もお好みに合わせて設定できます。

ハンドルデザインやラベルのカスタマイズ画面

ノーコードで見た目をカスタマイズできる

テーマエディタから、文字の大きさ・色・背景色、余白、スライダーの初期位置など、さまざまな見た目の設定をノーコードで変更できます。追加の CSS を使えば、さらに細かいカスタマイズも可能です。

テーマエディタでの見た目カスタマイズ画面

1 クリックでテーマに追加できる

アプリの管理画面からテーマを選んで「テーマに追加」をクリックするだけ。面倒な設定なしで、すぐにストアに反映できます。

1クリックでテーマに追加する画面

アプリのインストール

アプリストアはこちら

料金

プラン名: Basic Plan
月額: $5.99/月
無料期間: インストールから 7 日間、無料でお試しいただけます
年払い: 年払いで実質 2 ヶ月分無料でお得にご利用いただけます

インストール手順

1. Shopify 管理画面の左下にある「設定」をクリック

Shopify 管理画面の左下にある「設定」をクリックします

2. 「アプリと販売チャネル」をクリックし、「Shopify App Store」へ移動

「アプリ」をクリックし、画面上部の「Shopify App Store」へ移動します

3. 検索窓に「シンプル画像ビフォーアフター」と入力し、表示されたアプリをクリック

検索窓にシンプル画像ビフォーアフターと入力

4. アプリ詳細画面で「インストール」をクリック

アプリ詳細画面で「インストール」をクリック

5. 権限の確認画面が表示されるので内容を確認し、「インストール」を完了

権限の確認画面で「インストール」をクリック

インストールが完了すると、アプリの管理画面が表示されます。
アプリの管理画面の表示

アプリブロックをテーマに追加

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

アプリの管理画面からワンクリックでテーマにブロックを追加できます。

1. アプリの管理画面を開く

アプリをインストールすると、自動的に管理画面が表示されます。

アプリの管理画面の表示

2. 「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリック

プルダウンからテーマを選択し、「テーマに追加」ボタンをクリックします。

テーマ選択のプルダウンと「テーマに追加」ボタン

3. テーマエディタが開いたら、表示位置や設定を確認して「保存する」をクリック

テーマエディタが自動的に開きます。ブロックの位置や設定を確認し、問題なければ「保存する」をクリックしてください。

テーマエディタでブロックが追加された状態と「保存する」ボタン

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

任意のページに設置したい場合は、手動でテーマに追加します。

1. Shopify 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開く

2. テーマエディタ上部のプルダウンから、追加したいページに移動

追加したいページに移動

3. 「セクションを追加」または「ブロックを追加」をクリック

ブロックを追加したい位置で「セクションを追加」または「ブロックを追加」をクリックします。

ブロックを追加したい位置で「セクションを追加」または「ブロックを追加」をクリック

4. 「アプリ」タブから「シンプル画像ビフォーアフター｜お手軽イメージ前後比較」を選んで追加

アプリ一覧から「シンプル画像ビフォーアフター｜お手軽イメージ前後比較」を選択します。

「シンプル画像ビフォーアフター｜お手軽イメージ前後比較」を選択

5. 表示を確認し、問題なければ「保存する」をクリック

ブロックが追加されたことを確認し、「保存する」をクリックしてください。

ブロックが追加された状態で「保存する」ボタンを示した画面

ビフォーアフターブロックのカスタマイズ

テーマエディタからブロックをクリックすると、設定パネルが表示されます。ここでは各設定項目について説明します。

コンテンツ設定

ビフォーアフター画像の基本的な内容を設定します。

設定項目	説明
Before 画像	スライダーの左側に表示する「Before（変更前）」の画像を設定します。After 画像と同じサイズの画像を使用してください。
After 画像	スライダーの右側に表示する「After（変更後）」の画像を設定します。Before 画像と同じサイズの画像を使用してください。
ラベルを表示	Before / After のラベルテキストを画像上に表示するかどうかを切り替えます。ラベルがあるとお客様にとって分かりやすくなるので、表示がおすすめです。
Before ラベル	Before 側に表示するラベルのテキストを変更できます。デフォルトは「Before」です。「使用前」「施工前」など、商品に合わせた文言に変更すると効果的です。
After ラベル	After 側に表示するラベルのテキストを変更できます。デフォルトは「After」です。「使用後」「施工後」など、商品に合わせた文言に変更すると効果的です。
ラベルの位置	ラベルの表示位置を「下」「上」「中央」から選べます。画像のデザインに合わせて、見やすい位置を選んでください。

コンテンツ設定の設定スキーマ

モバイル画像設定

モバイル端末向けの画像を個別に設定できます。設定しない場合は、PC 用の画像がそのまま使用されます。

設定項目	説明
Before 画像（モバイル）	モバイル端末で表示する Before 画像を設定します。After 画像（モバイル）と同じサイズの画像を使用してください。スマートフォンで見やすい縦長の画像を設定すると効果的です。
After 画像（モバイル）	モバイル端末で表示する After 画像を設定します。Before 画像（モバイル）と同じサイズの画像を使用してください。

モバイル画像設定の設定スキーマ

スライダー設定

スライダーの動作やデザインに関する設定です。

設定項目	説明
スライダーの初期位置（%）	ページを開いたときのスライダーの初期位置を設定します。10〜90% の範囲で調整でき、デフォルトは 50%（中央）です。Before を多く見せたい場合は大きい値、After を多く見せたい場合は小さい値に設定してください。
ハンドルのデザイン	スライダーのハンドル（つまみ部分）のデザインを選べます。「矢印あり」は左右に矢印アイコンが表示されます。「シンプルな丸」は小さな丸だけの控えめなデザインです。「縦線のみ」は線だけのミニマルなデザインで、画像に集中してもらいたい場合に便利です。

文字設定

ラベルの見た目に関する設定です。「ラベルを表示」がオンの場合に反映されます。

設定項目	説明
文字の大きさ	ラベルのフォントサイズを 10〜24px の範囲で調整できます。デフォルトは 14px です。
文字の色	ラベルの文字色を設定します。デフォルトは白（#ffffff）です。背景色とのコントラストを考慮して選んでください。
背景色	ラベルの背景色を設定します。デフォルトは黒（#000000）です。画像の色味に合わせて調整すると、ラベルが見やすくなります。

レイアウト設定

ブロック全体の余白に関する設定です。

設定項目	説明
上部余白	ブロックの上側の余白を 0〜80px の範囲で調整できます。前後のコンテンツとの間隔を調整したい場合に便利です。
下部余白	ブロックの下側の余白を 0〜80px の範囲で調整できます。

追加設定（カスタム CSS）

テーマエディタの設定項目だけでは対応できない細かなスタイル調整を行いたい場合に、CSS を直接入力できます。

設定項目	説明
追加の CSS	カスタム CSS を入力できます。入力した CSS はこのブロック内のみに適用されるため、他のブロックやページに影響しません。

その他の設定スキーマ