【Shopify】離脱率を防ぐポップアップ（モーダルウィンドウ）をプラグインを使わずに実装-2023

【Shopify】離脱率を防ぐポップアップ（モーダルウィンドウ）をプラグインを使わずに実装EC
2023.03.17

この記事はすぐ忘れる筆者の備忘録として書きます。

ついでに誰かのお役に立てればうれしいなぁ・・・

ということで、
Shopifyを運営していると気にしてくるのが「離脱率」。

そこでポップアップを導入したいがプラグインが英語しかない、使いづらい。
自力実装も調べてもあまり出てこない。


そういった経験を筆者自身がしたためいっそのこと自分で実装しよう！と思い、導入してみました。

ポップアップの機能

まずどんな機能が必要かをリストアップします。

  • セクションからポップアップを追加する
  • 好きなテキストで挿入するかバナー画像を挿入するか選べる
  • 更新の度に表示するか、初回アクセスの時だけ表示するか選択
  • 表示されるまでの時間

ざっくりとこんな感じでしょうか？

ではひとつひとつ解説していきます。

セクション追加でポップアップを追加

まずは、どのページでも実装できるようにセクション追加でポップアップが使えるように設定します。

ページカスタマイズでコード編集画面へ移動します。

左メニュー内の「セクション」⇒「新しいセクションを追加する」をクリック
liquidにチェックが付いていることを確認し、名前を付けて完了します。
（名前は分かりやすいものを付けましょう）

機能追加

次に作成したpopup.liquidに追加する機能schemaで記述します。

{% schema %}
{
  "name": {
    "ja": "ポップアップ"
  },
  "class": "index-section",
  "settings": [
    {
      "type": "textarea",
      "id": "popup_text",
      "label": {
        "ja": "本文(改行には<br>を使用すること)"
      },
      "default": {
        "ja": "default text. default text."
      }
    },
    {
       "type": "checkbox",
       "id": "img_enable",
       "label": "バナー画像を有効にする",
        "default": false
    },
    {
       "type": "image_picker",
       "id": "popup_banner",
       "label": "バナー画像"
    },
    {
       "type": "url",
       "id": "popup_url",
       "label": "バナーリンク先URL"
    },
    {
       "type": "checkbox",
       "id": "all_apper",
       "label": "常に表示する(チェックをはずすと初回のみ表示)",
        "default": true
      },
      {
        "type": "range",
        "id": "popup_time",
        "min": 0,
        "max": 60,
        "step": 1,
        "label": "表示するまでの時間(秒)",
        "default": 0
      }
  ],
  "presets": [
    {
      "name": {
        "ja": "ポップアップ"
      },
      "category": {
        "ja": "オリジナル"
      }
    }
  ]
}
{% endschema %}

これでおおよその機能は搭載できたかと思います。
実際にセクションを追加すると下図のような表示がされます。


ポップアップのデザイン

ポップアップのデザインはページのデザインに合わせたいと思いますので
あくまで一例としてご紹介いたします。

▼表示部分のhtml

<div class="popup_overlay">
  <div class="popup_btn_area">
    {% if section.settings.img_enable == true %}
      <div class="popup_banner">
        <a href="{{ section.settings.popup_url}}"><img src="{{ section.settings.popup_banner | img_url : 'master' }}"></a>
      </div>
    {%- endif -%}
    <p>{{ section.settings.popup_text }}</p>
    <a class="close_popup">×</a>

  </div>
</div>

▼表示部分のcss

