回答
テーマエディタの商品詳細テンプレートで、商品情報セクションにアプリブロック「お気に入りに追加ボタン」を追加すると設置できます。
コード編集は不要です。商品詳細ページの好きな位置にブロックとして追加できるため、「カートに追加」ボタンのすぐ下にも配置できます。
この手順でできること
商品詳細ページの「カートに追加」ボタンの下に、商品をお気に入り登録するボタンを設置できます。
通常時は「お気に入りに追加」、お気に入り済みの場合は「お気に入り追加済み」のように表示を切り替えられます。ボタンのテキスト、アイコン、色、サイズ、枠線などもテーマエディタ上で調整できます。
設定手順
❗ 事前に「基本のお気に入り」アプリを有効化しておいてください。
ステップ 1：テーマエディタで商品詳細ページを開く
Shopify管理画面から、次の順に開きます。
- 「オンラインストア」>「テーマ」を開く
- 編集したいテーマの「カスタマイズ」をクリック
- 画面上部のテンプレート選択で「商品」を開く
- 対象の商品テンプレートを選択
商品詳細ページの編集画面が表示されたら、左側のセクション一覧で「商品情報」を選択します。
ステップ 2：「ブロックを追加」をクリックする
「商品情報」セクション内の「ブロックを追加」をクリックします。
追加できるブロック一覧が表示されたら、「アプリ」タブに切り替えます。
ステップ 3：「お気に入りに追加ボタン」を追加する
アプリブロック一覧から「お気に入りに追加ボタン」をクリックします。
ブロック名の下に comasopify-favorite-app と表示されているものを選択してください。
ステップ 4：「カートに追加」ボタンの下へ移動する
追加した「お気に入りに追加ボタン」ブロックを、左側のブロック一覧で「購入ボタン」の下に移動します。
ステップ 5：保存する
右上の「保存」をクリックして設定を保存します。
保存後、ストアの商品詳細ページで「カートに追加」ボタンの下にお気に入りボタンが表示されていることを確認してください。
ボタンの見た目を調整したい場合
追加した「お気に入りに追加ボタン」ブロックをクリックすると、テーマエディタ上で次の項目を変更できます。
- 通常時テキスト
- お気に入り済みテキスト
- アイコン形状（ハート / 星）
- アイコンの線色
- お気に入り済み時の塗り色
- アイコンサイズ
- テキストサイズ
- ボタン背景色
- ボタン高さ
- ボタン最大幅
- 文字色
- 枠線色
- 枠線の太さ
- 角丸
文字色、枠線色、ボタン高さ、角丸を調整してください。
完了後のイメージ
商品詳細ページの「カートに追加」ボタンの下に、お気に入りボタンが表示されます。
