【無料で追加！】追従購入ボタンをShopifyの商品ページに固定表示する方法

Shopifyの商品ページにスクロール追従の購入ボタンを追加したくありませんか？

この記事では有料アプリを使用せず、無料でページ右下に固定のカートボタンを設置する方法を解説しています。

この記事を読んで、長くなりがちなスマホ画面でのコンバージョンを向上して、有料アプリのランニングコストを削減しましょう。

※当記事の内容を利用する場合は、利用規約が適用されます。

CONTENTS

完成形はこちら

まず結論として、商品ページに配置したスクロール追従購入ボタンの動作をご覧ください。

この記事の内容を真似することで、商品ページに有料アプリを使用せずに画面右下に固定のカートボタンを配置可能となります。
初回の設置作業のみで、その後に新規追加された商品ページにも表示されるのでおすすめです。

追従ボタン追加の大まかな手順

カスタマイズ内容の大枠を３つに分けて示します。

STEP

カートボタンの部品（スニペット）を作成

Liquid・HTML・CSSで追従カートボタン単位の部品を作成しておきます。

STEP

スニペットを商品ページに配置

STEP１で作成した追従カートボタンの部品を、商品ページのみに表示させるように配置します。

STEP

クリック時の動作制御を作成（JavaScriptの追加）

クリック時にバリエーション選択・カート追加の項目が表示されるように動作の制御を追加します。

カスタマイズの詳細な手順

ここからは、カスタマイズの詳細を説明します。

カートボタンの部品（スニペット）を作成

まずは、コード全文を紹介します。

{% style %}
  .dummy_content {
    display: none !important;
  }
  .product-single__quantity {
    margin-top: 20px;
  }
  .fixed_cart {
    position: fixed;
    bottom: 0.5em;
    right: 0;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #eeeeee;
    cursor: pointer;
    z-index: 999;
  }
  .fixed_cart_detail {
    position: fixed;
    bottom: 1em;
    right: 0px;
  }
  .fixed_cart_detail .product-single__variants {
    display: block;
  }
  .fixed_cart_detail {
    display: none;
    padding: 20px 20px 0px 20px;
    background-color: #f1f1f1;
    z-index: 999999;
  }
  .fixed_cart_detail form {
    width: 260px;
    margin: 0;
  }
  .close_icon {
    position: absolute;
    top: -5px;
    left: -5px;
    width: 25px;
    height: 25px;
    border-radius: 25px;
    cursor: pointer;
  }
  .close_icon_v {
    display: block;
    width: 25px;
    height: 1px;
    background-color: #000;
    position: absolute;
    top: 50%;
    rotate: 45deg;
  }
  .close_icon_h {
    display: block;
    width: 25px;
    height: 1px;
    background-color: #000;
    position: absolute;
    top: 50%;
    rotate: -45deg;
  }
  .fixed_cart_detail_show {
    display: block;
  }
{% endstyle %}

<div class="fixed_cart flex flex-a-ctr flex-j-ctr">
  <div>
    <img
      src="【ここに画像のソースを入れてください】"
      width="25"
      height="23"
      alt="カート"
    >
    <span class="txt">カートに入れる</span>
  </div>
</div>
<div class="fixed_cart_detail">
  <div class="close_icon">
    <span class="close_icon_v"></span>
    <span class="close_icon_h"></span>
  </div>
  {% for variant in product.variants %}
    {% assign variant_num = forloop.index %}
  {% endfor %}
  {% if variant_num != 1 %}
    {% form 'product', product, class: productClasses %}
      <select name="id" id="ProductSelect-{{ section.id }}" class="product-single__variants">
        {% for variant in product.variants %}
          {% if variant.available %}
            <option
              {% if variant == product.selected_or_first_available_variant %}
                selected="selected"
              {% endif %}
              data-sku="{{ variant.sku }}"
              value="{{ variant.id }}"
            >
              {{ variant.title }} - {{ variant.price | money_with_currency }}
            </option>
          {% else %}
            <option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
          {% endif %}
        {% endfor %}
      </select>

      <div class="product-single__quantity">
        <label for="Quantity">個数</label>
        <input type="number" id="Quantity" name="quantity" value="1" min="1" style="font-family: ts-unused;">
      </div>
      <div class="product-single__cart-submit-wrapper{% if section.settings.enable_payment_button %} product-single__shopify-payment-btn{% endif %}{% if section.settings.add_to_cart_width == 'full_width' %} product-form--full{% endif %}">
        <button
          type="submit"
          name="add"
          id="AddToCart"
          class="btn product-single__cart-submit{% if section.settings.add_to_cart_width == 'full_width' %} btn--full{% endif %}{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} shopify-payment-btn btn--secondary{% endif %}"
          data-cart-url="{{ routes.cart_url }}"
        >
          <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
        </button>
        {% if section.settings.enable_payment_button %}
          {{ form | payment_button }}
        {% endif %}
      </div>
    {% endform %}
  {% else %}
    {% form 'product', product, class: productClasses %}
      <select name="id" id="ProductSelect-{{ section.id }}" class="product-single__variants dummy_content">
        {% for variant in product.variants %}
          {% if variant.available %}
            <option
              {% if variant == product.selected_or_first_available_variant %}
                selected="selected"
              {% endif %}
              data-sku="{{ variant.sku }}"
              value="{{ variant.id }}"
            >
              {{ variant.title }} - {{ variant.price | money_with_currency }}
            </option>
          {% else %}
            <option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
          {% endif %}
        {% endfor %}
      </select>

      {% if section.settings.product_quantity_enable %}
        <div class="product-single__quantity">
          <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
          <input type="number" id="Quantity" name="quantity" value="1" min="1">
        </div>
      {% endif %}
      <p>{{ product.title }}</p>
      <div class="product-single__quantity">
        <label for="Quantity">個数</label>
        <input type="number" id="Quantity" name="quantity" value="1" min="1" style="font-family: ts-unused;">
      </div>

      <div class="product-single__cart-submit-wrapper{% if section.settings.enable_payment_button %} product-single__shopify-payment-btn{% endif %}{% if section.settings.add_to_cart_width == 'full_width' %} product-form--full{% endif %}">
        <button
          type="submit"
          name="add"
          id="AddToCart"
          class="btn product-single__cart-submit{% if section.settings.add_to_cart_width == 'full_width' %} btn--full{% endif %}{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} shopify-payment-btn btn--secondary{% endif %}"
          data-cart-url="{{ routes.cart_url }}"
        >
          <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
        </button>
        {% if section.settings.enable_payment_button %}
          {{ form | payment_button }}
        {% endif %}
      </div>
    {% endform %}
  {% endif %}
