仕組み
RYX Wishlist はストアフロントの DOM を自動走査して商品カードを検出し、お気に入りボタンを挿入します。検出に使う標準クラス名は内部にリスト化していますが、テーマがオリジナルのクラス名（例: .gs-recommend-card、.shop-product-card など）を使っている場合は検出できません。
その場合、テーマ側に「ウチの商品カードはこのクラスです」と教えてあげるスクリプトを 1 つ追加 することで、お気に入りボタンが表示されるようになります。
Step 1. テーマのコード編集を開く
Shopify 管理画面で オンラインストア（①）> テーマ（②） に移動し、対象テーマの 「⋯」メニュー（③）> コードを編集（④） をクリックします。
Step 2. theme.liquid にスクリプトを追加
左サイドバーの layout（①）> theme.liquid（②） を開き、<head> 〜 </head> の中（できれば上の方）に下記のスクリプトを追加して、右上の Save で保存します。
追加するコード
<script>
window.__wishlistCustomSelectors = [
'.your-product-card-class',
'.another-product-card-class'
];
</script>
'.your-product-card-class' の部分を、お使いのテーマで実際に使われている商品カードのクラス名に置き換えてください。複数あればカンマ区切りで列挙できます。
商品カードのクラス名の調べ方
- お気に入りボタンを表示したいページ（例: トップページ）をブラウザで開く
- 商品カード上で 右クリック → 検証（または F12 で開発者ツールを開く）
- ハイライトされた要素のクラス名のうち、商品カード全体を囲っている要素 のクラス名を確認
- そのクラス名（
.付き）を上記コードのリストに記載
Step 3. 動作確認
スクリプト保存後、対象ページをブラウザで再読み込みすると、独自実装セクションの商品カードにもお気に入りハートが表示されます。
ハートのカラーや背景は、テーマカスタマイザーのアプリ埋め込み設定からカスタマイズできます。詳しくは 商品一覧のデザイン変更 をご参照ください。