and.d ヘルプセンター
Open navigation

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

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

※本ページの手順は、アプリ版のShopifyからだと正常にテーマの編集が反映されない場合があります。
  恐れ入りますが、パソコンのブラウザで行っていただきますようお願い申し上げます。

2-1. 全てのテーマにおける共通手順

1.Shopify管理画面のメニューからアプリ管理配送日時指定.amp導入手順をクリックします。


2.インストール先のテーマを選択にて、ご利用のテーマをプルダウンメニューから選択します。


3. 実行して次のステップへをクリックします。

この次の手順は、ご利用のテーマにより異なります画面に従って、以下のいずれかの手順にお進みください。

2-2. 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>の1つ前の行に{% 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 }}">の1つ前の行に{% render"cart-attributes-os1"%}が挿入されています。

・Narrative  ※コード2つ

1.Shopify管理画面から、 オンラインストア > テーマ をクリックします。

2.編集したいテーマを選択します。

3.Sectionsディレクトリの中から、cart-template.liquid をクリックします。

4.上記テンプレート内、<div class="cart-subtotal">の1つ前の行に{% render"cart-attributes-os1"%}が挿入されています。
5.Snippets ディレクトリの中から、cart-drawer.liquid をクリックします。
6.上記テンプレート内、{% if settings.show_cart_note %}の手前{% render"cart-attributes-os1"%}が挿入されています。

・Boundless ※コード2つ

1.Shopify管理画面から、 オンラインストア > テーマ をクリックします。

2.編集したいテーマを選択します。

3.Sectionsディレクトリの中から、cart-template.liquid をクリックします。

4.上記テンプレート内、<footer class="cart__footer">の1つ前の行に{% render"cart-attributes-os1"%}が挿入されています。
5.Layout ディレクトリの中から、theme.liquid をクリックします。
6.上記テンプレート内、{% endraw %}{% if settings.cart_notes_enable %}{% raw %}の手前{% endraw %}{% render "cart-attributes-os1" %}{% raw %}が挿入されています。

・Brooklyn ※コード2つ

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 %}が挿入されています。


※コードの配置は、テーマのアップデートなどにより若干変わる可能性があります。


2-3.「アプリでテーマを拡張する」と出てきた場合の手順

OS2.0対応の一部のテーマでは、コードを編集せずに簡単に導入することが可能です。

1. アプリでテーマを拡張するをクリックします。



2. 
ストアのカスタマイズ画面 カートマークをクリックして、カート画面のカスタマイズ画面開きます。



3. 
左側メニューのブロックを追加 > アプリより、本アプリを選択してください。


4. 
プレビューを見ながら、モジュールの位置を調整します。



5. 保存する
をクリックして完了です。


OS2.0対応のテーマは、基本的に全てアプリブロックでの導入が前提となっております。ただ、テーマによってはアプリブロックでのモジュールの配置に融通が効かない場合もあり、アプリブロックで設置できる以上に細かく配置を調整したい場合は、Liquidコードを手動で編集していただく必要がございます。

ただ、OS2.0対応のテーマですとデフォルトでは、Liquidコードを手動で編集するために必要なテンプレートが入っていない状態でございますので、アプリ管理画面のアドバンスド設定 > テーマスニペットの再設置をクリックして、それを完了させた上で以下の手動編集の手順をお試しください。

なお、テーマスニペットの再設置はライブテーマのみに反映されるものとなっておりますので、その点はご注意ください。


2-4. カートページのLiquidコードを手動で編集する場合の手順

※主に、有料テーマをご利用の場合

1. Shopify管理画面の左側メニュー、オンラインストアテーマをクリックします。「現在のテーマ」内のアクションコードを編集するを選択するとコード編集画面が表示されます。


※「現在のテーマ」以外のテーマを選択した場合は、選択したテーマで同様の手順を実施してください。

2. 画面左側のディレクトリの中から、cart画面を編集するliquidがあるかご確認ください。(以下は一例です。)

cart.liquid
cart-template.liquid


3. 上記Liquidコードのform内から次のコードを探して下さい。(以下は一例です。)
<form action="/cart" method="post"></form>


4. 上記コードの内側(><の間)に、以下のコードを設置してください。

{% render"cart-attributes-os1"%}

設置後のイメージは以下のようになります。

<form action="/cart" method="post">{% render"cart-attributes-os1"%}</form>


なお、上記3、4の、コード設置位置に関しては、必ずここでなければいけないという正解はなく、
少なくとも
cart画面を編集するliquid内であればどこかにコードを挿入すれば、カート画面のどこかにモジュールが設置されます。

つきましては、上記通りの設置位置が見つからない場合も、まずは任意の位置にコードを挿入いただきまして、モジュールが見えない、見えづらい、使いづらい場合は、その位置を前後に調整いただきますようお願い申し上げます。

5. Saveをクリックします。

※有料テーマは種類が多く、Liquidコードの文言や配置がそれぞれのテーマによって異なるため、上記の手順通りに設定できない場合がございます。 

弊社では同じ環境でのテストができないため具体的な手順を個別でご案内することはできないのですが、有償にはなるものの実際にストア管理の権限をいただき代行で導入させていただくことが可能です。ご希望の場合はお問い合わせくださいませ。


☆よくある質問

インストール・導入について
アプリの基本動作について
カート内の画面表示、文言表記について
注文管理画面について
その他のよくある質問



この回答は役に立ちましたか? はい いいえ

フィードバックを送信
お役に立てなくて申し訳ありません。フィードバックを残し、このアーティクルを改善するのにどうかご協力ください。