※本ページの手順は、アプリ版のShopifyからだと正常にテーマの編集が反映されない場合があります。 恐れ入りますが、パソコンのブラウザで行っていただきますようお願い申し上げます。
- 1. 全てのテーマにおける共通手順
- 2.「アプリでテーマを拡張する」と出てきた場合の手順
- 3. Liquidコードを自動編集
- ※参考：自動編集機能で挿入されるコードの詳細
- 4.カートページのLiquidコードを手動で編集する場合の手順
1. 全てのテーマにおける共通手順
- Shopify管理画面のメニューからアプリ管理＞配送日時指定.amp＞導入手順をクリックします。
- インストール先のテーマを選択します。現在ショップでご利用中のOS2.0対応のテーマにインストールする場合は「アプリでのテーマを拡張」を選択します。
現在ショップでご利用中ではないテーマにインストールする場合は、「テーマ一覧から選択して導入」を選択し、インストールするテーマを選択し「次へ」を選択してください。
以降の手順は、ご利用のテーマにより異なります。画面に従って、以下のいずれかの手順にお進みください。
2.「アプリでテーマを拡張する」と出てきた場合の手順
OS2.0対応の一部のテーマでは、コードを編集せずに簡単に導入することが可能です。
1. アプリでテーマを拡張するをクリックします。
2. ストアのカスタマイズ画面 > カートマークをクリックして、カート画面のカスタマイズ画面開きます。
3. 左側メニューのブロックを追加 > アプリより、本アプリを選択してください。
4. プレビューを見ながら、モジュールの位置を調整します。
5. 保存するをクリックして完了です。
ただ、OS2.0対応のテーマですとデフォルトでは、Liquidコードを手動で編集するために必要なテンプレートが入っていない状態でございますので、アプリ管理画面のアドバンスド設定 > テーマスニペットの再設置をクリックして、それを完了させた上で以下の手動編集の手順をお試しください。
なお、テーマスニペットの再設置はライブテーマのみに反映されるものとなっておりますので、その点はご注意ください。
3. Liquidコードを自動編集
Liquidコードの自動編集の自動編集を実行するをクリックします。その次の画面で、「選択したテーマへのインストールが完了しました」と表示されていたら反映完了です。
※この手順は、OS2.0未対応の無料テーマのみに対応しています。(以下、2021.10時点での無料テーマ一覧)
Debut / Venture / Simple / Boundless / Supply / Narrative / Brooklyn / Minimal / Express
※参考：自動編集機能で挿入されるコードの詳細
本機能対象の各テーマにおいて、コードの編集内容は以下となっております。挿入されているコードを手動で削除することでモジュールを非表示にしたり、位置を手動で変更することでモジュールの配置を変えることも可能です。
・Debut
1．Shopify管理画面から、 オンラインストア > テーマ をクリックします。
2．編集したいテーマを選択します。
3．Sectionsディレクトリの中から、cart-template.liquid をクリックします。
4．上記テンプレート内、<div class="cart__submit-controls">の手前に{% render"cart-attributes-os1"%}が挿入されています。
・Minimal
1．Shopify管理画面から、 オンラインストア > テーマ をクリックします。
2．編集したいテーマを選択します。
3．Sectionsディレクトリの中から、cart-template.liquid をクリックします。
4．上記テンプレート内、<a class="btn btn--secondary" href="{{ routes.all_products_collection_url }}">{{ 'cart.general.continue_shopping' | t }}</a>の１つ前の行に{% render"cart-attributes-os1"%}が挿入されています。
・Supply
1．Shopify管理画面から、 オンラインストア > テーマ をクリックします。
2．編集したいテーマを選択します。
3．Templatesディレクトリの中から、cart.liquid をクリックします。
4．上記テンプレート内、<input type="submit" name="update" class="btn-secondary update-cart" value="{{ 'cart.general.update' | t }}">の１つ前の行に{% render"cart-attributes-os1"%}が挿入されています。
・Narrative ※コード２つ
1．Shopify管理画面から、 オンラインストア > テーマ をクリックします。
2．編集したいテーマを選択します。
3．Sectionsディレクトリの中から、cart-template.liquid をクリックします。
4．上記テンプレート内、<div class="cart-subtotal">の１つ前の行に{% render"cart-attributes-os1"%}が挿入されています。5．Snippets ディレクトリの中から、cart-drawer.liquid をクリックします。6．上記テンプレート内、{% if settings.show_cart_note %}の手前に{% render"cart-attributes-os1"%}が挿入されています。
・Boundless ※コード２つ
1．Shopify管理画面から、 オンラインストア > テーマ をクリックします。
2．編集したいテーマを選択します。
3．Sectionsディレクトリの中から、cart-template.liquid をクリックします。
4．上記テンプレート内、<footer class="cart__footer">の１つ前の行に{% render"cart-attributes-os1"%}が挿入されています。5．Layout ディレクトリの中から、theme.liquid をクリックします。6．上記テンプレート内、{% endraw %}{% if settings.cart_notes_enable %}{% raw %}の手前に{% endraw %}{% render "cart-attributes-os1" %}{% raw %}が挿入されています。
・Brooklyn ※コード２つ
1．Shopify管理画面から、 オンラインストア > テーマ をクリックします。
2．編集したいテーマを選択します。
3．Templatesディレクトリの中から、cart.liquid をクリックします。
4．上記テンプレート内、<button type="submit" name="update" class="btn--secondary update-cart">{{ 'cart.general.update' | t }}</button>の手前に{% render"cart-attributes-os1"%}が挿入されています。5．Snippets ディレクトリの中から、ajax-cart-template.liquid をクリックします。6．上記テンプレート内、{% endraw %}{% if settings.cart_notes_enable %}{% raw %}の手前に{% endraw %}{% render "cart-attributes-os1" %}{% raw %}が挿入されています。
※コードの配置は、テーマのアップデートなどにより若干変わる可能性があります。
4.カートページのLiquidコードを手動で編集する場合の手順
※主に、有料テーマをご利用の場合
1. Shopify管理画面の左側メニュー、オンラインストア＞テーマをクリックします。「現在のテーマ」内のアクション＞コードを編集する を選択するとコード編集画面が表示されます。
※「現在のテーマ」以外のテーマを選択した場合は、選択したテーマで同様の手順を実施してください。
2. 画面左側のディレクトリの中から、cart画面を編集するliquidがあるかご確認ください。(以下は一例です。)
3. 上記Liquidコードのform内から次のコードを探して下さい。(以下は一例です。)
4. 上記コードの内側(><の間)に、以下のコードを設置してください。
設置後のイメージは以下のようになります。
なお、上記3、4の、コード設置位置に関しては、必ずここでなければいけないという正解はなく、少なくともcart画面を編集するliquid内であればどこかにコードを挿入すれば、カート画面のどこかにモジュールが設置されます。
つきましては、上記通りの設置位置が見つからない場合も、まずは任意の位置にコードを挿入いただきまして、モジュールが見えない、見えづらい、使いづらい場合は、その位置を前後に調整いただきますようお願い申し上げます。
5. Saveをクリックします。
弊社では同じ環境でのテストができないため具体的な手順を個別でご案内することはできないのですが、有償にはなるものの実際にストア管理の権限をいただき代行で導入させていただくことが可能です。ご希望の場合はお問い合わせくださいませ。