‼️ カスタマイズ済みテーマのコード設置のご依頼は、現在受け付けておりません。
回答
テーマを独自カスタマイズしているストア向けのタグを「手動挿入」としてご用意しています。
お気に入り機能の「表示位置」「デザイン」を、テーマ側で自由にカスタマイズいただけます。
自動挿入が難しいテーマでも、タグを設置いただくことで機能利用・データ保存ができます。
対象ストア
- 基本のお気に入りをインストール&サブスクリプション済み
基本のお気に入りアプリ - テーマを大きくカスタマイズしている
- テーマ編集をエンジニアに依頼している
- 自動挿入非対応のテーマを使っている（自動挿入の対応テーマを知りたい）
わかること
- 手動挿入の仕組み
- よくある失敗と確認方法
手動挿入の仕組み
手動挿入モードでは、アプリ側で用意した特定の 「クラス名」 と 「データ属性（data-attributes）」 をHTML要素に付与することで、アプリのスクリプトが自動的に機能を紐付けます。
本アプリの手動挿入は、以下の3ステップで動作します。
- コアスクリプトの有効化：埋め込みアプリ設定でベース機能をONにする。
-
専用スニペットの作成：
snippets/comasopify-wishlist-button.liquidを作成し、汎用的なボタン部品を定義する。 -
スニペットの呼び出し：商品詳細や一覧の適切な位置で
{% render 'comasopify-wishlist-button' ... %}を実行する。
上記を満たすと、スクリプトがページ内の特定のクラス（.comasopify-wishlist-icon-button）とデータ属性（data-comasopify-product-handle など）を自動検知して機能を付与します。
商品詳細ページ（SKU単位の登録）
- 商品画像の上だと、競合する他の機能（画像アップ機能）が多いので、未公開テーマなどでテストを推奨します。
- 「カートに入れる」ボタンの直上または直下などは比較的設置しやすいです。
商品一覧 / サムネイル / コレクション（商品単位の登録）
- 商品繰り返しの中に入れます。
- 商品サムネイル全体を囲む<a>タグの中に設置すると、ボタンクリック時に商品詳細へ遷移するので注意です。
ヘッダー等（一覧表示への導線）
- 登録した商品を確認するための入り口です。
- アプリがポップアップを提供しているので、一覧用のページのご用意は不要です。
よくある失敗
| App Blockの無効化 | テーマエディタの「埋め込みアプリ」設定で、本アプリがOFFになっていると、スクリプト自体が読み込まれません。 |
| ハンドル名の欠落 | data-comasopify-product-handle が空、または Liquid の {{ product.handle }} が正しく出力されているか確認してください。 |
| クラス名のタイポ | comasopify-wishlist-icon-button の綴りが間違っていないか。 |