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

ShopifyというECサイト構築プラットフォームで、商品ページの商品画像の中に「お気に入り」や「ウィッシュリスト」機能を示すハートアイコンを追加する方法について解説する。この解説は、特に「Prestige」というテーマを使用しているサイトに適用される。システムエンジニアを目指す初心者でも、基本的なウェブの仕組みとShopifyのテーマ構造を理解すれば、実践できる内容だ。

この機能を実現するには、「Wishlist Power Web Component」という、ウィッシュリスト機能を提供するWebコンポーネントを事前に導入していることが前提となる。Webコンポーネントとは、ウェブページ上で再利用可能な部品を作るための技術で、HTML、CSS、JavaScriptをひとまとめにして、独自のHTMLタグのように扱えるようにしたものだ。今回の解説で中心となるのは、<ooo-wl-wishlist-button>というカスタムタグである。

最終的に目指すのは、商品ページにアクセスした際、商品画像の右上にハートアイコンが表示され、これをクリックするとウィッシュリストに商品を追加したり、すでに追加済みの商品を削除したりできるようになることだ。アイコンはウィッシュリストの状態によって、塗りつぶされたり、線だけで表示されたりする。

このカスタマイズは、Shopifyのテーマコードを直接編集することで行う。Shopifyでは、ウェブサイトのデザインや機能を制御するために「Liquid」というテンプレート言語が使われている。ウェブサイトの見た目を決定するHTMLやCSSも、このLiquidファイルの中に含まれていることが多い。

それでは、具体的な手順を順に追って見ていこう。

まず、Shopifyの管理画面から「オンラインストア」→「テーマ」→「コードを編集」と進み、テーマのコードエディタを開く。ここでは、テーマを構成する様々なファイルにアクセスできる。

最初のステップは、snippets/product-gallery.liquidというファイルを開くことだ。このファイルは、商品詳細ページにおける商品画像ギャラリーの表示に関する部分を定義している。つまり、商品画像がどのように並べられ、表示されるかを制御している重要なファイルである。このファイルの中に、ウィッシュリストボタンのコードを挿入する場所を探す。

次に、このproduct-gallery.liquidファイルの中にある<product-gallery>というHTML要素の中に、ウィッシュリストボタンのコードを挿入する。具体的には、<div class="product-gallery__image-list">という要素の直前に、準備されたコードブロックを追加する。

挿入するコードは、主に二つの部分から構成されている。一つは<ooo-wl-wishlist-button>というカスタムタグで、これがウィッシュリスト機能の本体となる。このタグには、product-id="{{ product.id }}"やhandle="{{ product.handle }}"といった属性が付与されている。これらはLiquidの記法で、現在の商品のIDやハンドル（URLの一部に使われる識別子）をウェブコンポーネントに渡す役割を果たす。これにより、どの商品がウィッシュリストに追加されるべきかを特定できる。このカスタムタグの中には、実際にユーザーがクリックする<button>タグが含まれており、その中に{%- render 'icon' with 'heart' -%}というLiquidの命令がある。これは、テーマに登録されている「heart」という名前のアイコンを描画するためのものだ。

もう一つの部分は、<style>タグで囲まれたCSSのコードである。CSSは、ウェブページの要素の見た目や配置を定義するための言語である。このCSSコードは、挿入したウィッシュリストボタン（<ooo-wl-wishlist-button>要素）の見た目を細かく制御している。

例えば、position: absolute; top: 10px; right: 20px; z-index: 1;という指定は、アイコンを商品画像の右上から少し内側に配置し、他の要素の上に重なるように表示するためのものだ。z-indexは、要素の重なり順を制御するプロパティで、値が大きいほど手前に表示される。 button[aria-checked="true"] svg { fill: black; }のようなセレクタは、ウィッシュリストに商品が追加されている状態（aria-checked="true"という属性が付与されている状態）で、アイコン（SVG）を黒く塗りつぶすことを指示している。逆にaria-checked="false"の場合は、fill: none;でアイコンの内部を透明にする。 また、@keyframes pulseという部分は、商品がウィッシュリストに追加されたときに、アイコンが少し拡大・縮小するアニメーション効果を定義している。これは、ユーザーに操作が成功したことを視覚的にフィードバックするために役立つ。 ooo-wl-wishlist-button[loading]の部分は、ウィッシュリスト情報の読み込み中にアイコンをローディング状態として表示するためのスタイルだ。これにより、非同期処理の待ち時間中にユーザーが何を待っているのかを理解しやすくなる。

次に重要なステップは、snippets/icon.liquidファイルを開き、ハートアイコンのSVGコードを追加することだ。Shopifyのテーマでは、様々なアイコンがこのファイル内で一元的に管理されていることが多い。{%- case icon -%}というLiquidのブロックは、{% render 'icon' with 'heart' %}のように指定されたアイコンの名前（この場合は'heart'）に応じて、対応するSVGコードを描画する役割を持つ。

SVG（Scalable Vector Graphics）は、拡大しても画像が荒くならないベクター形式の画像で、ウェブサイトでアイコンを表示するのによく利用される。ここでハートアイコンのSVGコードを追加することで、先ほどproduct-gallery.liquidで指定した{%- render 'icon' with 'heart' -%}が、実際にハートの形をしたアイコンとして表示されるようになる。このコードには、ハートのパス情報（形を定義する点の情報）や、線幅、色に関する指定が含まれている。

これらのコード編集を終えたら、必ずファイルを保存し、Shopifyストアの商品ページをブラウザで再読み込みして、変更が正しく適用されているかを確認する。ハートアイコンが商品画像の右上に表示され、クリックするとウィッシュリストへの追加・削除が正しく機能すること、そして状態に応じてアイコンの見た目が変化することを確認する。

このように、Shopifyのテーマファイルを編集することで、既存の機能に新しい要素を追加したり、見た目を変更したりすることが可能だ。今回の場合、Webコンポーネントという再利用可能な部品を活用し、CSSでその見た目や動作を制御し、SVGでアイコンそのものを定義することで、ユーザー体験を向上させるウィッシュリスト機能を実現している。これは、システムエンジニアがWebアプリケーションを開発する際に、コンポーネント指向のアプローチやフロントエンド技術をどのように活用するかを示す良い例となる。より高度なカスタマイズを目指す場合は、これらのWebコンポーネントのドキュメントを読み解き、JavaScriptを用いてさらに細かな動作を制御することも可能だ。