🗒️

手順２. テーマを編集する

※ご利用のテーマに対して、アプリの機能を適用させる必要がございます。

💡

※本ページの手順は、アプリ版のShopifyからだと正常にテーマの編集が反映されない場合があります。恐れ入りますが、パソコンのブラウザで行っていただきますようお願い申し上げます。 ※本ページで紹介しているのは、カート画面にモジュールを設置する手順です。Shopify Plusのストアでチェックアウト画面にモジュールを設置することをご希望の場合は、こちら↓をご参照くださいませ。 🗒️2023.6.26 Shopify Plusプランをご利用のストア様は、チェックアウト画面で配送日時指定が可能になりました。

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を開いてください。

💡

以下はあくまでもliquidの名前の一例ですので、実際のliquidはこの通りの名前ではないことが多いですが、cart画面を編集するliquidは必ずどのテーマにも存在します。「cart」というワードが含まれていることがほとんどかと思います。（購入手続きへ進むボタンや小計の表示などの配置を編集できるliquidと同じです。）この点はテーマによって異なりますので弊社でも個別にご案内することはできないものでして、ご不明な場合は、「cart画面を編集するliquidはどれか」について、ご利用のテーマの開発元にご確認いただきますようお願い申し上げます。 ※テーマの開発元に相談する際、「配送日時指定.amp」の名前や、アプリの設定をしようとしているという旨が出ると、アプリの仕様なので分かりませんと断られてしまうことがありますので、あくまでもニュートラルにテーマの構成について知りたいという旨、「cart画面を編集するliquidを知りたい」という旨でご相談いただくとよろしいかと思います。

cart.liquid

cart-template.liquid

3.　上記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をクリックします。

💡

有料テーマは種類が多く、Liquidコードの文言や配置がそれぞれのテーマによって異なります。

弊社では同じ環境でのテストができないため具体的な手順を個別でご案内することはできないことを、何卒ご理解いただけますと幸いです。

NEXT⏭️🗒️手順３.　注文確認/通知メールに配送希望日・配送時間帯を表示する ※任意