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

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

この記事を書いた人

パピティー

htmlとCSSのきほん本を3冊読んだだけの初心者が、やりたいことベースで、shopifyとwordpressに奮闘中。

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

完成イメージ

以下クリックで詳細画面に定期プランと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の商品ページに「カートに入れる」ボタンを追従で設置する方法を紹介しました。

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

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

完成イメージ

商品名

用意するもの

仕様の整理

追従ボタン

ポップアップ詳細画面

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

１．スニペットの新設

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

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

まとめ

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