Shopifyの商品ページを下までスクロールするとカートボタンがいなくなってしまうので、何もせず離脱されてしまうのを防ぐため、「カートに入れる」ボタンを追従させたい！と画策しました。

定期商品もあるため、「カートに入れる」ボタンを押すと、1回購入と定期購入をそれぞれ選べる詳細ポップアップを表示させるという仕様にしたので、追従ボタンの設置と、詳細画面作成についてお話しします。

完成イメージ
用意するもの
仕様の整理
1. 追従ボタン
2. ポップアップ詳細画面
追従ボタンと詳細画面の設定方法
1. １．スニペットの新設
  1. 定期プラン商品がある場合
  2. 定期プラン商品なしの場合
まとめ
追従ボタンのUX・購入動線チェック
1. カートに入らない場合

完成イメージ

以下クリックで詳細画面に定期プランと1回購入を両方表示させた例のデモ画面をご確認いただけます。

カートに入れる

商品名

定期便初回 1,600円 20% OFF	数量
※ 2回目以降毎月お届け: 10% OFF

定期便

初回 1,600円

20% OFF

数量

※ 2回目以降毎月お届け:
10% OFF

1回購入 2,000円	数量

用意するもの

カートマーク（なくても良し）
定期購入商品のBuy Link（定期プランがある場合のみ※ここでは「定期購買」アプリを使用）
例）https://bizmatcha.website/apps/subscription/buy?id=1234567890&selling_plan=1234567890&quantity=1&is_cart=1

※Buy Linkは、「定期購買」アプリのプラン設定から該当プランを選択して、「Buy Linkの作成」ボタンから簡単に作成できます。

仕様の整理

追従ボタン

「カートに入れる」というテキストの右にカートマークを設置
クリックしてポップアップ画面を表示させる

ポップアップ詳細画面

定期プランがある場合は、定期プランと1回購入でそれぞれ数量ボックスと「カートに入れる」ボタンを表示
定期プランがない場合は、1回購入のみで数量ボックスと「カートに入れる」ボタンを表示

※定期プラン内でも商品ごとに割引有無や割引率など内容が異なる場合には、条件分岐を設置する必要があるので要注意。

では、早速作っていきましょう！

追従ボタンと詳細画面の設定方法

今回はliquidファイルにcssもjavascriptも含めてしまったので、やり方は2ステップで、追従カートボタン用にliquidファイルを新設し、商品ページに埋め込むだけです。

設置したいテーマのコード編集からスニペットを新しく作成
（名称はわかりやすいものでOK。ここでは「fixed-cart.liquid」としました。
main-product.liquidの任意の場所に{% render ‘fixed-cart’ %}と記述

１．スニペットの新設

以下の該当コードをコピー
★箇所は該当の情報を入れてください。
最上部にCSSを入れているので、お好みのスタイルに変えてください。

定期プラン商品がある場合

以下は、デモ同様定期プランがある場合のコードです。定期便では2個まで選べるようにしています。

.fixed_cart_detail.show {
  display: block;
}

.close_icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  border-radius: 25px;
  cursor: pointer;
}

.close_icon_v, .close_icon_h {
  display: block;
  width: 20px;
  height: 1px;
  background-color: #000;
  position: absolute;
}

.close_icon_v {
  top: 50%;
  transform: rotate(45deg);
}

.close_icon_h {
  top: 50%;
  transform: rotate(-45deg);
}

.subscription_btn, .single_btn {
  border-radius: 30px;
  cursor: pointer;
  font-size: 15px;
  width: auto;
  white-space: nowrap;
  font-weight: 700;
}

.subscription_btn {
  background-color: #2ac291;
  color: #ffffff;
  border: none;
}

.single_btn {
  background-color: #ffffff;
  color: #2ac291;
  border: 2px solid #616B07;
}

.discount_rate {
  color: red;
  font-size: 13px;
}

.table_container {
  display: block;
  table-layout: fixed;
  border-collapse: collapse;
  border: none;
}

.table_container th, .table_container td {
  border: none;
  padding: 5px;
  text-align: center;
}

.table_container th {
  width: 130px;
  font-weight: 800;
  font-size: 16px;
}

.table_container th p {
  font-size: 14px;
  font-weight: 300;
  margin: 0;
}

.table_container td {
  width: 200px;
}

.table_cell {
  margin-bottom: 10px;
}

