[shopify] 日本事業者向け配送日時指定アプリ「カレンダーマスター」が提供開始。

2021/11/08 09:00
#プレスリリース
#Shopify


TAM ECチームが日本の事業者に合わせた配送日時が指定できるshopfyアプリ「カレンダーマスター」を公開しました。


EC専門チームが開発する日本事業者向け配送日時指定アプリ

Shopifyは全世界175カ国、100万店舗以上のストアで利用されており、日本国内でも利用できるクラウド型(SaaS型)のECカートとしてトレンドになりつつあります。

Shopifyを利用するメリットとして、アプリが豊富で拡張性が高いことがしばしば挙げられます。

しかし、アプリのほとんどが英語をメインとした作りになっているため、日本語をメインとして利用する事業者にはハードルが高い場合があります。

今回TAM ECチームがリリースした配送日時指定アプリは日本事業者向けに作成され、ネクストエンジンとの受注連携やカレンダーのデザイン性などありそうでなかった「かゆいところに手がとどく」アプリになっています。

配送日時指定機能が一新され、より簡単な操作でテーマに反映できるようになりました!(2021/11/8)
配送関連設定2.0としてリリースしていますのでぜひお試しください。

希望配送日をカレンダーで指定可能に
希望配送日指定のイラスト

カート画面でお客様が希望配送日時をカレンダーから選択できるようになり、選択された希望配送日時を注文確定メールで送ったり、ネクストエンジンなど国産の受注管理システムなどと簡単に連携することができます。

カート画面では、カレンダーから日付を選択できるため、最短で何日に届くという情報が伝わりやすく、直感的に選択していただけます。

また、カート画面に表示される要素の設置やCSSの編集を自由におこなえるため、ストアの世界観に合わせたデザインや一部地域への対応、注意文言の追加などのカスタマイズが可能です。

配送日時の設定

日時設定のイラスト
配送作業にかかる日数によって、最短のお届け日とお届け可能期間を設定することができます。

配送時間帯は、配送業者から選択すると、自動でその配送業者のお届可能な時間帯を選べるようになります。選択可能な配送業者は以下です。

ヤマト運輸
佐川急便
日本郵便(ゆうパック)
福山通運
西濃運輸
日本通運

配送時間帯を独自に作成することも可能です。

また配送希望日の選択を必須にすることもできます。(※ 配送関連設定2.0の場合)
日にちの指定のみ、時間の指定のみを設定したい場合にも対応しています。

ストア休日の設定

休日設定のイラスト
定休日や臨時休業日、長期休みの設定を管理画面上で簡単に設定することができます。定休日や長期休みを設定すると、カート画面のカレンダーには配送指定可能日が、お休みの期間分ずれて表示されます。

柔軟なカスタマイズ性

カレンダーパーツ、時間選択セレクトメニューパーツが別々に設置できます。要素の設置も簡単インストールを利用すれば手動での設置作業を省けます。

カレンダーマスター × ネクストエンジンの連携方法

カレンダーマスターは、受注管理システム「ネクストエンジン」との連携が可能です。
Shopifyで受注した商品の「配送日」「配送時間」を、ネクストエンジン上の受注伝票に出力することができます。

設定手順

1. ネクストエンジンの設定タブより、受注 → 備考欄変換へと進みます。
2. 「店舗を選択」で、Shopify店舗を選択します。
3. 以下の3つの項目があるので、それぞれを適切なものに設定します。
    1. 変換前:カレンダーマスター管理画面で選択した配送業者に合わせて、下記データ一覧の項目を入力
    2. 変換方法:「項目に変換」を選択
    3. 変換後:ネクストエンジンの受注伝票に記載する値を選択
4. 設定ができたら「変換内容を保存」を選択し完了します。
※ネクストエンジンのより詳細な設定方法は、公式ドキュメントをご参照ください。

配送日時取り込みの設定確認 / 変更【Shopify】 | ECサイトの在庫,受注,発注管理 | ネットショップ管理ならネクストエンジン

備考欄に入った値の変換 (備考欄変換) | ECサイトの在庫,受注,発注管理 | ネットショップ管理ならネクストエンジン

各配送業者の変換前データ一覧

カレンダーマスターの管理画面で設定した各配送業者の配送時間は以下を参照し、ネクストエンジンの「備考欄変換」にて設定してください。

(表1)

注文確認メールへの出力方法

注文確認メールで選択された配送日時を表示させるにはShopifyのメールテンプレートを変更する必要があります。通知設定画面でメールテンプレートを開き、表示したい箇所に以下サンプルコードを貼り付けてください。

  • 購入者へのメール: お客様通知「注文の確認」
  • ストア管理者へのメール: スタッフ注文通知「新しい注文」


<!--Shopify_通知設定_注文の確認テンプレートに挿入 -->
	{% if attributes["delivery_time"] or attributes["delivery_date"] %}
	  <table class="row">
	    <tr>
	      <td class="customer-info__item">
	        <h4>お届け日時</h4>
	        {% if attributes["delivery_date"]  %}
	          {{ attributes["delivery_date"] | date: "%Y年 %m月 %d日"}}
	        {% else %}
	          指定なし
	       {% endif %}
	       {% if attributes["delivery_time"] %}
	          {{ attributes["delivery_time"] }}
	       {% else %}
	          指定なし
	        {% endif %}
	      </td>
	    </tr>
	  </table>
	{% endif %}
<!--// Shopify_通知設定_注文の確認テンプレートに挿入 -->


配送先、お客様住所のブロック下部に出力いただくのがおすすめです。

注文完了画面への表示方法

チェックアウト設定画面を開き、注文処理の「追加スクリプト」に以下コードを記述します。

<script>
  var date = {{ attributes.delivery_date | json }} || "指定なし";
  var time = {{ attributes.delivery_time | json }} || "指定なし";
  Shopify.Checkout.OrderStatus.addContentBox(
  '<h3>配送希望日時</h3>',
  `<p>${date}  ${time}</p>`
  )
</script>



*出力イメージ

テーマ別実装方法

テーマ別実装方法の解説はこちら

よくある質問

カレンダーマスターのよくあるご質問はこちらからご確認ください。
FAQ 「カレンダーマスター」Shopifyアプリ

アプリのインストールはこちら

CONTACT

経験・実績のある会社だからこそ提供できるサービスがあります。
ぜひ一度お問い合わせください。

*の付いてる項目は必須項目です。

TAMくんのイラスト
プライバシーマーク