【Shopify】テーマカスタマイズ：訪問時にポップアップを表示する

本記事では、テーマカスタマイズの一例として、訪問時にポップアップを表示するシンプルな方法について解説します。
テーマはDawn 15.2.0を想定していますが、他のテーマでも応用可能かと思います。

カスタマイズ手順

layout/theme.liquid に修正を加えていきます。

styleの追加

まず、以下のコードを </head> タグの直前に追加します。このコードで、ポップアップのデザインを調整します。

<style>
  #popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background-color: white;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  #popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }
</style>

HTMLの追加

次のHTMLコードを </body> タグの直前に追加します。このコードで、ポップアップのコンテンツが表示されます。

<div id="popup-overlay"></div>
<div id="popup">
  <p>ようこそ！Shopifyストアへ</p>
  <button id="popup-close">閉じる</button>
</div>

JavaScriptの追加

最後に、以下のJavaScriptコードを </body> タグの直前（さきほどのHTMLコードの直下）に追加します。このコードで、ポップアップを表示するタイミングや閉じるボタンの動作を制御します。

<script>
  document.addEventListener("DOMContentLoaded", function () {
    showPopup();

    function showPopup() {
      const popup = document.getElementById("popup");
      const overlay = document.getElementById("popup-overlay");

      // ポップアップを表示
      popup.style.display = "block";
      overlay.style.display = "block";

      // 閉じるボタンのイベントリスナー
      document.getElementById("popup-close").addEventListener("click", function () {
        popup.style.display = "none";
        overlay.style.display = "none";
      });
    }
  });
</script>

実際に動作したときのポップアップがこちらです。サイトにアクセスしたタイミングで表示されます。

まとめ

ぜひ本記事を参考に、Shopifyテーマのカスタマイズにチャレンジしてみてください。今後もShopify関連のTipsを掲載していきます。