.quantity_input {
  border: 1px solid #ddd;
  width: 40%;
}

input#SingleQuantity {
  width: 40%;
}

h1 {
  font-size: 16px;
}

.subscription_note {
  font-size: 14px;
}

@media screen and (max-width: 1024px) {
  .fixed_cart {
    bottom: 2em;
  }
}
</style>

<div class="fixed_cart flex flex-a-ctr flex-j-ctr">
  <div>
    <span class="txt">カートに入れる</span>
    <img decoding="async" src="★ここにカートのアイコンを入れる" width="25" height="23" alt="カートマーク">
  </div>
</div>

{% assign discounted_price = product.price | times: 0.8 %}
  <div>
    <h1>{{ product.title }}</h1>
    {% if product.selling_plan_groups.size > 0 %}
      <div class="scrollable-table"><table class="table_container">
        <tr>
          <th>定期便<br><p>初回 {{ discounted_price | money }}</p><p class="discount_rate">20% OFF</p></th>
          <td>
            <div class="table_cell">
              <label for="SubscriptionQuantity">数量</label>
              <select id="SubscriptionQuantity" name="quantity" onchange="updateSubscriptionLink()" class="quantity_input">
                <option value="1" selected>1</option>
                <option value="2">2</option>
              </select>
            </div>
            <button id="addToSubscriptionCartBtn" type="button" class="subscription_btn" onclick="addToSubscriptionCart()">カートに入れる</button>
          </td>
        </tr>
        <tr>
          <td colspan="2" class="subscription_note">※ 2回目以降毎月お届け:<br> {{ product.price | times: 0.9 | money }} <span class="discount_rate">10% OFF</span></td>
        </tr>
      </table></div>
      <hr>
    {% endif %}
    <div class="scrollable-table"><table class="table_container">
      <tr>
        <th>1回購入<br><p>{{ product.price | money }}</p></th>
        <td>
          <div class="table_cell">
            <label for="SingleQuantity">数量</label>
            <input type="number" id="SingleQuantity" name="quantity" value="1" min="1" class="quantity_input">
          </div>
          <button class="single_btn" onclick="addToCart('{{ product.selected_or_first_available_variant.id }}')">カートに入れる</button>
        </td>
      </tr>
    </table></div>
  </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
  // 要素の取得
  const cartButton = document.querySelector('.fixed_cart');
  const cartDetail = document.querySelector('.fixed_cart_detail');
  const closeButton = document.querySelector('.close_icon');
  const subscriptionButton = document.getElementById("addToSubscriptionCartBtn");

// カートボタンのクリックイベント
  cartButton.addEventListener('click', function() {
    cartDetail.classList.toggle('show');
  });

// クローズボタンのクリックイベント
  closeButton.addEventListener('click', function() {
    cartDetail.classList.remove('show');
  });

// 定期購入プランの判定
  var hasSubscriptionPlan = checkForSubscriptionPlan();
  if (!hasSubscriptionPlan) {
    // 定期購入プランがない場合、ボタンを非表示
    subscriptionButton.style.display = "none";
  }
});

// カート詳細を閉じる関数
function closeCart() {
  document.querySelector('.fixed_cart_detail').classList.remove('show');
}

// 定期購入リンクを更新する関数
function updateSubscriptionLink() {
  var quantity = document.getElementById("SubscriptionQuantity").value;
  var handle = window.location.pathname.split('/').pop(); // 現在のページURLからハンドルを取得
  var link = '';

// ハンドルに基づいて定期購入リンクを設定
  if (handle === "★定期プランのある商品のハンドル名１" || handle === "★定期プランのある商品のハンドル名２") {
    link = '★ここにBuy Linkの「quantity=」までを記入' + quantity + '&is_cart=1';
  }

// 定期購入ボタンのリンクを設定
  document.getElementById("addToSubscriptionCartBtn").setAttribute("onclick", "location.href='" + link + "'");
}

// 定期購入カートに追加する関数
function addToSubscriptionCart() {
  var quantity = document.getElementById("SubscriptionQuantity").value;
  var handle = window.location.pathname.split('/').pop(); // 現在のページURLからハンドルを取得
  var link = '';

window.location.href = link;
}

// 商品をカートに追加する関数
function addToCart(variantId) {
  var quantity = document.getElementById("SingleQuantity").value;
  var link = '{{ routes.cart_add_url }}?id=' + variantId + '&quantity=' + quantity;
  window.location.href = link;
}

