Shopifyにビフォーアフタースライダーを追加する方法

歯のホワイトニングキット、洗車サービス、あるいはLightroomのプリセットセットを販売していると想像してみてください。見込み客が購入を決断する決め手は何でしょうか。こうした商品では、人々はあなたの約束以上のものを求めています。実際の結果を見たいのです。

ビフォーアフタースライダーを使えば、買い物客は自分が何にお金を払っているのかを正確にイメージできます。ハンドルをドラッグして変化を見れば、価値はおのずと伝わります。これは信頼を築き、競争の激しい市場で商品を際立たせる最も手軽な方法のひとつです。

Shopifyで販売している場合、注意点があります。デフォルトのテーマには、ビフォーアフターのブロックが標準では含まれていないのです。追加するには3つの方法があります。Shopifyアプリストアからアプリをインストールする、無料のノーコードウィジェットを埋め込む、またはテーマファイルにスライダーをカスタムコーディングする、のいずれかです。本ガイドでは、閲覧者を購入者へと変えるために、この3つの方法すべてを解説します。

方法1：Shopifyアプリストアの拡張機能をインストールする

ほとんどのマーチャントがまず思いつくのは、Shopifyアプリストアを開いて「ビフォーアフタースライダー」を検索することでしょう。多くの選択肢が見つかり、そのほとんどはネイティブアプリブロックとしてインストールされます。アプリを追加すると、スライダーがテーマエディタ内にセクションまたはブロックとして表示され、商品ページに配置できるようになります。この手軽さが魅力です。

ただし、2つのコストが伴います。

1つ目は、ストアオーナーが「アプリ税」と呼ぶものです。ほぼすべての専用スライダーアプリは月額サブスクリプション制で、ひとつのインタラクティブ機能につき、通常は月額1ドルから10ドル程度かかります。こちらにスライダー、あちらにカウントダウンタイマーと追加していくと、1年後にはかつて買い切り型のアドオンだった機能に、かなりの金額を支払っていることになります。 

2つ目のコストは速度です。フロントエンドのビジュアルアプリは、設置したすべてのページに独自のサードパーティ製JavaScriptを挿入することがよくあります。いくつかインストールすると、商品ページは大量の外部スクリプトを抱え込み、ページ速度が低下しかねません。これはコンバージョン率とSEOの両方に直接影響します。

これらのトレードオフを検討したうえで、それでもネイティブアプリの方法を選びたい場合の設定手順は次のとおりです。

1. Shopifyアカウントにログインした状態で、Shopifyアプリストアに移動します。「ビフォーアフタースライダー」を検索します。

2. アプリを選択し、「インストール」をクリックしてストアに追加します。

3. アプリの指示に従ってセットアップします。ほとんどのアプリは使用前に支払いの設定が必要なため、テーマに追加する前にこの作業を済ませておく必要があります。

方法2：無料のノーコードスライダーウィジェットを使う（おすすめ）

月額サブスクリプションなしで、カスタマイズ可能かつレスポンシブな比較スライダーが欲しいなら、最適な方法は無料の埋め込みウィジェットです。Jotformのビフォーアフタースライダーは、まさにこの用途のために作られています。ビジュアル操作で設定し、埋め込みコードをひとつコピーして、Shopifyのページに貼り付けるだけです。インストールするアプリも、継続的な料金もありません。

このウィジェットは、テーマにスクリプトを挿入するのではなくJotformのサーバーから読み込まれるため、ストアのコードを軽量に保ち、ページ速度の維持に役立ちます。水平または垂直の切り替え表示を設定したり、ドラッグ・クリック・ホバーのいずれかのインタラクションを選んだり、ラベルやキャプションを追加したり、さらには最大3組の比較ペアをコンパクトなカルーセルにまとめたりできます。

追加方法は次のとおりです。

1. Jotformのビフォーアフタースライダーのページで、ビフォーとアフターの画像を追加し、各ペアにラベルとキャプションを記入します。JotformはURLで画像を読み込むため、写真がまだオンライン上にない場合は、まずShopifyの「設定 > ファイル」からアップロードし、各画像のURLをコピーしてください。Jotform上で直接画像を追加したい場合は、画像アップロードのオプションを選ぶこともできます。

