商品説明文内の画像クリック時に拡大ポップアップを表示する方法

# Shopifyサイト制作者向け情報 # Shopifyノウハウ

はじめに

ShopifyでECサイトを制作する際、商品ページのメインの商品画像と商品説明文内に挿入する画像を使い分けるケースが多くあります。
メインの商品画像は商品全体の魅力を伝える役割を持つ一方、説明文内の画像には以下のような独自の役割があります。

  • 使用方法やサイズ感の説明：実際に使っている様子や手に持った時のサイズ感
  • 細部のディテール紹介：素材の質感、縫製の様子、機能部分のクローズアップ
  • 比較・対比の表現：色違いやサイズ違いの並列表示、他商品との比較
  • 注意事項の視覚的説明：取扱方法や組み立て手順の図解

このように用途によって掲載場所を使い分ける方法はAmazonなど大手のECサイト・ECモールでも一般的に使われていますが、Shopifyの標準機能では商品説明文内の画像をクリックしても拡大表示がされません。

しかし商品の詳細な部分や使用方法などを画像で説明する際、小さな画像ではエンドユーザーに伝わりにくい場合も。
特にアパレルや雑貨、精密機器、化粧品などを扱うストアでは、画像の拡大表示機能があることで、エンドユーザーにより詳細な商品情報を提供でき、購入の決め手となることも多いでしょう。

そこで本記事では、jQueryとMagnific Popupというライブラリを使って、商品説明文内の画像をクリックした際に自動で拡大表示するポップアップ機能を実装する方法をご紹介します。
コーディングスキルに自信のない方でもコピペで簡単に実装できるようまとめていますので、ぜひ最後までご覧ください。

実装方法

1. 「theme.liquid」でjQueryおよびJavaScriptを読み込ませる

ポップアップの表示に使用するjQueryやJavaScriptを読み込むため、まず「theme.liquid」の</head>直前に下記を追加します。

<!-- Magnific Popup CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">

次に同ファイルの</body>直前に下記を追加します。

<!-- jQuery（必要） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Magnific Popup JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

これでポップアップを実装するための準備が整いました。

2. 「main-product.liquid」にJavaScriptのコードを追加

「main-product.liquid」の</section>直前に、下記JavaScriptとポップアップのスタイルを調整するためのCSSを追加します。

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 商品説明内の画像を取得
        var productDescriptionImages = document.querySelectorAll('.product__description img');
        
        productDescriptionImages.forEach(function(image) {
        // 画像に "popup" クラスを付与
            image.classList.add('popup');
            // 画像リンクとしてsrcをラップする（Magnific Popupはリンク要素で動作するため）
            var wrapper = document.createElement('a');
            wrapper.href = image.src;
            wrapper.classList.add('image-popup');
            image.parentNode.insertBefore(wrapper, image);
            wrapper.appendChild(image);
        });

        // Magnific Popupの設定
        $('.image-popup').magnificPopup({
            type: 'image',
            closeBtnInside: true,  // ×ボタンを画像内に表示
            removalDelay: 300,     // ポップアップが閉じるときの遅延（アニメーションのため）
            mainClass: 'mfp-fade', // フェードアニメーション
            fixedContentPos: true  // コンテンツが固定位置にある
        });
    });
</script>

{%- style -%}
    .popup {
        cursor: pointer;
    }
    .mfp-close {
        width: 35px !important;
        height: 35px !important;
        color: #5c5c5c !important;
        font-size: 30px;
        position: absolute;
        top: 50px !important;
        right: 12px !important;
        background: none;
        border: none;
        cursor: pointer !important;
        z-index: 1050 !important; /* z-indexをより高く設定 */
        opacity: 1 !important;    /* 不透明度を明示的に設定 */
        pointer-events: auto !important; /* ポインターイベントを確実に有効化 */
    }
{% endstyle %}

（画像はクリックで拡大します）


以上により、商品説明のHTML内に挿入された画像をクリックすると、自動で画面上にポップアップが表示されるようになります。
今回は、右上の×ボタンを押せばポップアップが閉じる仕様にしました。

まとめ

いかがでしたが？
このポップアップ機能を実装することでサイトの利便性が上がるだけでなく、詳細な商品情報を提供することで購入への不安を軽減でき、結果としてCV率の改善が見込めます。
また、大手ECサイトに多く備わっている機能を設けることで、サイトの信頼性の向上にも繋がります。

画像の見せ方を少し工夫するだけで、より良いショッピング体験をお客様に提供することができます。
プログラミング経験の少ない方でもすぐに実装る方法ですので、Shopifyでサイト制作をしている方はぜひお試しください！

売上最大化に向けて戦略立案から構築・運用までワンストップでサポート

EC運用でお悩みの方はお任せください！

お問い合わせはこちら
一覧に戻る