Shopifyのカートにお届け時間を追加する方法【コピペOK】

Shopify

ごきげんよーう

先日Shopifyにお届け指定日を追加する方法をご紹介しました。

 

Shopifyのカートにお届け指定日を追加する方法【コピペOK】
ごきげんよーう 今回は Shopifyにお届け指定を追加するにはどうすれば良いんだろう…? という方に向けた記事です! 色々と便利なShopifyですが、実はお届け指定日はデフォル...

 

せっかくならお届け日だけじゃなく、お届け時間も指定できるようにしたいですよね!
というわけで今回はお届け時間の追加方法をご紹介します!

 

こちらの記事を参考にされる場合は自己責任でお願いします。
何かあった時に元に戻せるように、必ずテーマを複製+テスト注文をしてから本番のストアに反映してくださいね。

 

スポンサーリンク

お届け時間の設定をしよう

テーマを複製しよう

手順はお届け日指定の時と一緒です。

お届け日指定の時と同じようにテーマを複製しておきましょう。
ホーム画面→オンラインストア→テーマの「アクション」から「複製する」を選択します。

テーマの名前は好きなものに変更してOKです!

 

スクリーンショット 2021-01-29 21.14.34

 

ファイルを作成しよう

次にファイルを作成していきます。
テーマのアクション→「コードを編集する」を選択します。

 

スクリーンショット 2021-01-29 21.16.21

 

Snippetsディレクトリから「新しいSnippetsを追加する」を選択します。

その後、ファイルを作成します。
好きな名前を入力して「スニペットを作成する」ボタンを押します。

ファイル名は何でも良いですが、今回は時間なので「time.liquid」という名前にしました。
お届け日の指定の時と同様、拡張子は「.liquid」になるようにします。

 

time

 

jQuery UIを導入しよう

こちらはお届け日指定の際に既に記述されている方は飛ばしてOKです!

まだ導入してないよーって方は下記の記事の「jQuery UIを導入しよう」を参照してコードを追記してください。

 

Shopifyのカートにお届け指定日を追加する方法【コピペOK】
ごきげんよーう 今回は Shopifyにお届け指定を追加するにはどうすれば良いんだろう…? という方に向けた記事です! 色々と便利なShopifyですが、実はお届け指定日はデフォル...

コードを編集しよう

お届け日指定を既に設定したことのある方は、ここまで割とサクサク来れたのではないでしょうか?
さて、ここからはコードの編集です!

cart-template.liquid(無ければcart.liquidファイル)を探します。
サイドバー左上に「cart」と入力して探してみてくださいね。

 

cart

 

ファイルの空いている場所に下記のコードを貼り付けましょう。

HTMLタグ(<></>)の中に挿入すると、見た目が崩れる可能性があります。
必ず空いている場所に貼り付けてくださいね。

 

<!– 1/29追加 –>
{% render ‘time’ %}
<!– 1/29追加 –>
お届け日を設定されている方は {% render ‘day’ %}のすぐ下に書くとわかりやすいと思います。
rendeer_time

renderの後ろは先ほどSnippetsディレクトリに作ったファイルの名前です。
「time.liquid」以外の名前にした方は適宜変更してください。

time.liquidファイルのコードを編集しよう

ここからのコードはお届け日指定の時と大きく変わります。
とはいえ設定方法自体は変わらないので、コピペでどんどん進みましょう!

 

time.liquidに下記のコードを貼り付けて右上の「保存する」ボタンを押します。

 

<!– 配送時間の選択肢表示 –>
<div class=”app-deliverydate app-deliverydate–time”>
<label for=”delivery_time” class=”delivery_time”>配送時間を選択</label>
<select id=”delivery_time” name=”attributes[delivery_time]”>
<option value=”指定なし”{% if cart.attributes[“delivery_time”] == “指定なし” %}  selected{% endif %}>指定なし</option>
<option value=”午前中(8時-12時)”{% if cart.attributes[“delivery_time”] == “午前中(8時-12時)” %} selected{% endif %}>午前中(8時-12時)</option>
<option value=”14時-16時”{% if cart.attributes[“delivery_time”] == “14時-16時” %}  selected{% endif %}>14時-16時</option>
<option value=”16時-18時”{% if cart.attributes[“delivery_time”] == “16時-18時” %}  selected{% endif %}>16時-18時</option>
<option value=”18時-20時”{% if cart.attributes[“delivery_time”] == “18時-20時” %}  selected{% endif %}>18時-20時</option>
<option value=”19時-21時”{% if cart.attributes[“delivery_time”] == “19時-21時” %}  selected{% endif %}>19時-21時</option>
</select>
</div>

 

時間は好きな時間に変更可能です。
不要な時間帯があれば<option></option>を削除してくださいね。

 

実際のストアに下記のように表示されてればOKです!
shopping_cart

お届け日がメールに表示されるようにしよう

ここまで来たらあと少しです!
お客様に届く注文メールにも何時に商品が届くのか設定しましょう。
管理画面の設定→通知を開きます。
setting
注文の確認をクリックします。
注文の確認
好きな場所に下記のコードを貼りましょう。
<h2>配送時間</h2>
<h3>{{ attributes.delivery_time }}</h3>
※{% endcapture %}の中にコードを書きましょう。
この外に出すと表示されなくなります。
配送日の指定をしている場合はその下に入れてあげると良いかもですね。
コードの貼り付け
ここまで出来たら、テスト注文をしてみましょう。
下記のようにメールにお届け時間が表示されていればOKです!
ご注文内容の確認

おわりに

お届け時間についての設定、いかがでしたか?
実はこちらはアプリを導入すれば簡単にできるのですが、わたしが導入したアプリには「指定なし」の選択肢がなかったんですよね…
しかもアプリは有料なので、お届け時間指定のためだけに毎月お金を払うのも勿体無い!
というわけで、今回自分で作ってみました!
お届け時間指定の参考になれば嬉しいです!
ではでは〜

コメント

タイトルとURLをコピーしました