{% style %}
  .popup_overlay{
      display:none;
      width:100%;
      height:100%;
      background: rgba(0,0,0,0.6);
      position:fixed;
      z-index:1001;
      top: 0;
      left: 0;
  }
  .popup_btn_area{
    max-width: 540px;
    width: 100%;
    text-align: center;
    height: 375px;
    position: relative;
    top: 25vh;
    left: calc(50% - 540px/2);
    background-color: #ffcb00;
    z-index: 1002;
    padding: 64px 53px;
  }
  .popup_btn_area .popup_banner{
    position:absolute;
    top:0;
    left:0;
    max-width:540px;
    width:100%;
    z-index:3;
  }
  .popup_btn_area .popup_banner a{
    display:block;
  }
  .popup_btn_area .popup_banner a img{
    width:100%;
  }
  .popup_btn_area .btns {
      margin-top: 45px;
      display: flex;
      justify-content: space-around;
      align-items: start;
  }
  .popup_btn_area .btns a {
      width: 50%;
      text-align: center;
  }
  .popup_btn_area .btns a:first-child {
      border-right: 1px solid #999;
  }
  .popup_btn_area p {
      font-size: 15px;
      margin-top: 5px;
  }  
  .title_popup {
      width: 324px;
  }
  .popup_btn_area a.close_popup {
      position: absolute;
      top: 22px;
      right: 22px;
      display:block;
      width:25px;
    height:25px;
    background:#000;
    color:#fff;
    padding:0 0 0 1px;
    border-radius:50%;
    font-size:25px;
    line-height:0.9;
      border: none;
      cursor: pointer;
    z-index:5;
  }
  .popup_btn_area .btns img {
      width: 48px;
  }
  @media screen and (max-width: 767px){
    .popup_btn_area {
        left: calc(50% - 90%/2);
        width: 90%;
        padding: 10vw 8vw;
    }
    .title_popup {
        width: 90%;
    }
    .popup_btn_area .btns img {
        width: 54px;
    }
    .btns>a:first-child>div {
        margin-right: 25px;
    }
    btns>a:last-child>div {
        margin-left: 25px;
    }    
  }
{% endstyle %}

これで見た目は完成です。

動き制御部分

実装する動作は下記の通りです。

  • クッキーによる初回セッションの判定
  • 初回のみ表示か常に表示させるか
  • 何秒後に表示させるか

クッキーの読込

jQueryを利用してクッキーの読込を行います。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>


スクリプト

動きのスクリプト全体

<script>
 {%- if section.settings.all_apper -%}
     $(function(){
       setTimeout(function(){
        $(".popup_overlay").show();
        $(".popup_btn_area a").click(function(){
          $(".popup_overlay").fadeOut();
        });
      },{{ section.settings.popup_time }} * 1000);
  });
    {%- else -%}
        const sessionKey = "accessed";
        const sessionValue = true;
      
      //sessionStorageにsessionKeyというデータの有無を判別
      if (!sessionStorage.getItem(sessionKey)) {
        //初回アクセス時の処理
          $(function(){
             setTimeout(function(){
              $(".popup_overlay").show();
              $(".popup_btn_area a").click(function(){
                $(".popup_overlay").fadeOut();
              });
            },{{ section.settings.popup_time }} * 1000);
        });
        sessionStorage.setItem(sessionKey, sessionValue);
      }
  {%- endif -%}
</script>

ここまでの記述で動作するかと思います。

解説は以上となります。
最後にまとめたコードを置いておきます。

要するに新規liquidファイルを作ったら下記コードをコピペして貼り付ければ作業終了です！

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<div class="popup_overlay">
  <div class="popup_btn_area">
    {% if section.settings.img_enable == true %}
      <div class="popup_banner">
        <a href="{{ section.settings.popup_url}}"><img src="{{ section.settings.popup_banner | img_url : 'master' }}"></a>
      </div>
    {%- endif -%}
    <p>{{ section.settings.popup_text }}</p>
    <a class="close_popup">×</a>

  </div>
</div>
<script>
 {%- if section.settings.all_apper -%}
     $(function(){
       setTimeout(function(){
        $(".popup_overlay").show();
        $(".popup_btn_area a").click(function(){
          $(".popup_overlay").fadeOut();
        });
      },{{ section.settings.popup_time }} * 1000);
  });
    {%- else -%}
        const sessionKey = "accessed";
        const sessionValue = true;
      
      //sessionStorageにsessionKeyというデータの有無を判別
      if (!sessionStorage.getItem(sessionKey)) {
        //初回アクセス時の処理
          $(function(){
             setTimeout(function(){
              $(".popup_overlay").show();
              $(".popup_btn_area a").click(function(){
                $(".popup_overlay").fadeOut();
              });
            },{{ section.settings.popup_time }} * 1000);
        });
        sessionStorage.setItem(sessionKey, sessionValue);
      }
  {%- endif -%}
