目次
設定完了後のカートイメージ
手順1と手順2の作業を完了すると、カート画面に「配送希望日」と「配送時間帯」が表示され指定できるようになります。

手順1.アプリ管理画面での設定
1-1.配送業者/時間帯の設定
Shopify管理画面から、 アプリ管理
> 配送日時指定.amp
をクリックし、 配送日時指定.ampの管理画面 を表示します。

※「配送日時指定.amp」の管理画面>

「配送業者と時間帯の設定」
利用する配送業者と、その配送業者で対応可能な配送時間帯を設定します。
予め以下の配送業者が設定されていますので、選択肢の中に利用したい配送業者がない場合やテイクアウトの日時指定としてご利用になりたい場合は、「カスタム配送業者の追加・管理」から設定してください。
デフォルトで登録されている配送業者とそれに対応する配送時間帯

1-2.配送希望日の設定
アプリ管理画面の「配送希望日の設定」から、注文日を基点とした、最短いつから・最大いつまでの配送希望を受け付けるか、設定します。
・最短で指定できる配送希望日
注文日を起点にした営業日数で登録してください。
デフォルトは4日後になっています。
・最長で指定できる配送希望日
注文日を起点にした営業日数で登録してください。
デフォルトは120日後になっています。
・締め時間
当日の注文の締め切りタイミングを登録します。
ここで登録した時間以降の注文は、翌日注文扱いになります。
※「日数を営業日換算にする」にチェックを入れると、土日祝日を除く平日のみで上記希望日の日数を換算します。

1-3.置き配達の設定(任意)
置き配達の希望を受け付ける場合は、「置き配オプションを有効にする」にチェックを入れてください。
カート画面に「置き配の利用」という項目とプルダウンが追加され、置き配利用場所を選択できるようになります。

※カート画面のプルダウンメニュー

1-4.長期休暇期間の設定(任意)
年末年始やお盆など、発送指定を受け付けない期間を設定する場合は、「長期休暇設定」を入力してください。

手順2.テーマを編集
2-1. 共通で実施する手順
手順)
1.Shopify管理画面のメニューから「アプリ管理」「配送日時指定.amp」の順にクリック
2.配送日時指定.amp設定画面右側の「ガイドライン」にある「導入手順」をクリック

3.「インストール先のテーマを選択」にて、ご利用のテーマをプルダウンメニューから選択

4.「アプリ専用テンプレートの設置」にて「実行して次のステップへ」をクリック

2-2. カートページのLiquidコードを自動編集する場合の手順
※自動編集は無料テーマのみに適用しています(2020.12.1)
Debut / Venture / Simple / Boundless / Supply / Narrative / Brooklyn / Minimal / Express
5-a.自動編集する場合
「カートページのLiquidコードを編集」にて「3-1:Liquidコードの自動編集」の
「自動編集を実行する」をクリック

次の画面で「選択したテーマへのインストールが完了しました」と表示されていたら反映完了です
2-3. カートページのLiquidコードを手動で編集する場合の手順
5-b.手動で編集する場合
現在のテーマを確認する
Shopify管理画面の左側メニュー「オンラインストア」「テーマ」の順にクリックします。
メニュー右側が「テーマ」の設定に関する画面になりますので、その中の「現在のテーマ」で確認できます。
次の2-1以降で説明しているコード編集画面は、「現在のテーマ」で選択されているテーマ名の右にあるプルダウンメニュー「アクション」をクリックし「コードを編集する」を選択すると表示されます。
※「現在のテーマ」以外のテーマを選択した場合は、選択したテーマで同様のことを実施してください

5-b-1.テーマ「Debut」の場合
1.Shopify管理画面から、 オンラインストア
> テーマ
をクリックします。
2.編集したいテーマを選択します。
3.Sections
ディレクトリの中から、cart-template.liquid
をクリックします。

4.Liquidコードの中で form
内の次のコードを探します。
<div class="cart__submit-controls">
5. 上記のコードの1つ前の行に、以下のコードを貼り付けてください。
{% render 'cart-attributes' %}
次のようになります。
...
<form action="/cart" method="post" novalidate class="cart">
...
<div class="cart__shipping rte">{{ taxes_shipping_checkout }}</div>
{% render 'cart-attributes' %}
<div class="cart__submit-controls">
...
</form>
...

