※ご利用のテーマに対して、アプリの機能を適用させる必要がございます。
- 1. 全てのテーマにおける共通手順
- 2.「アプリでテーマを拡張する」場合の手順
- ※アプリブロックで意図する配置ができない場合は「アプリをテーマに埋め込む」を活用ください。
- 「アプリをテーマに埋め込む」を有効化しても表示されない場合
- 3. Liquidコードを自動編集する場合（OS1.0)
- 4.カートページのLiquidコードを手動で編集する場合の手順
1. 全てのテーマにおける共通手順
- Shopify管理画面のメニューからアプリ管理＞配送日時指定.amp＞導入手順をクリックします。
- インストール先のテーマを選択します。現在ショップでご利用中のOS2.0対応のテーマにインストールする場合は「アプリでのテーマを拡張」または「アプリをテーマに埋め込む」を選択します。
現在ショップでご利用中ではないテーマにインストールする場合は、「テーマ一覧から選択して導入」を選択し、インストールするテーマを選択し「次へ」を選択してください。
以降の手順は、ご利用のテーマや手順により異なります。画面に従って、以下のいずれかの手順にお進みください。
2.「アプリでテーマを拡張する」場合の手順
OS2.0対応の一部のテーマでは、コードを編集せずに簡単に導入することが可能です。
1. アプリでテーマを拡張するをクリックします。
2. ストアのカスタマイズ画面 > カートマークをクリックして、カートのカスタマイズ画面を開きます。
モジュールを設置するのは、「カート画面」でございます。商品ページやその他の画面には設置しないでください。誤って商品ページに設置したことで、モジュールがうまく表示されないというお問い合わせをしばしばいただくのですが、カート画面に設置し直すことで解決いたしますので、ご確認くださいませ。
3. 左側メニューのブロックを追加 > アプリより、「配送日時指定.amp」を選択してください。
「配送日時指定.amp」とだけ書かれたブロックのみをご選択ください。
「最短お届け希望日時の表示」というブロックではございませんのでご注意ください。
4. プレビューを見ながら、モジュールの位置を調整します。
5. 保存するをクリックして完了です。
※アプリブロックで意図する配置ができない場合は「アプリをテーマに埋め込む」を活用ください。
管理画面の手順に従い、テーマカスタマイザーでアプリの埋め込み機能（App Embed）を有効化します。
手順:
1. 下のボタンをクリックしてテーマカスタマイザーを開きます
2. 画面左側の「アプリ埋め込み」セクションを確認します。
3. 「配送日時モジュール埋め込み」のトグルをONにします。
4. 右上の「保存」ボタンをクリックします。
この設定により、カートページの「購入ボタン」の上に、配送日時指定モジュールを表示できます。
「アプリをテーマに埋め込む」を有効化しても表示されない場合
ご利用のテーマによってはアプリの埋め込みでも表示されない場合があります。 その場合は、Liquidコードを手動で編集していただく必要がございます。
OS2.0対応のテーマですとデフォルトでは、Liquidコードを手動で編集するために必要なテンプレートが入っていない状態でございます。ですので、アプリ管理画面の アドバンスド設定 > テーマスニペットの再設置をクリックして、それを完了させた上で、
4.カートページのLiquidコードを手動で編集する場合の手順
をお試しください。 なお、テーマスニペットの再設置はライブテーマのみに反映されるものとなっておりますので、その点はご注意ください。
もしライブテーマに影響を与えず、控えのテーマのみで本手順を実行する必要がある場合は、控えのテーマに以下の4つのテンプレートを追加してください。（確認して、すでに同名のテンプレートが設置されていた場合は、対応不要です。）
snippets/cart-attributes.liquid
snippets/cart-attributes-noscript.liquid
assets/cart-attributes.scss.liquid
snippets/cart-attributes-os1.liquid
3. Liquidコードを自動編集する場合（OS1.0)
Liquidコードの自動編集の自動編集を実行するをクリックします。その次の画面で、「選択したテーマへのインストールが完了しました」と表示されていたら反映完了です。
※この手順は、OS2.0未対応の無料テーマのみに対応しています。(以下一覧)
Debut / Venture / Simple / Boundless / Supply / Narrative / Brooklyn / Minimal / Express
※参考：自動編集機能で挿入されるコードの詳細
4.カートページのLiquidコードを手動で編集する場合の手順
※主に、有料テーマをご利用の場合
※OS2.0対応テーマをご利用の場合は、本手順開始前に必ず、こちらを参考にテーマスニペットの再設置、または手動での必要なテンプレートの設置を行ってください。
1. Shopify管理画面の左側メニュー、オンラインストア＞テーマをクリックします。「現在のテーマ」内のアクション＞コードを編集する を選択するとコード編集画面が表示されます。
※「現在のテーマ」以外のテーマを選択した場合は、選択したテーマで同様の手順を実施してください。
2. 画面左側のディレクトリの中から、cart画面を編集するliquidを開いてください。
cart.liquidcart-template.liquid3. 上記liquid内の任意の位置に、以下のコードを設置してください。
<div id="cart-delivery-datetime_section" data-os="1.0" data-timezones="{% for delivery_timezone in shop.metafields.cart_delivery_app['delivery_timezones_key'] %}'{{delivery_timezone}}',{%endfor%}"></div>上記コード設置位置に関しては、必ずここでなければいけないという正解はなく、少なくともcart画面を編集するliquid内であればどこかにコードを挿入すれば、カート画面のどこかにモジュールが設置されます。
ただ、テーマの仕様によって適切な位置とそうでない位置があるかと思いますので、まずは任意の位置にコードを挿入いただきまして、モジュールが見えない、見えづらい、使いづらい場合は、その位置を前後にご調整いただきますようお願い申し上げます。
5. Saveをクリックします。
弊社では同じ環境でのテストができないため具体的な手順を個別でご案内することはできないことを、何卒ご理解いただけますと幸いです。