※Liquidコードの編集機能の使い方はこちら
※2021/12/01 追記 アプリブロックで導入できるようになりました。
通常カートページへの設置手順
1. 導入手順を進め、アプリでテーマを拡張するをクリックします。
2. ストアのカスタマイズ画面 > カートマークをクリックして、カート画面のカスタマイズ画面開きます。
3. 左側メニューのブロックを追加 > アプリより、本アプリを選択してください。
4. プレビューを見ながら、モジュールの位置を調整します。
5. 保存するをクリックして完了です。
※ポップアップの「購入手続きへ」ボタンを削除する方法
カートに商品を入れた際に出てくるポップアップ内、「購入手続きへ」のボタンから進むと、「今すぐ購入ボタン」と同じ原理で、配送日時を指定することができません。そのため、こちらの方法で「購入手続きへ」ボタンを削除することをお勧めいたします。
1. Shopify管理画面の左側メニュー、オンラインストア＞テーマをクリックします。「現在のテーマ」内のアクション＞コードを編集するを選択するとコード編集画面が表示されます。
2. 画面左側のディレクトリの中から、以下のテンプレートを探して開いてください。
cart-notification.liquid3. 上記テンプレート内から、以下のコードを削除して保存してください。
<form action="{{ routes.cart_url }}" method="post" id="cart-notification-form">
<button class="button button--primary button--full-width" name="checkout">{{ 'sections.cart.checkout' | t }}</button>
</form>このようになります。
ドロワーカートへの設置手順
1. テーマスニペットの再設置をクリック>ポップアップのOKをクリック
※「上書き更新…」というのは、Dawnの場合は基本的に考慮不要ですのでご安心ください。
2. Dawnのコード編集画面にて、snippets/cart-drawer.liquidを開く。
3. 370-373行目周辺、{%- endif -%}と<!-- Start blocks -→の間に、以下のコードを設置して保存する。
{% render"cart-attributes-os1"%}
上記の配置にすると、このように↓小計の上にモジュールが設置されます。
配置は自由なので、もしこれよりも上に設置したい、下に設置しないなどのご希望がある場合は、コードの挿入位置をご自由に調整してください。（カート内の他の要素との兼ね合いにより、綺麗に配置されない位置もありますので、実際に反映された画面を確認しながら調整してください。）