[Shopify] 配送時間指定を無料で実装する（Debutテーマ）

日本のマーチャントがShopifyを利用する際に、デフォルトで日本向けに足りない機能のカスタマイズ方法について紹介していきます。

Shopifyの無料体験をはじめる

Shopifyにはデフォルトで配送日時指定の機能がない

Shopifyの機能には、配送日時指定（お届け日時指定）の機能がデフォルトでついていません。

よって、配送日時指定のアプリを入れる必要がありますが、有料のものがほとんどです。年間にするとそれなりのコストになるため、今回は自分でコードを編集して実装した時の方法をまとめていきます。

日付の指定を実装することも可能ですが、今回は「配送時間」のみの指定方法についてまとめます。

配送日については以下。

[Shopify] 配送日指定を実装する方法（Debutテーマ）日本のマーチャントがShopifyを利用する際に、デフォルトで日本向けに足りない機能のカスタマイズ方法について紹介していきます。 ...

Liquidコードを編集する際には、バックアップを必ず行い、テスト環境で確認を行うなど、自己責任のもとに行ってください。万が一不都合等が起きた場合でも当方は責任を負いかねますのでご注意ください。

Shopifyで配送時間指定の機能を実装する方法

Cart attributesという、カートに独自の入力項目を追加するためのフィールドを使用します。

Shopifyテーマカスタマイズの三種の神器：Cart attributes、Line Item Property、Customer noteを使いこなそう！

Cart attributesを使用すると、カート画面に入力項目を追加でき、その値を注文完了画面に追加したり、メール本文に表示したり、管理画面の注文詳細から参照することが可能となります。

通常のECサイトはその先のお届け指定などの箇所で選択すると思いますが、Shopifyの通常のプランで入力項目を追加できるのはショッピングカート画面のみです。
※Shopify Plusであれば追加可能

カート画面に追加する配送時間指定のUIを作成する

まず画面に挿入するUIを作成します。コードを1から書くよりは、以下のジェネレーターを使用すると簡単です。

Cart attribute – Shopify UI Elements Generator

こちらの「Your form field label」に項目名（例：配送時間指定）、
「Options if using radio buttons or a drop-down select」に選択する各項目（ヤマト運輸の場合の例：指定なし,午前中,12:00-14:00,14:00-16:00,16:00-18:00,18:00-20:00,19:00-21:00）を入力すると、下にコードが生成されます。

<p class="cart-attribute__field">
  <label>配送時間指定</label><br>
  <select id="" name="attributes[配送時間指定]">
    <option value="指定なし"{% if cart.attributes["配送時間指定"] == "指定なし" %} selected{% endif %}>指定なし</option>
    <option value="午前中"{% if cart.attributes["配送時間指定"] == "午前中" %} selected{% endif %}>午前中</option>
    <option value="12:00-14:00"{% if cart.attributes["配送時間指定"] == "12:00-14:00" %} selected{% endif %}>12:00-14:00</option>
    <option value="14:00-16:00"{% if cart.attributes["配送時間指定"] == "14:00-16:00" %} selected{% endif %}>14:00-16:00</option>
    <option value="16:00-18:00"{% if cart.attributes["配送時間指定"] == "16:00-18:00" %} selected{% endif %}>16:00-18:00</option>
    <option value="18:00-20:00"{% if cart.attributes["配送時間指定"] == "18:00-20:00" %} selected{% endif %}>18:00-20:00</option>
    <option value="19:00-21:00"{% if cart.attributes["配送時間指定"] == "19:00-21:00" %} selected{% endif %}>19:00-21:00</option>
  </select>
</p>

配送時間指定のUIをカート画面に追加する

上記をファイルとして、名前は何でも良いですが「cart-deliverytime.liquid」としてsnippetsフォルダ以下に作成します。

次に、sectionsフォルダ以下にある、「cart-template.liquid」ファイルを編集します。

挿入箇所も自由ですが、「ご購入手続きへ」ボタンを押す前に選択してもらいたいため、以下の位置とすると、

<div class="cart__shipping rte">{{ taxes_shipping_checkout }}</div>

と

<div class="cart__buttons-container">

の間に、

{% render 'cart-deliverytime' %}

と先ほど追加したファイル名の拡張子より前までのファイル名を記載して読み込みます。

※上記はDebutテーマの場合です。他のテーマの場合は挿入したい箇所に入れ、CSSで見た目や位置を調整してください。

日本語の場合のみ表示させたい場合

海外にも販売している場合で、配送時間指定を日本のみにしたい場合は（厳密には海外の人でも日本語にすれば選べてしまいますが）、先ほどの「cart-deliverytime.liquid」を編集し、全体をif文で囲います。（以下は見た目調整のために多少タグとスタイルを追記しています）

{%- if request.locale.name == "日本語" -%}
<div class="cart-delivery-time" style="margin-bottom: 50px;">
  <p class="cart-attribute__field">
    <label style="margin-bottom: 10px; font-weight: bold;">配送希望時間</label>
    <select required class="required" id="for-japan" name="attributes[配送希望時間]">
      <option value="指定なし"{% if cart.attributes["配送希望時間"] == "指定なし" %} selected{% endif %}>指定なし</option>
      <option value="午前中"{% if cart.attributes["配送希望時間"] == "午前中" %} selected{% endif %}>午前中</option>
      <option value="12:00-14:00"{% if cart.attributes["配送希望時間"] == "12:00-14:00" %} selected{% endif %}>12:00-14:00</option>
      <option value="14:00-16:00"{% if cart.attributes["配送希望時間"] == "14:00-16:00" %} selected{% endif %}>14:00-16:00</option>
      <option value="16:00-18:00"{% if cart.attributes["配送希望時間"] == "16:00-18:00" %} selected{% endif %}>16:00-18:00</option>
      <option value="18:00-20:00"{% if cart.attributes["配送希望時間"] == "18:00-20:00" %} selected{% endif %}>18:00-20:00</option>
      <option value="19:00-21:00"{% if cart.attributes["配送希望時間"] == "19:00-21:00" %} selected{% endif %}>19:00-21:00</option>
    </select>
  </p>
</div>
{%- endif -%}

これで日本語を選択しているときのみ表示されます。

{%- if request.path == "/cart" -%}
〜〜〜
{%- endif -%}

でもOKです。

受注詳細画面での確認方法

受注詳細画面では、以下のメモ欄の下の「追加の詳細」内に値が入ります。

Shopifyで配送時間指定をメール本文に追加するには

お客さんが選択した配送時間を、メールに表示させることも可能です。お客様が受け取る「注文確認メール」に追加したい場合は、

設定→通知→注文の確認

を編集し、例として一番下の配送方法の下に追加したい場合は、「配送方法」のtableタグの下に、以下のコードを追記します。（Cart attributeに配送時間以外の項目も使用している場合は全て出力されます）

{% if attributes["配送時間指定"] %}
<table class="row">
  <tr>
    <td class="customer-info__item">
      {% for attribute in attributes %}
      <h4>{{ attribute | first }}</h4>
      <p>
      {{ attribute | last }}<br>
      </p>
      {% endfor %}
    </td>
  </tr>
</table>
{% endif %}

これで以下のようにメールに表示されます。もちろん、他の配送完了メールなどにも追加可能です。