基本操作
- ページを用意する：Shopify管理画面で固定ページを作成し、テンプレートに page.wishlist を指定します。
- 表示を調整する：テーマエディタからwishlistページを開き、
お気に入りリストセクションで「見出し・カードサイズ・配色」などを調整します。 - お気に入りアイコンを設定する：テーマ設定の「お気に入りリスト」で、お気に入りアイコンの表示ON/OFFと色を設定します。
- 動作を確認する：商品ページ／コレクションでお気に入りアイコンをクリックし、お気に入りリストに追加されることを確認します。あわせて、ヘッダーやボトムメニューの件数表示もチェックしてください。
お気に入りアイコン設定
テーマエディタで「テーマ設定 ＞ Wishlist（お気に入り）」を開き、以下の項目を設定します。
1) お気に入りアイコンの表示
「お気に入りアイコンの表示」をON（enable_wishlist_icon）にすると、
- コレクションの各商品カード
- 商品詳細ページのタイトル付近
- ヘッダーのお気に入りリスト
に、お気に入り（ハート）アイコンが表示されます。
2) お気に入りアイコンの配色
お気に入りアイコンの線色・塗り色・背景色をそれぞれ設定できます。ブランドカラーに合わせて調整してください。
お気に入りリスト設定
| 設定 | 種別 | 説明 / 使いどころ |
|---|---|---|
| 見出しプリセット / サイズ | Select + Range | ページタイトルのタグとサイズを制御。ブランドガイドに合わせて h1＋48-64px が推奨。 |
| 説明文を表示 | Checkbox | 管理画面のページ本文を見出し下に差し込みます。ガイド文が不要ならOFF。 |
| 見出し余白（上/下） | Range(px) | タイトルとグリッドの距離を微調整。ヒーロー直下で使う場合は上余白0〜16px。 |
| 商品カードサイズ（PC） | Select |
small/medium/large に応じて列数（4/3/2列）とカード比率を変更。商品数が多ければsmallで密度を上げる。 |
| 商品カードサイズ（モバイル） | Select |
smallは2列、largeは1列。画像把握優先ならlarge。 |
| タイトル2行制限 | Checkbox | ONで -webkit-line-clamp:2 が付与され、長い商品名でも高さが揃います。 |
| バリアントピッカーを表示 | Checkbox | trueでセレクトボックスを差し込み、wishlist.js が在庫状況と同期。シンプルなSKUのみならOFFにしてボタンを短縮。 |
| 画像アスペクト比 | Select |
square/portrait/landscape/adapt。全商品で揃えたい場合は固定比率、撮影比率がまちまちならadapt。 |
| グリッド幅 | Select |
centered はページ幅、full-width は左右余白を削除。ヒーロー背景と合わせたい場合に使います。 |
| カラム間隔 | Range(px) | カード間ギャップを0〜50pxで調整。PC/モバイル共通で適用。 |
| 配色 | Color scheme | 背景とテキストカラー。ダーク背景でカードを浮かせたいときは専用スキームを作成。 |
公開前チェックリスト
- ページ設定: 対象ページに
page.wishlistテンプレートが割り当てられているか。 - 動作テスト: 商品追加→Wishlistページ表示→削除→空状態復帰の一連フローがPC/モバイル両方で成立するか。
- カウンター: ヘッダーとボトムナビの数値・バッジ表示がアイテム数に追従するか、0件時に非表示になるか。