</script>
{% style %}
  .popup_overlay{
      display:none;
      width:100%;
      height:100%;
      background: rgba(0,0,0,0.6);
      position:fixed;
      z-index:1001;
      top: 0;
      left: 0;
  }
  .popup_btn_area{
    max-width: 540px;
    width: 100%;
    text-align: center;
    height: 375px;
    position: relative;
    top: 25vh;
    left: calc(50% - 540px/2);
    background-color: #ffcb00;
    z-index: 1002;
    padding: 64px 53px;
  }
  .popup_btn_area .popup_banner{
    position:absolute;
    top:0;
    left:0;
    max-width:540px;
    width:100%;
    z-index:3;
  }
  .popup_btn_area .popup_banner a{
    display:block;
  }
  .popup_btn_area .popup_banner a img{
    width:100%;
  }
  .popup_btn_area .btns {
      margin-top: 45px;
      display: flex;
      justify-content: space-around;
      align-items: start;
  }
  .popup_btn_area .btns a {
      width: 50%;
      text-align: center;
  }
  .popup_btn_area .btns a:first-child {
      border-right: 1px solid #999;
  }
  .popup_btn_area p {
      font-size: 15px;
      margin-top: 5px;
  }  
  .title_popup {
      width: 324px;
  }
  .popup_btn_area a.close_popup {
      position: absolute;
      top: 22px;
      right: 22px;
      display:block;
      width:25px;
    height:25px;
    background:#000;
    color:#fff;
    padding:0 0 0 1px;
    border-radius:50%;
    font-size:25px;
    line-height:0.9;
      border: none;
      cursor: pointer;
    z-index:5;
  }
  .popup_btn_area .btns img {
      width: 48px;
  }
  @media screen and (max-width: 767px){
    .popup_btn_area {
        left: calc(50% - 90%/2);
        width: 90%;
        padding: 10vw 8vw;
    }
    .title_popup {
        width: 90%;
    }
    .popup_btn_area .btns img {
        width: 54px;
    }
    .btns>a:first-child>div {
        margin-right: 25px;
    }
    btns>a:last-child>div {
        margin-left: 25px;
    }    
  }
{% endstyle %}

{% schema %}
{
  "name": {
    "ja": "ポップアップ"
  },
  "class": "index-section",
  "settings": [
    {
      "type": "textarea",
      "id": "popup_text",
      "label": {
        "ja": "本文(改行には<br>を使用すること)"
      },
      "default": {
        "ja": "default text. default text."
      }
    },
    {
       "type": "checkbox",
       "id": "img_enable",
       "label": "バナー画像を有効にする",
        "default": false
    },
    {
       "type": "image_picker",
       "id": "popup_banner",
       "label": "バナー画像"
    },
    {
       "type": "url",
       "id": "popup_url",
       "label": "バナーリンク先URL"
    },
    {
       "type": "checkbox",
       "id": "all_apper",
       "label": "常に表示する(チェックをはずすと初回のみ表示)",
        "default": true
      },
      {
        "type": "range",
        "id": "popup_time",
        "min": 0,
        "max": 60,
        "step": 1,
        "label": "表示するまでの時間(秒)",
        "default": 0
      }
  ],
  "presets": [
    {
      "name": {
        "ja": "ポップアップ"
      },
      "category": {
        "ja": "オリジナル"
      }
    }
  ]
}
{% endschema %}
EC
ECサイトShopify
うららけをフォローする
うららけ
うらうら生活 -お父さんが子育てをしながら生活に役立つ情報を発信するブログ-

コメント

タイトルとURLをコピーしました