スニペットを利用したアプリの導入方法

本記事はスニペットを使ってアプリを導入する方法について説明しています。
スニペットを利用することで、アプリブロックでは表示が難しい箇所や、旧テーマでも好きな位置にオプションを表示することができます。

Online Store 2.0対応のテーマをご利用の方は、アプリブロックが利用できます。
スニペットの設定は、アプリブロックが利用できない環境でのみご利用ください。
アプリでテーマを拡張する · Shopify ヘルプセンター

スニペット設定手順

初めに下記のページを参考に、テーマコード編集画面を開いてください。

スニペット設定手順

• 以下のスニペットをコピーします。
  • 商品ページの場合： <div id="dw-product-gift-option"></div>
  • カートページの場合：<div id="dw-cart-gift-option"></div>
• 挿入したいページのテンプレートを開きます（テンプレートの探し方については次のセクションを参照してください）。
• スニペットを貼り付けます。

テンプレートの探し方

Debutテーマを例に、ウィジェットの表示位置を変更するためのスニペット挿入箇所を見つける方法を説明します。

新テーマでも同様の手順で行えます

1. サイドバーからTemplates > cart.liquid を開きます。
   • 
2. {% section cart-template.liquid %} によりテンプレートが読み込まれているので、Section > cart-template.liquid を探します。初期状態では、</form> のすぐ上に自動でスニペットが挿入されています。
   • 
3. 最後にお好みの位置にスニペットを貼り付けて、プレビューからウィジェットが表示できていることが確認できれば完了です。
   • 

注意事項

• テーマによって構成が異なりますので、ご自身のテーマに合わせてスニペットの貼り付け位置を調整してください。
• ウィジェットは1箇所にしか表示できません。複数のスニペットを挿入しても動作しません。
• ギフトオプションアプリをアンインストールしても、設定したスニペットの記述は残ります。動作に影響はしませんが、不要な場合は手動で削除してください。

終わりに

ご希望の位置にウィジェットを設置できましたでしょうか？

今後はアプリブロックに移行していくことになり、テーマエディタを使ってノーコードでのカスタマイズが推奨されます。ただ、まだ旧テーマをのストアはたくさんありますし、テーマエディタでは対応できないケースがあります。

ギフトオプションとしては新旧どちらも対象に幅広いテーマに対応できるように開発しています。カスタマイズ性・デザイン性を損なわないようにウィジェットの設置方法を選択してもらえれば良いなと思います。

今回の作業はテーマ構成の知識が少し要求される内容だったかと思います。そして、テーマによっては、ファイル名や構成が異なる場合があり、もしかするとうまく設置箇所を見つけられない方もおられたかもしれません。そういった場合は、お問い合わいただければ全力でサポートいたしますので、アプリページよりご連絡お待ちしております。

以上。最後までお読み頂きまして、ありがとうございました。