Save
をクリック
5-b-2.テーマ「Minimal」の場合
- Shopify管理画面から、
オンラインストア
>テーマ
をクリックします。 - 編集したいテーマを選択します。
Sections
ディレクトリの中から、cart-template.liquid
をクリックします。- Liquidコードの中で
form
内の次のコードを探します。
<a class="btn btn--secondary" href="{{ routes.all_products_collection_url }}">{{ 'cart.general.continue_shopping' | t }}</a>
- 上記のコードの1つ前の行に、以下のコードを貼り付けてください。
{% render 'cart-attributes' %}
Save
をクリックします。
5-b-3.テーマ「Supply」の場合
- Shopify管理画面から、
オンラインストア
>テーマ
をクリックします。 - 編集したいテーマを選択します。
Templates
ディレクトリの中から、cart.liquid
をクリックします。- Liquidコードの中で
form
内の次のコードを探します。
<input type="submit" name="update" class="btn-secondary update-cart" value="{{ 'cart.general.update' | t }}">
- 上記のコードの1つ前の行に、以下のコードを貼り付けてください。
{% render 'cart-attributes' %}
Save
をクリックします。
5-b-4.テーマ「Narrative」の場合
- Shopify管理画面から、
オンラインストア
>テーマ
をクリックします。 - 編集したいテーマを選択します。
Sections
ディレクトリの中から、cart-template.liquid
をクリックします。- Liquidコードの中で
form
内の次のコードを探します。
<div class="cart-subtotal">
- 上記のコードの1つ前の行に、以下のコードを貼り付けてください。
{% render 'cart-attributes' %}
Save
をクリックします。
Narrativeテーマは通常のカートページ(/cart)ではなく、cart-drawerという全ページの右端からカートが表示されるスタイルなので、cart-drawerの修正も行う必要があります。
- 同じく、管理画面から
オンラインストア
>テーマ
をクリックし、Narrativeテーマのアクション
>コードを編集する
をクリックしてください。 Snippets
ディレクトリの中から、cart-drawer.liquid
をクリックします。- Liquidコードの中で
form
内の次のコードを探します。
</div>
</div>
<div class="cart-drawer__footer">
- 以下のように「 {% render ‘cart-attributes’ %} 」を貼り付けてください
</div>
{% render 'cart-attributes' %}
</div>
<div class="cart-drawer__footer">
Save
をクリックします。
5-b-5.テーマ「Boundless」の場合
- Shopify管理画面から、
オンラインストア
>テーマ
をクリックします。 - 編集したいテーマを選択します。
Sections
ディレクトリの中から、cart-template.liquid
をクリックします。- Liquidコードの中で
form
内の次のコードを探します。
<footer class="cart__footer">
- 上記のコードの1つ前の行に、以下のコードを貼り付けてください。
{% render 'cart-attributes' %}
Save
をクリックします。
※ドロワータイプのカートの場合
Boundlessテーマは通常のカートページ(/cart)の他に、右端から出てくるドロワータイプのカートも選択できます。
ドロワータイプのカートを利用する場合は以下の変更をする必要があります。
- Shopify管理画面から、
オンラインストア
>テーマ
をクリックします。 - 編集したいテーマを選択し、
アクション
>コードを編集する
をクリックします。 Layout
ディレクトリの中から、theme.liquid
をクリックします。- Liquidコードの中で
form
内の次のコードを探します。
{% endraw %}{% if settings.cart_notes_enable %}{% raw %}
- 上記のコードの1つ前の行に、以下のコードを貼り付けてください。
{% endraw %}{% render 'cart-attributes-noscript' %}{% raw %}
Save
をクリックします。
5-b-6.テーマ「Brooklyn」の場合
- Shopify管理画面から、
オンラインストア
>テーマ
をクリックします。 - 編集したいテーマを選択します。
Sections
ディレクトリの中から、template/cart.liquid
をクリックします。- Liquidコードの中で
form
内の次のコードを探します。
<button type="submit" name="update" class="btn--secondary update-cart">{{ 'cart.general.update' | t }}</button>
- 上記のコードの1つ前の行に、以下のコードを貼り付けてください。
{% render 'cart-attributes' %}
Save
をクリックします。
※Brooklynテーマは通常のカートページ(/cart)の他に、右端から出てくるドロワータイプのカートも選択できます。
5-b-7.その他のテーマの場合
ディレクトリの中から、以下のようなcart liquidがあるかご確認ください。templates/cart.liquid
sections/cart-template.liquid
この中で、以下のformタグを探してください。<form action="/cart" method="post"></form>
上記formタグの内側に、以下のコードを設置してください。
{% render 'cart-attributes' %}
手順3.注文確認メールに配送希望日・配送時間帯を表示する ※任意
1.Shopify管理画面から、 設定
> 通知
> 注文管理 > 注文の確認
をクリックします。


