※ご利用のテーマに対して、アプリの機能を適用させる必要がございます。
- 1. 全てのテーマにおける共通手順
- 2.「アプリでテーマを拡張する」と出てきた場合の手順
- ※アプリブロックで意図する配置ができない場合
- 3. Liquidコードを自動編集
- ※参考：自動編集機能で挿入されるコードの詳細
- 4.カートページのLiquidコードを手動で編集する場合の手順
1. 全てのテーマにおける共通手順
- Shopify管理画面のメニューからアプリ管理＞配送日時指定.amp＞導入手順をクリックします。
- インストール先のテーマを選択します。現在ショップでご利用中のOS2.0対応のテーマにインストールする場合は「アプリでのテーマを拡張」を選択します。
現在ショップでご利用中ではないテーマにインストールする場合は、「テーマ一覧から選択して導入」を選択し、インストールするテーマを選択し「次へ」を選択してください。
以降の手順は、ご利用のテーマにより異なります。画面に従って、以下のいずれかの手順にお進みください。
2.「アプリでテーマを拡張する」と出てきた場合の手順
OS2.0対応の一部のテーマでは、コードを編集せずに簡単に導入することが可能です。
1. アプリでテーマを拡張するをクリックします。
2. ストアのカスタマイズ画面 > カートマークをクリックして、カートのカスタマイズ画面を開きます。
3. 左側メニューのブロックを追加 > アプリより、「配送日時指定.amp」を選択してください。
4. プレビューを見ながら、モジュールの位置を調整します。
5. 保存するをクリックして完了です。
※アプリブロックで意図する配置ができない場合
もしライブテーマに影響を与えず、控えのテーマのみで本手順を実行する必要がある場合は、控えのテーマに以下の4つのテンプレートを追加してください。（確認して、すでに同名のテンプレートが設置されていた場合は、対応不要です。）
3. Liquidコードを自動編集
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をクリックします。
弊社では同じ環境でのテストができないため具体的な手順を個別でご案内することはできないことを、何卒ご理解いただけますと幸いです。