ShopifyのストアにLINEID連携できるPOPUPを設置する方法
はじめに
ECサイト運営において、顧客との接点をいかに増やすかは売上アップの重要な鍵です。特にLINEは、日本国内で月間8,600万人以上が利用する強力なコミュニケーションチャネル。にもかかわらず、「友だち」にはなっていてもShopifyと連携していないユーザーが多く、せっかくのリーチ機会を最大化できていないケースも少なくありません。本記事では、StoreCRMにおけるLINE連携の成約率を高めるための「連携POPUP設置」施策の実装方法を詳しく解説していきます。
本記事では無料テーマのDawnテーマにて解説をおこないます。
有料テーマやカスタマイズがはいったテーマはファイル構成が異なる場合がありますのでその際はStoreCRMカスタマーサポートに問い合わせいただくことで、実装代行等可能です。
お問い合わせフォームからご気軽にご相談ください。
【注意事項】
本記事で使用しているLINEアイコンは、LINEヤフー株式会社の権利物になります。
実際にストアで使用する際は以下の利用規約を確認し、ルールを守ったうえで使用してください。
【LINEアイコン利用規約】
https://www.line.me/ja/logo
ストアページにLINE連携POPUPを設置する
本項目のゴール
まずは今回実装する、LINE連携POPUPを確認しましょう。
テーマにセクションを追加する
➀[Shopify管理画面]>[オンラインストア]>[テーマ]からテーマ一覧画面を開きます。編集するテーマ右側にある[・・・]>[コードを編集]を選択します。
➁ [sections]フォルダを開き、[新しいセクションを追加する]を押下します。
③section作成画面が出てくるので、任意の名前を入力して[完了]ボタン押下します。
④作成したセクションに以下のコードを貼り付けて、[保存]を押下します。
{% comment %}
Section: LINE Connect Popups
テーマエディタで「セクションを追加」→「LINE Connect Popups」を選択してください。
{% endcomment %}
{% if customer %}
<style>
.popup-corner {
position: fixed;
padding: 10px 15px;
border-radius: 5px;
border: none;
display: none;
z-index: 1000;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.popup-corner--top-left { top: 20px; left: 20px; }
.popup-corner--top-right { top: 20px; right: 20px; }
.popup-corner--bottom-left { bottom: 20px; left: 20px; }
.popup-corner--bottom-right{ bottom: 20px; right: 20px; }
.pop-icon {
width:35px;
height: 35px;
margin-right: 10px;
}
.line-subscribe {
display:flex;
align-items: center;
}
.popup-close {
position: absolute;
top: -8px;
right: -8px;
border: none;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 15px;
background-color: white !important;
color: black !important;
line-height: 20px;
text-align: center;
cursor: pointer;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
</style>
<div data-section-id="{{ section.id }}">
{% assign corners = 'top-left,top-right,bottom-left,bottom-right' | split: ',' %}
{% for pos in corners %}
{% assign enable_key = 'enable_' | append: pos %}
{% assign text_key = 'text_' | append: pos %}
{% assign image_key = 'image_' | append:pos %}
{% assign bg_key = 'bg_color_' | append: pos %}
{% assign text_color_key = 'text_color_' | append: pos %}
<style>
.popup-corner--{{ pos }} {
background-color: {{ section.settings[bg_key] }};
}
.popup-corner--{{ pos }} button {
background-color: {{ section.settings[bg_key] }};
border: none;
color: {{ section.settings[text_color_key] }};
cursor: pointer;
}
</style>
{% if section.settings[enable_key] %}
<div class="popup-corner popup-corner--{{ pos }}" id="popup-{{ pos }}">
<button class="popup-close" aria-label="閉じる">×</button>
<button class="line-subscribe" data-action="line-subscribe">
<img class="pop-icon" src="{{ section.settings[image_key] | img_url }}" alt="" />
{{ section.settings[text_key] }}
</button>
</div>
{% endif %}
{% endfor %}
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// URLにエラーパラメータがあるか
var params = new URLSearchParams(window.location.search);
var hasError = params.has('line_login_error');
var corners = ['top-left','top-right','bottom-left','bottom-right'];
// エラー発生時は過去の閉じたフラグをクリア
if (hasError) {
corners.forEach(function(pos) {
localStorage.removeItem('corner_closed_' + pos);
});
}
// 初期表示
corners.forEach(function(pos) {
var key = 'corner_closed_' + pos;
var popup = document.getElementById('popup-' + pos);
if (!popup) return;
// エラー時は always 表示、通常は localStorage フラグなしなら表示
if (hasError || !localStorage.getItem(key)) {
popup.style.display = 'block';
}
});
// 閉じるボタン
document.querySelectorAll('.popup-close').forEach(function(btn) {
btn.addEventListener('click', function(e) {
e.preventDefault();
var popup = e.target.closest('.popup-corner');
if (!popup) return;
var pos = popup.className.match(/popup-corner--([\w-]+)/)[1];
popup.style.display = 'none';
localStorage.setItem('corner_closed_' + pos, '1');
});
});
// LINE登録ボタン
document.querySelectorAll('[data-action="line-subscribe"]').forEach(function(btn) {
btn.addEventListener('click', function(e) {
e.preventDefault();
var popup = e.target.closest('.popup-corner');
if (!popup) return;
var pos = popup.className.match(/popup-corner--([\w-]+)/)[1];
if (window.storecrm && typeof window.storecrm.lineSubscribe === 'function') {
try {
var result = window.storecrm.lineSubscribe();
// Promise対応
if (result && typeof result.then === 'function') {
result.then(function() {
popup.style.display = 'none';
localStorage.setItem('corner_closed_' + pos, '1');
})
.catch(function(err) {
console.error('LINE登録エラー:', err);
// エラー時はフラグクリア（念のため）
localStorage.removeItem('corner_closed_' + pos);
});
} else {
// 同期実装の場合、エラーがないなら閉じる
if (!hasError) {
popup.style.display = 'none';
localStorage.setItem('corner_closed_' + pos, '1');
} else {
// 念のためフラグクリア
localStorage.removeItem('corner_closed_' + pos);
}
}
} catch (err) {
console.error('lineSubscribe呼び出し中に例外:', err);
localStorage.removeItem('corner_closed_' + pos);
}
}
});
});
});
</script>
{% endif %}
{% schema %}
{
"name": "LINE Connect Popups",
"settings": [
{"type":"checkbox","id":"enable_top-left","label":"左上を有効化","default":false},
{"type":"text","id":"text_top-left","label":"左上コンテンツ","default":"LINE連携"},
{"type":"image_picker","id":"image_top-left","label":"左上画像を選択"},
{"type":"color","id":"bg_color_top-left","label":"左上背景色","default":"#000000"},
{"type":"color","id":"text_color_top-left","label":"左上文字色","default":"#000000"},
{"type":"checkbox","id":"enable_top-right","label":"右上を有効化","default":false},
{"type":"text","id":"text_top-right","label":"右上コンテンツ","default":"LINE連携"},
{"type":"image_picker","id":"image_top-right","label":"右上画像を選択"},
{"type":"color","id":"bg_color_top-right","label":"右上背景色","default":"#000000"},
{"type":"color","id":"text_color_top-right","label":"右上文字色","default":"#000000"},
{"type":"checkbox","id":"enable_bottom-left","label":"左下を有効化","default":false},
{"type":"text","id":"text_bottom-left","label":"左下コンテンツ","default":"LINE連携"},
{"type":"image_picker","id":"image_bottom-left","label":"左下画像を選択"},
{"type":"color","id":"bg_color_bottom-left","label":"左下背景色","default":"#000000"},
{"type":"color","id":"text_color_bottom-left","label":"左下文字色","default":"#000000"},
{"type":"checkbox","id":"enable_bottom-right","label":"右下を有効化","default":false},
{"type":"text","id":"text_bottom-right","label":"右下コンテンツ","default":"LINE連携"},
{"type":"image_picker","id":"image_bottom-right","label":"右下画像を選択"},
{"type":"color","id":"bg_color_bottom-right","label":"右下背景色","default":"#000000"},
{"type":"color","id":"text_color_bottom-right","label":"右下文字色","default":"#000000"}
],
"presets": [{"name": "LINE Connect Popups"}]
}
{% endschema %} テーマに作成したセクションを追加する
➀[Shopify管理画面]>[オンラインストア]>[テーマ]からテーマ一覧画面を開きます。編集するテーマ右側にある[テーマカスタマイズ]を選択します。
②任意のページを開いてセクションの追加をおこないます。特定のぺージのみに表示したい場合は[テンプレート]にセクションを追加、全頁で適用したい場合は[フッター]など全頁にまたがる要素にセクションを追加します。
③POPUPに表示するコンテンツを設定します。右上、右下、左上、左下から任意の場所を選択することが可能です。設定後[保存する]を押下します。
④ストアにログインした状態で、連携POPUPが正しく表示されることを確認する。
※未ログイン状態では表示されないので注意
※連携をおこなうか×で削除するとローカルストレージのデータを消さない限り表示されなくなります
まとめ
ShopifyとLINEを連携することで強力な施策をいくつも打てるようになりますが、LINE連携操作にひと手間あるのがボトルネックとなっています。POPUPを導入することでマイページ以外からも連携設定をおこなうことができるようになり、連携への心理的障壁が低くなります。
LINE施策をおこないたいけど連携数が伸びないという方は、ぜひStoreCRMでPOPUP連携をはじめてみてください。
その他のノウハウ紹介
