11. 完全オリジナルストアの対応

<aside> 🛠️

このページでわかること — テーマが独自実装で、RYX Wishlist のお気に入りボタンが商品カードに自動表示されない場合の追加対応手順

</aside>

<aside> ⚠️

対象となるケース — Dawn / Horizon などの標準テーマではなく、トップページやコレクションページの商品カードが独自実装のクラス名で組まれているテーマ。標準テーマをそのままお使いの場合、この対応は不要です。

</aside>

仕組み

RYX Wishlist はストアフロントの DOM を自動走査して商品カードを検出し、お気に入りボタンを挿入します。検出に使う標準クラス名は内部にリスト化していますが、テーマがオリジナルのクラス名（例: .gs-recommend-card、.shop-product-card など）を使っている場合は検出できません。

その場合、テーマ側に「ウチの商品カードはこのクラスです」と教えてあげるスクリプトを 1 つ追加 することで、お気に入りボタンが表示されるようになります。

Step 1. テーマのコード編集を開く

Shopify 管理画面で オンラインストア（①）> テーマ（②） に移動し、対象テーマの 「⋯」メニュー（③）> コードを編集（④） をクリックします。

CleanShot 2026-05-12 at 16.44.58.png

Step 2. theme.liquid にスクリプトを追加

左サイドバーの layout（①）> theme.liquid（②） を開き、<head> 〜 </head> の中（できれば上の方）に下記のスクリプトを追加して、右上の Save で保存します。

CleanShot 2026-05-12 at 16.47.00.png

追加するコード

<script>
  window.__wishlistCustomSelectors = [
    '.your-product-card-class',
    '.another-product-card-class'
  ];
</script>

'.your-product-card-class' の部分を、お使いのテーマで実際に使われている商品カードのクラス名に置き換えてください。複数あればカンマ区切りで列挙できます。

商品カードのクラス名の調べ方

お気に入りボタンを表示したいページ（例: トップページ）をブラウザで開く
商品カード上で 右クリック → 検証（または F12 で開発者ツールを開く）
ハイライトされた要素のクラス名のうち、商品カード全体を囲っている要素 のクラス名を確認
そのクラス名（. 付き）を上記コードのリストに記載

<aside> 💡

クラス名は通常、商品リンク <a href="/products/..."> または商品カードを囲う <div> に付与されています。

</aside>