【ITニュース解説】How to Add a Wishlist Heart Icon Inside the Product Image on Focal Theme?

このニュース記事は、ECサイト構築プラットフォームであるShopifyで提供されている「Focalテーマ」を使用しているユーザーが、商品画像の中に「ウィッシュリストに追加する」ためのハートアイコンを設置する方法を、具体的なコード編集の手順を追って解説している。システムエンジニアを目指す初心者にとっては、実際にウェブサイトの見た目や機能の一部をコードレベルでカスタマイズする、いわゆる「フロントエンド開発」の入門的な実例として理解できるだろう。

ウィッシュリスト機能は、ユーザーが気に入った商品を一時的に保存し、後でまとめて検討したり購入したりできるようにする機能だ。これは顧客体験を向上させ、最終的な購買につながる可能性を高める上で、ECサイトにとって非常に重要な要素となる。この記事では、特に商品画像上に直接ハートアイコンを表示させることで、ユーザーが直感的に商品をウィッシュリストに追加・削除できるようなインターフェースを実現する方法が示されている。

この機能の実装には、「Wishlist Power」というウェブコンポーネントの使用が前提となっている。ウェブコンポーネントとは、ウェブページ上で再利用可能な、独自の機能と見た目を持つHTML要素を作成するための技術だ。通常のHTMLタグ（<div>や<span>など）とは異なり、開発者が独自のカスタムタグ（この記事では<ooo-wl-wishlist-button>）を定義し、それをウェブサイトの任意の場所に組み込むことができる。これにより、複雑な機能を簡単に導入したり、コードの構造を整理したりすることが可能になる。

実装後の完成イメージとしては、商品ページの各商品画像の右上にハート型のアイコンが表示される。このアイコンをクリックすると、その商品がウィッシュリストに追加されたり削除されたりする。ウィッシュリストに追加されている状態ではハートアイコンが塗りつぶされ、追加されていない状態では線画のアイコンが表示されることで、現在の状態を視覚的にユーザーに伝える。

具体的な手順は次の通りだ。まず最初のステップとして、Shopifyストアの管理画面にログインし、「オンラインストア」から「テーマ」を選択し、現在適用しているFocalテーマの「コードを編集」する。ここで開くのは「snippets/product-media.liquid」というファイルだ。Shopifyのテーマは「Liquid」というテンプレート言語で書かれており、「snippets」フォルダには、ウェブサイトのさまざまな箇所で共通して使用されるHTMLコードの断片（スニペット）が保存されている。「product-media.liquid」ファイルは、商品ページで表示される画像や動画などのメディア要素の表示方法を制御する役割を持つ。

次に、この「snippets/product-media.liquid」ファイル内の特定の場所に、ウィッシュリストボタンのコードを挿入する。具体的には、商品メディアのリストを囲むdiv要素のうち、「product__media-list-wrapper」というクラスが指定されたdivの閉じタグの直前に、準備されたコードブロックを貼り付ける。このコードブロックの中心となるのは、先ほど説明したウェブコンポーネントである<ooo-wl-wishlist-button>タグだ。このカスタムタグには、product-id（商品の固有ID）やhandle（商品のURLに使われる一意の文字列）といった属性が設定されており、これによりウェブコンポーネントはどの商品に対する操作であるかを認識できる。

<ooo-wl-wishlist-button>タグの内部には、実際にユーザーがクリックするボタン要素（<button>タグ）と、ウィッシュリストに商品バリアント（色やサイズなどの選択肢）が含まれている場合に表示される可能性のあるメッセージ（<p>タグ）が含まれている。<button>タグの中には、{%- render 'icon' with 'heart' -%}というLiquidの記述がある。これは、後ほど定義する「heart」という名前のアイコンを読み込んで表示するためのものだ。

さらに、このコードブロックには、アイコンの見た目や動作を制御するためのCSS（Cascading Style Sheets）の定義も含まれている。CSSはウェブページのレイアウトやデザインを記述するための言語で、ここでは以下のような役割を果たす。

• z-index: 1; position: absolute; top: 10px; right: 20px;: これらのCSSプロパティは、ハートアイコンを商品画像の右上端に正確に配置するためのものだ。position: absoluteは要素を親要素に対して絶対的な位置に配置し、topとrightで上端から10ピクセル、右端から20ピクセルの位置に調整する。z-indexは要素の重なり順序を制御し、他の要素の上にアイコンが表示されるようにする。
• buttonのスタイル: アイコンのサイズ（幅と高さがそれぞれ50ピクセル）や、アイコン自体をボタンの中央に配置するための設定がされている。
• button[aria-checked="true"] svg { fill: black; }とbutton[aria-checked="false"] svg { fill: none; }: これらのルールは、ウィッシュリストの追加・削除の状態に応じてハートアイコンの色を変更する。aria-checkedという属性は、主にアクセシビリティ（ウェブサイトの利用しやすさ）のために使われるが、ここではその状態をCSSで判断し、true（ウィッシュリストに追加済み）の場合はアイコンを黒く塗りつぶし、false（未追加）の場合は線画にする。
• ooo-wl-wishlist-button p { display: none; }と[show-variant-warning="true"] p { display: block; }: 特定の条件（例えば、ウィッシュリストに異なるバリアントが含まれている場合など）が発生したときに表示されるメッセージの表示/非表示を制御する。通常は非表示だが、警告が必要な場合に表示される。
• ooo-wl-wishlist-button[loading]と@keyframes loadingPlaceholder: これらのスタイルは、ウィッシュリスト操作が処理中であることを示すためのアニメーションを定義する。アイコンが一時的に灰色に変わり、点滅することで、ユーザーに処理が進行中であることを視覚的に伝える。
• @keyframes pulse: 商品がウィッシュリストに追加されたときに、ハートアイコンが短く拡大・縮小するアニメーションを定義している。これは、ユーザーのアクションに対する視覚的なフィードバックとして機能する。

第三のステップとして、実際に表示するハートのアイコンそのものをShopifyテーマのアイコンリストに追加する。このため、「snippets/icon.liquid」ファイルを開き、既存の{%- case icon -%}タグの下に、{%- when 'heart' -%}という新しいブロックを追加し、その中にハートの形を定義するSVG（Scalable Vector Graphics）のコードを貼り付ける。SVGは、画像ファイルとは異なり、数式で図形を記述するベクター形式であるため、拡大・縮小しても画質が劣化しないという大きな利点がある。このコードを挿入することで、テーマ内のどこからでも{%- render 'icon' with 'heart' -%}という記述を使ってハートアイコンを呼び出せるようになる。

最後に、これらのコード変更をすべて保存し、商品ページをブラウザで再読み込みすることで、商品画像の上にハートアイコンが正しく表示されていることを確認する。アイコンをクリックして、ウィッシュリストへの追加・削除機能が正常に動作し、アイコンの表示状態（塗りつぶし/線画）が期待通りに切り替わることを確認すれば、作業は完了となる。

このように、この記事で解説されている作業は、ウェブコンポーネントの利用、Liquidテンプレート言語でのコード挿入、CSSによるスタイリング、そしてSVGによるアイコンの定義といった、フロントエンド開発の基本的な要素が詰まっている。システムエンジニアを目指す初心者にとって、実際に手を動かしてコードを編集し、その変更がウェブサイトに即座に反映される過程を体験することは、実践的な学習として非常に有益だ。