</div>

上記の長いコードを、分解しながら解説します。

{% style %}　xxxxx {% endstyle %}

こちらは、追従カートボタンのスタイルを調整するためのCSSですので詳細は割愛します。
お好みに応じて、編集してお使いください。

<div class="fixed_cart flex flex-a-ctr flex-j-ctr">
  <div>
    <img
      src="【ここに画像のソースを入れてください】"
      width="25"
      height="23"
      alt="カート"
    >
    <span class="txt">カートに入れる</span>
  </div>
</div>

この部分が、画面の右下に固定表示される追従カートボタンです。
カートマークのアイコンは、ご自身で準備したものをsrc属性の部分に追記してください。

<div class="fixed_cart_detail">
  <div class="close_icon">
    <span class="close_icon_v"></span>
    <span class="close_icon_h"></span>
  </div>

ここから、追従カートボタンを押した場合にポップアップで表示される部分を記述しています。
class="close_icon"　の内部は、ポップアップを閉じるボタンになる部分です。

{% for variant in product.variants %}
    {% assign variant_num = forloop.index %}
{% endfor %}

ここでは、variant_num　に商品のバリアント（色、サイズなどの選択肢）の数を格納しています。

{% if variant_num != 1 %}
xxxxxxxxxx
{% else %}
yyyyyyyyyy
{% endif %}

その後の大枠は、上記のようにvariant_num　の数に応じて動作を切り替えています。
ここ以降は、バリアントが複数存在する場合に出力されるxxxxxxxxxx に入る部分を解説していきます。

{% form 'product', product, class: productClasses %}

上記の基本形は下記の通りで、form_type　に応じて適した動作を実行できるformタグを生成させることができます。
ここでは、引数としてproductオブジェクトを使用しています。

{% form 'form_type' %}
  content
{% endform %}

form_type　に使用できる種類は、こちらのShopify公式リファレンスをご覧ください。

 <select name="id" id="ProductSelect-{{ section.id }}" class="product-single__variants">
        {% for variant in product.variants %}
          {% if variant.available %}
            <option
              {% if variant == product.selected_or_first_available_variant %}
                selected="selected"
              {% endif %}
              data-sku="{{ variant.sku }}"
              value="{{ variant.id }}"
            >
              {{ variant.title }} - {{ variant.price | money_with_currency }}
            </option>
          {% else %}
            <option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
          {% endif %}
        {% endfor %}
      </select>

{% for variant in product.variants %} のループによって、商品のバリアントをoptionタグとして出力しています。
{% if variant.available %}　の中では、商品のバリアント単位で在庫がある場合のoptionタグを出力しています。
{% else %}　の中では、商品のバリアント単位で在庫がない場合に「売り切れ」と表示させるoptionタグを出力しています。

<div class="product-single__quantity">
        <label for="Quantity">個数</label>
        <input type="number" id="Quantity" name="quantity" value="1" min="1" style="font-family: ts-unused;">
      </div>
      <div class="product-single__cart-submit-wrapper{% if section.settings.enable_payment_button %} product-single__shopify-payment-btn{% endif %}{% if section.settings.add_to_cart_width == 'full_width' %} product-form--full{% endif %}">
        <button
          type="submit"
          name="add"
          id="AddToCart"
          class="btn product-single__cart-submit{% if section.settings.add_to_cart_width == 'full_width' %} btn--full{% endif %}{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} shopify-payment-btn btn--secondary{% endif %}"
          data-cart-url="{{ routes.cart_url }}"
        >
          <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
        </button>
        {% if section.settings.enable_payment_button %}
          {{ form | payment_button }}
        {% endif %}
      </div>

この部分は個数のセレクターと、購入ボタンの記述です。テーマにデフォルトで存在する購入ボタンに関する記述をそのまま埋め込んでいます。

スニペットを商品ページに配置

STEP１で作成した追従カートボタンの部品をfixed-cart.liquid という名前のスニペットとして保存した場合、商品ページのテンプレートに以下のように記述します。

{% render 'fixed-cart'%}
<script src="{{ 'fixed-cart.js' | asset_url }}"></script>

fixed-cart.js　は、次項に説明するJavaScriptです。
記述方法・場所は遅延読み込みなどの好みがあるかと思いますが、分かりやすさのためスニペットの直後に記述しています。

クリック時の動作制御を作成（JavaScriptの追加）

スクロール追従のカートボタンをクリックしたときに詳細を開き、バリエーション選択・カート追加の項目が表示されるように動作を制御するコードです。

document.addEventListener("DOMContentLoaded", function () {
  document.querySelector(".fixed_cart").addEventListener("click", function () {
    document.querySelector(".fixed_cart_detail").classList.add("fixed_cart_detail_show");
  });

  document.querySelector(".close_icon").addEventListener("click", function () {
    document.querySelector(".fixed_cart_detail").classList.remove("fixed_cart_detail_show");
  });
});