2.下記のliquid変数で取得できます。
配送希望日: {{ attributes["配送希望日"] }}
配送時間帯: {{ attributes["配送時間帯"] }}

もしデフォルトのメールテンプレートから変更していない場合は、以下のコードで上書きすることでも可能です。
{% capture email_title %}ご購入いただきありがとうございました! {% endcapture %}
{% capture email_body %}
{% if requires_shipping %}
{{ customer.first_name }}さん、こんにちは。あなたの注文の発送準備中です。商品を発送したら、改めてお知らせいたします。
{% endif %}
{% endcapture %}
<!DOCTYPE html>
<html lang="ja">
<head>
<title>{{ email_title }}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
<style>
.button__cell { background: {{ shop.email_accent_color }}; }
a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
</style>
</head>
<body>
<table class="body">
<tr>
<td>
<table class="header row">
<tr>
<td class="header__cell">
<center>
<table class="container">
<tr>
<td>
<table class="row">
<tr>
<td class="shop-name__cell">
{%- if shop.email_logo_url %}
<img src="{{shop.email_logo_url}}" alt="{{ shop.name }}" width="{{ shop.email_logo_width }}">
{%- else %}
<h1 class="shop-name__text">
<a href="{{shop.url}}">{{ shop.name }}</a>
</h1>
{%- endif %}
</td>
<td class="order-number__cell">
<span class="order-number__text">
注文 {{ order_name }}
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row content">
<tr>
<td class="content__cell">
<center>
<table class="container">
<tr>
<td>
<h2>{{ email_title }}</h2>
<p>{{ email_body }}</p>
{% if order_status_url %}
<table class="row actions">
<tr>
<td class="empty-line"> </td>
</tr>
<tr>
<td class="actions__cell">
<table class="button main-action-cell">
<tr>
<td class="button__cell"><a href="{{ order_status_url }}" class="button__text">注文を表示する</a></td>
</tr>
</table>
{% if shop.url %}
<table class="link secondary-action-cell">
<tr>
<td class="link__cell">または<a href="{{ shop.url }}">ストアにアクセスする</a></td>
</tr>
</table>
{% endif %}
</td>
</tr>
</table>
{% else %}
{% if shop.url %}
<table class="row actions">
<tr>
<td class="actions__cell">
<table class="button main-action-cell">
<tr>
<td class="button__cell"><a href="{{ shop.url }}" class="button__text">ストアにアクセスする</a></td>
</tr>
</table>
</td>
</tr>
</table>
{% endif %}
{% endif %}
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row section">
<tr>
<td class="section__cell">
<center>
<table class="container">
<tr>
<td>
<h3>注文概要</h3>
</td>
</tr>
</table>
<table class="container">
<tr>
<td>
<table class="row">
{% for line in subtotal_line_items %}
<tr class="order-list__item">
<td class="order-list__item__cell">
<table>
<td>
{% if line.image %}
<img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
{% endif %}
</td>
<td class="order-list__product-description-cell">
{% if line.product.title %}
{% assign line_title = line.product.title %}
{% else %}
{% assign line_title = line.title %}
{% endif %}
{% if line.quantity < line.quantity %}
{% capture line_display %} {{ line.quantity }} of {{ line.quantity }} {% endcapture %}
{% else %}
{% assign line_display = line.quantity %}
{% endif %}
<span class="order-list__item-title">{{ line_title }} × {{ line_display }}</span><br/>
{% if line.variant.title != 'Default Title' %}
<span class="order-list__item-variant">{{ line.variant.title }}</span><br/>
{% endif %}
{% if line.refunded_quantity > 0 %}
<span class="order-list__item-refunded">Refunded</span>
{% endif %}
{% if line.discount_allocations %}
{% for discount_allocation in line.discount_allocations %}
{% if discount_allocation.discount_application.target_selection != 'all' %}
<span class="order-list__item-discount-allocation">
<img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
<span>
{{ discount_allocation.discount_application.title | upcase }}
(-{{ discount_allocation.amount | money }})
</span>
</span>
{% endif %}
{% endfor %}
{% endif %}
</td>
<td class="order-list__price-cell">
{% if line.original_line_price != line.final_line_price %}
<del class="order-list__item-original-price">{{ line.original_line_price | money }}</del>
{% endif %}
<p class="order-list__item-price">
{% if line.final_line_price > 0 %}
{{ line.final_line_price | money }}
{% else %}
無料
{% endif %}
</p>
</td>
</table>
</td>
</tr>{% endfor %}
</table>
<table class="row subtotal-lines">
<tr>
<td class="subtotal-spacer"></td>
<td>
<table class="row subtotal-table">
{% for discount_application in discount_applications %}
{% if discount_application.target_selection == 'all' %}
{% capture discount_title %}
{% if discount_application.title %}
{{ discount_application.title | upcase }}
{% else %}
ディスカウント
{% endif %}
{% endcapture %}
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>ディスカウント</span>
<span class="subtotal-line__discount">
<img src="{{ 'notifications/discounttag.png' | shopify_asset_url }}" width="18" height="18" class="discount-tag-icon" />
<span class="subtotal-line__discount-title">{{ discount_title }}</span>
</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>-{{ discount_application.total_allocated_amount | money }}</strong>
</td>
</tr>
{% endif %}
{% endfor %}
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>小計</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ subtotal_price | money }}</strong>
</td>
</tr>
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>配送</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ shipping_price | money }}</strong>
</td>
</tr>
{% for line in tax_lines %}
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>{{ line.title }}</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ line.price | money }}</strong>
</td>
</tr>
{% endfor %}
{% if total_tip and total_tip > 0 %}
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>Tip</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ total_tip | money }}</strong>
</td>
</tr>
{% endif %}
</table>
<table class="row subtotal-table subtotal-table--total">
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>合計</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ total_price | money_with_currency }}</strong>
</td>
</tr>
</table>
{% if total_discounts > 0 %}
<p class="total-discount">
You saved <span class="total-discount--amount">{{ total_discounts | money }}</span>
</p>
{% endif %}
{% assign transaction_size = 0 %}
{% assign transaction_amount = 0 %}
{% for transaction in transactions %}
{% unless transaction.kind == "capture" or transaction.kind == "void" %}
{% assign transaction_size = transaction_size | plus: 1 %}
{% assign transaction_amount = transaction_amount | plus: transaction.amount %}
{% endunless %}
{% endfor %}
{% if transaction_size > 1 or transaction_amount < total_price %}
<table class="row subtotal-table">
<tr><td colspan="2" class="subtotal-table__line"></td></tr>
<tr><td colspan="2" class="subtotal-table__small-space"></td></tr>
{% for transaction in transactions %}
{% if transaction.status == "success" and transaction.kind == "authorization" or transaction.kind == "sale" %}
{% if transaction.payment_details.credit_card_company %}
{% capture transaction_name %}{{ transaction.payment_details.credit_card_company }} (ending in {{ transaction.payment_details.credit_card_last_four_digits }}){% endcapture %}
{% else %}
{% capture transaction_name %}{{ transaction.gateway | replace: "_", " " | capitalize }}{% endcapture %}
{% endif %}
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>{{transaction_name}}</span>
</p>
</td>
<td class="subtotal-line__value">
<strong>{{ transaction.amount | money }}</strong>
</td>
</tr>
{% endif %}
{% if transaction.kind == 'refund' %}
{% if transaction.payment_details.credit_card_company %}
{% assign refund_method_title = transaction.payment_details.credit_card_company %}
{% else %}
{% assign refund_method_title = transaction.gateway %}
{% endif %}
<tr class="subtotal-line">
<td class="subtotal-line__title">
<p>
<span>返金</span>
<br>
<small>{{ refund_method_title | capitalize }}</small>
</p>
</td>
<td class="subtotal-line__value">
<strong>- {{ transaction.amount | money }}</strong>
</td>
</tr>
{% endif %}
{% endfor %}
</table>
{% endif %}
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row section">
<tr>
<td class="section__cell">
<center>
<table class="container">
<tr>
<td>
<h3>お客様情報</h3>
</td>
</tr>
</table>
<table class="container">
<tr>
<td>
<table class="row">
<tr>
{% if requires_shipping and shipping_address %}
<td class="customer-info__item">
<h4>配送先住所</h4>
{{ shipping_address | format_address }}
</td>
{% endif %}
{% if billing_address %}
<td class="customer-info__item">
<h4>請求先住所</h4>
{{ billing_address | format_address }}
</td>
{% endif %}
</tr>
</table>
<table class="row">
<tr>
{% if requires_shipping and shipping_address %}
<td class="customer-info__item">
<h4>配送方法</h4>
<p>{{ shipping_method.title }}</p>
</td>
{% endif %}
{% assign transaction_count = transactions | size %}
{% if transaction_count > 0 %}
<td class="customer-info__item">
<h4>決済方法</h4>
{% for transaction in transactions %}
{% if transaction.status == "success" or transaction.status == "pending" %}
{% if transaction.kind == "authorization" or transaction.kind == "sale" %}
<p class="customer-info__item-content">
{% if transaction.payment_details.credit_card_company %}
{% capture credit_card_url %}notifications/{{ transaction.payment_details.credit_card_company | downcase | replace: " ", "_" }}.png{% endcapture %}
<img src="{{ credit_card_url | shopify_asset_url }}" class="customer-info__item-credit" height="24">
<span>決済方法 — <strong>{{ transaction.amount | money }}</strong></span>
{% else %}
{{ transaction.gateway | replace: "_", " " | capitalize }} — <strong>{{ transaction.amount | money }}</strong>
{% endif %}
</p>
{% endif %}
{% endif %}
{% endfor %}
</td>
{% endif %}
</tr>
<tr><td>
{% if attributes["配送希望日"] %}
<h4>配送希望日</h4>
{{ attributes["配送希望日"] }}
{% endif %}
{% if attributes["配送時間帯"] %}
<h4>配送時間帯</h4>
{{ attributes["配送時間帯"] }}
{% endif %}
</td></tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<table class="row footer">
<tr>
<td class="footer__cell">
<center>
<table class="container">
<tr>
<td>
<p class="disclaimer__subtext">ご不明な点がございましたら、このメールにご返信いただくか、<a href="mailto:{{ shop.email }}">{{ shop.email }}</a>までご連絡ください。</p>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
<img src="{{ 'notifications/spacer.png' | shopify_asset_url }}" class="spacer" height="1" />
</td>
</tr>
</table>
</body>
</html>
配送希望日の設定に関する補足(2020.12.23追記)
ケース1)「日数を営業日換算する」にチェックがない場合


ケース2)「日数を営業日換算する」にチェックした場合


ケース3 2020年年末設定例)
最短で指定できる配送希望日:2 /最長で指定できる配送希望日:5 /
日数を営業日で換算 /長期休暇期間:12月28日~1月4日

設定がうまくいかない場合
アプリが正しく動作しない(iOSでご利用の場合)
iOS 11以降では、「サイト越えトラッキングを防ぐ」がオン(有効)になっている場合があり、その状態では、一部のサービスを利用できません。
アプリが正しく動作しない状況の場合にはまず、この「サイト越えトラッキングを防ぐ」の設定をご確認ください。
※「サイト越えトラッキングを防ぐ」の機能設定変更は、お客様ご自身の責任の下、行ってください。
確認手順
1:お使いの端末のホーム画面から「設定」を選択

2:「Safari」を選択
3:「サイト越えトラッキングを防ぐ」が緑色になっている場合は、スライダ(白丸)を左にスライドさせます。

そのほか、よくある質問ページ をご確認ください。
解決しなかった場合は こちらのフォーム からお気軽にお問い合わせください。
御社のShopifyサイトへの設置代行(有償サービス)も行っております。
お急ぎの場合はご利用ください。ご希望の際は問い合わせフォームからその旨ご連絡ください。