テイクアウト&デリバリー:導入手順

テイクアウト&デリバリー 設定確認済みテーマ

「テイクアウト&デリバリー」は下記テーマに設定可能な旨、確認済みです
  Debut
  Minimal
  Supply
  Brooklyn
  Playful


設定完了後のカートイメージ

手順1と手順2の作業を完了すると、カート画面に「テイクアウト」と「デリバリー」のタイルが表示され指定できるようになります。


「テイクアウト」のタイルをクリックするとテイクアウトの希望日時と連絡先電話番号の入力欄が、店舗情報(商品の受け取り場所)とともに表示されます。


日付もしくは時間のプルダウンメニューをクリックすると、以下のようなウインドウが立ち上がるので、受取日と受取時間を選択し、「決定」をクリックします。


「デリバリー」のタイルをクリックすると配達エリアの確認のため、郵便番号の入力スペースが表示されます。


手順1.アプリ管理画面での設定

<受け取り方法と店舗営業情報の設定>

Shopify管理画面から、 アプリ管理 > テイクアウト&デリバリー をクリックし、 「テイクアウト&デリバリー」アプリの管理画面 を表示します。


  「テイクアウト&デリバリー」の管理画面>


1-1.受取方法と営業時間の設定

お客様の受取方法
  受け付けるものにチェックを入れます
  「テイクアウト」「デリバリー」いずれか、もしくは両方、設定できます。
   ※カート画面には、チェックを入れたものが選択肢として表示されます
開店時間、閉店時間
  店舗の営業時間を、〇〇:〇〇の表示形式(半角)で登録します
   ※時間表示例)8:00  19:00
中休み開始時間、終了時間(店舗に中休みの時間があれば 任意)
  店舗の営業時間内に中休み時間があれば、登録します
・休業日
  休業日となる曜日があれば、クリックして登録します(複数指定可)
  特定の休日を設定する場合は、「指定日」に日付を登録します
   ※登録例)9/1(半角月と日の間は半角スラッシュ)


1-2.提供商品情報とデリバリー、テイクアウト情報

・調理時間(分)
  商品を調理する場合に、出来上がりまでの時間を登録します
・配達時間(分)
  デリバリー可能エリアへの配達可能時間の目安を登録します
   ※「デリバリー」で受け付ける場合
・テイクアウト受取時間の間隔
  注文から受け取りまでの時間の目安を登録します
   ※「テイクアウト」で受け付ける場合
・デリバリー可能エリア(郵便番号)
  店舗を起点に、デリバリーが可能な範囲を郵便番号で指定します
   ※郵便番号7桁の内、可変部分を「*」(アスタリスク)で記載可能です
   ※例)100-0001 ・・・「100-0001」を指定しています
      100*   ・・・最初の3桁が「100」のエリア全てを含みます
      100-000* ・・・最初の6桁が「100-000」のエリア全てを含みます


1-3.店舗情報

・店舗名
・店舗住所

  一行目:店舗住所の郵便番号7桁をハイフン入り半角で登録し「住所を検索」をクリック
  二行目以降に、不足している店舗住所を登録します
・店舗電話番号(任意)

最後に「保存」をクリックします

手順2.テーマを編集

本アプリが対応確認が取れているテーマの場合は該当手順に沿って設定してください。
(Debut / Minimal / Supply / Brooklyn / Playful)

form内に以下のコードを追加します。

<div id="cart-attributes"></div>

現在のテーマを確認する

Shopify管理画面の左側メニュー「オンラインストア」「テーマ」の順にクリックします。
メニュー右側が「テーマ」の設定に関する画面になりますので、その中の「現在のテーマ」で確認できます。
次の2-1以降で説明しているコード編集画面は、「現在のテーマ」で選択されているテーマ名の右にあるプルダウンメニュー「アクション」をクリックし「コードを編集する」を選択すると表示されます。


2-1.テーマ「Debut」の場合

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

左の赤破線内がディレクトリ、右はディレクトリで選択したコードが表示されます

4.Liquidコードの中で form 内の次のコードを探します。

<div class="cart__buttons-container">

5.上記のコードの1つ前の行に、以下のコードを貼り付けてください。

<div id="cart-attributes"></div>

次のようになります。

...
<form action="/cart" method="post" novalidate class="cart">
    ...
    <div class="cart__shipping rte">{{ taxes_shipping_checkout }}</div>
    <div id="cart-attributes"></div>
    <div class="cart__buttons-container">
    ...
</form>
...

6.Save をクリック


2-2.テーマ「Minimal」の場合

1.Shopify管理画面から、 オンラインストア > テーマ をクリックします。
2.編集したいテーマを選択します。
3.Sections ディレクトリの中から、 cart-template.liquid をクリックします。
4.Liquidコードの中で form 内の次のコードを探します。

<p class="cart__policies"><em>{{ taxes_shipping_checkout }}</em></p>

5.上記のコードの1つ後ろの行に、以下のコードを貼り付けてください。

<div id="cart-attributes"></div>

6.Save (保存する)をクリックします。


2-3.テーマ「Supply」の場合

1.Shopify管理画面から、 オンラインストア > テーマ をクリックします。
2.編集したいテーマを選択します。
3.Templates ディレクトリの中から、 cart.liquid をクリックします。
4.Liquidコードの中で form 内の次のコードを探します。

<input type="submit" name="update" class="btn-secondary update-cart" value="{{ 'cart.general.update' | t }}">

5.上記のコードの1つ前の行に、以下のコードを貼り付けてください。

<div id="cart-attributes"></div>

6.Save(保存する)をクリックします。


2-4.テーマ「Brooklyn」の場合

1.Shopify管理画面から、 オンラインストア > テーマ をクリックします。
2.編集したいテーマを選択します。
3.Templates ディレクトリの中から、 cart.liquid をクリックします。
4.Liquidコードの中で form 内の次のコードを探します。

<button type="submit" name="update" class="btn--secondary update-cart">{{ 'cart.general.update' | t }}</button>

5.上記のコードの1つ前の行に、以下のコードを貼り付けてください。

<div id="cart-attributes"></div>

6.Save(保存する)をクリックします。


2-5.テーマ「Playful」の場合

1.Shopify管理画面から、 オンラインストア > テーマ をクリックします。
2.編集したいテーマを選択します。
3.Snippets ディレクトリの中から、 ajax-cart-template.liquid をクリックします。
4.Liquidコードの中で form 内の次のコードを探します。

{% endraw %}{% endif %}{% raw %}

5.上記のコードの1つ後の行に、以下のコードを貼り付けてください。

<div id="cart-attributes"></div>

6.Save(保存する)をクリックします。


設定がうまくいかない場合

よくある質問ページ をご確認ください。

解決しなかった場合は こちらのフォーム からお気軽にお問い合わせください。

御社のShopifyサイトへの設置代行(有償サービス)も行っております。
お急ぎの場合はご利用ください。ご希望の際は問い合わせフォームからその旨ご連絡ください。