// 定期購入プランがあるかどうかを判定する関数
function checkForSubscriptionPlan() {
  var handle = window.location.pathname.split('/').pop(); // 現在のページURLからハンドルを取得
  return handle === "★定期プランのある商品のハンドル名１" || handle === "★定期プランのある商品のハンドル名２";
}
</script>

定期プラン商品なしの場合

以下は1回購入のみの場合のコードです。

.fixed_cart_detail.show {
  display: block;
}

.close_icon {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  border-radius: 25px;
  cursor: pointer;
}

.close_icon_v, .close_icon_h {
  display: block;
  width: 20px;
  height: 1px;
  background-color: #000;
  position: absolute;
}

.close_icon_v {
  top: 50%;
  transform: rotate(45deg);
}

.close_icon_h {
  top: 50%;
  transform: rotate(-45deg);
}

.single_btn {
  border-radius: 30px;
  cursor: pointer;
  font-size: 15px;
  width: auto;
  white-space: nowrap;
  font-weight: 700;
}

.single_btn {
  background-color: #ffffff;
  color: #2ac291;
  border: 2px solid #616B07;
}

.table_container {
  display: block;
  table-layout: fixed;
  border-collapse: collapse;
  border: none;
}

.table_container th, .table_container td {
  border: none;
  padding: 5px;
  text-align: center;
}

.table_container th {
  width: 130px;
  font-weight: 800;
  font-size: 16px;
}

.table_container th p {
  font-size: 14px;
  font-weight: 300;
  margin: 0;
}

.table_container td {
  width: 200px;
}

.table_cell {
  margin-bottom: 10px;
}

input#SingleQuantity {
  width: 30%;
}

h1 {
  font-size: 16px;
}

@media screen and (max-width: 1024px) {
  .fixed_cart {
    bottom: 2em;
  }
}
</style>

<div class="scrollable-table"><table class="table_container">
    <tr>
      <th>1回購入<br><p>{{ product.price | money }}</p></th>
      <td>
        <div class="table_cell">
          <label for="SingleQuantity">数量</label>
          <input type="number" id="SingleQuantity" name="quantity" value="1" min="1" class="quantity_input">
        </div>
        <button class="single_btn" onclick="addToCart('{{ product.selected_or_first_available_variant.id }}')">カートに入れる</button>
      </td>
    </tr>
  </table></div>
</div>

document.addEventListener('DOMContentLoaded', function() {
  var cartButton = document.querySelector('.fixed_cart');
  var cartDetail = document.querySelector('.fixed_cart_detail');
  var closeButton = document.querySelector('.close_icon');

cartButton.addEventListener('click', function() {
    cartDetail.classList.toggle('show');
  });

closeButton.addEventListener('click', function() {
    cartDetail.classList.remove('show');
  });
});
</script>

まとめ

shopfiyの商品ページに「カートに入れる」ボタンを追従で設置する方法を紹介しました。

色やテキスト、ボタン設置位置や詳細画面の見栄えなどはお好みでカスタマイズしてくださいませ。

この記事を書いた人

くるみ

マーケターとしてEC運用やCRM施策を進める中で、やりたいことを実現するためにwordpressやshopifyで検証・実装した内容を初心者目線でまとめています。

追従ボタンのUX・購入動線チェック

追従ボタンは購入を助けるためのものなので、画面を広く隠したり、別の重要な操作を妨げたりすると逆効果です。特にスマホでは、Cookie同意、チャット、戻るボタンなどと重ならないか実機で確認してください。

選択中のバリエーション、在庫、数量が通常の商品フォームと一致する
売り切れ時は購入できず、状態が文字でも分かる
定期購入を使う場合はselling planが正しく引き継がれる
カート追加後の挙動が通常ボタンと同じになる
キーボード操作時のフォーカスが見え、本文を隠しすぎない

テーマ変更前はShopify公式手順でテーマを複製し、複製テーマのプレビューで確認してください。公式のテーマコード編集ガイドには、以前の状態へ戻す方法も案内されています。

カートに入らない場合

通常の商品フォームでは購入できるかを先に確認します。通常ボタンだけ動く場合は、追従側へvariant ID・数量・販売プランが渡っているかを比較してください。商品選択UIを変更している場合はバリエーションボタンリンクの記事や選べるセット商品の記事も確認できます。

Shopifyの商品ページに「カートに入れる」追従ボタン設置方法