こんにちは！Shopifyエンジニアのりょうま(@ryoo_black)です。
今回はShopifyで簡単に追従Lineバナーを作る方法を解説します。
簡単にコピペで実装できるようにしていますので、コードを触るのが苦手な方でもすぐ実装できますので、是非参考にしてみてください！
目次
完成イメージ
今回は以下のような追従Lineバナーを実装します。
フッターまで到達すると消える仕様になっています。
実装方法
管理画面の「オンラインストア」の「テーマ」から「3点リーダー」をクリックし「コードを編集」を選択してください。
「{% style %}」と検索してコード挿入箇所を見つけてください。
{% style %}の直下に以下のコードを挿入してください。
.line-btn {
position: fixed;
bottom: 30px;
right: 0;
z-index: 9999;
width: 200px;
height: auto;
transition: opacity 0.5s ease-out;
}
.line-btn img {
width: 100%;
height: 100%;
object-fit: contain;
}
次に一番下まで移動し</body>の直前に以下のコードを挿入してください。
<div class="line-btn">
<!-- 任意のリンク先を入れてください -->
<a href="https://lin.ee/9atQsTo" target="_blank">
<img src="" alt="lineでお友達追加">
</a>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const button = document.querySelector('.line-btn');
const footer = document.querySelector('footer');
function updateButtonOpacity() {
const windowBottom = window.scrollY + window.innerHeight;
const footerTop = footer.offsetTop;
if (windowBottom > footerTop) {
let opacity = 1 - (windowBottom - footerTop) / 100;
opacity = Math.max(opacity, 0);
button.style.opacity = opacity;
} else {
button.style.opacity = 1;
}
}
window.addEventListener('scroll', updateButtonOpacity);
});
</script>ここまでできたら右上の「保存」から保存してください。
次に管理画面に戻って「コンテンツ」→「ファイル」から、任意のバナーをアップロードしてください。
アップロードできたら、「リンクをコピー」ボタンからリンクをコピーしてください。
再度先程のコード編集から以下の部分にコピーしてきたリンクを貼り付けてください。
<img src="ここに貼り付け" alt="lineでお友達追加">これで完了です！
オンラインストアを確認すると実装できているのが確認できます。
まとめ
今回は、Shopifyで追従Lineバナーを実装する方法方法を解説しました！
すごく簡単ですが、こういったカスタマイズをしていくことで、無料テーマでもリッチなストアを作ることができますので、ぜひ参考にしてみてください。
また、このブログでは他にもShopifyのカスタマイズについて解説していますので、あわせて参考にしてみてください。
あわせて読みたい
【コピペで実装】Shopifyで簡単にフロー（流れ）セクションを作成する方法
こんにちは！Shopifyエンジニアのりょうま(@ryoo_black)です。 今回はShopifyで簡単にフローセクションを作る方法を解説します。 簡単にコピペで実装できるようにしてい...