2. 切り替え表示の方向、区切り線の位置、色、サイズをストアに合わせてカスタマイズします。

3. Jotformが生成した埋め込みコードをコピーします。「公開」タブの「コードをコピー」ボタンをクリックすれば完了です。

4. Shopifyのテーマエディタで、スライダーを配置したい商品またはページのテンプレートを開き、「セクションを追加」（または「ブロックを追加」）をクリックして、「カスタムLiquid」を選びます。埋め込みコードを貼り付けて、「保存」をクリックします。

方法3：Shopifyのテーマコードを編集する

外部アプリや埋め込みにまったく触れたくない場合は、テーマ内に直接比較スライダーを構築することもできます。これは最も自由度が高く、負荷も最小限の方法ですが、同時に最も壊れやすい選択肢でもあります。

この構築は3つの要素で成り立っています。2つの画像を収めるHTML、それらを重ねて切り抜くCSS、そして訪問者がドラッグするのに合わせて区切り線を動かすJavaScriptです。これらすべてを配置する最もシンプルな場所は、ひとつのカスタムLiquidブロックです。こうすればテンプレートファイルを直接編集する必要がありません。

手順は次のとおりです。

1. 2つの画像URLを含むマークアップを追加します。「before」画像が上に配置されて切り抜かれ、「after」画像がその下に配置されます。

html<div class="ba-slider" id="baSlider">  <img src="BEFORE_IMAGE_URL" alt="Before" class="ba-img ba-before" id="baBefore">  <img src="AFTER_IMAGE_URL" alt="After" class="ba-img">  <div class="ba-handle" id="baHandle"></div></div>

2. CSSを追加します。絶対配置によって画像を重ね、clip-pathによって最初に「before」画像の半分が表示されます。また、touch-action: none を設定することで、スマートフォンでドラッグしている間にページがスクロールしてしまうのを防ぎます。

注意点：これは手こずる選択肢です。括弧の記述ミスや、テーマ全体に漏れ出すスタイルによって、モバイルレイアウトが崩れたり、さらに悪い場合はチェックアウトの流れに支障をきたすことがあります。タッチ操作はデスクトップのブラウザだけでなく、実機で複数のデバイスにわたってテストする必要があり、あらゆるバグと今後の修正はすべて自分で対応することになります。このトレードオフがウィジェットよりも割に合わないと感じるなら、オプション2をおすすめします。

スマートでノーコードなウィジェットでShopifyストアを強化しよう

ビフォーアフタースライダーは追加する価値がありますが、ストアに必要なインタラクティブ要素はそれだけではないのが普通です。Shopifyが最高のeコマースサイトビルダーの一角を占めている理由の一つは、拡張がとても簡単なことにあり、適切なアドオンこそが機能的なストアを洗練されたものへと変えてくれます。落とし穴は、それぞれに別々の月額サブスクリプションを支払うことで、そうした費用は守ろうとしている利益をじわじわと削っていきます。

だからこそ、無料でホスト型のウィジェットを選ぶべきなのです。Jotformのビフォーアフタースライダーのようなツールなら、利益はそのままに、ページは高速に読み込まれ、買い物客のエンゲージメントも保てます。しかも同じディレクトリは、画像の比較だけにとどまらずはるかに多くをカバーしています。

Shopifyストアで検討する価値のある、その他のJotformウィジェットには次のようなものがあります

• フラッシュセールや新商品発売に緊急感を加えるカウントダウンタイマー
• よくある商品の疑問をページ上で直接解決するFAQウィジェット
• 年齢制限のある商品向けの年齢確認
• 長い商品ページのナビゲーションを楽にするトップへ戻るボタン

Jotformのウェブサイトウィジェットディレクトリを一通り見て、あなたのストアに合うものを探してみてください。さらに、JotformとShopifyの連携を通じて、フォームやデータを直接つなぐこともできます。最初のノーコードウィジェットを無料で試して、ほんの数分でセットアップを完了させましょう。