Shopifyの折りたたみブロックに独自アイコンを追加する方法を解説。icon-accordion.liquid の編集からスキーマ設定の追加まで、デフォルト以上の柔軟なデザインを実現したい方に役立つ内容です。
商品ページで情報をすっきり整理したい時に便利なのが、Shopifyの「折りたたみ（collapsible_tab）」ブロックです。
見出しをクリックすると説明文が開くため、長くなりがちな商品説明を読みやすくまとめることができます。
また、このブロックでは項目名（テキスト）に加えてアイコン画像も設定でき、視覚的に用途や意図を伝えられる点が大きなメリットです。
Shopifyには30種類以上のアイコンが標準で用意されていますが、運営していると「もう少し適したアイコンを使いたい」という場面が必ず出てきます。
そこで本記事では、デフォルトでは登録されていないオリジナルアイコンを折りたたみブロックに追加する方法について、実例を交えながら分かりやすく解説していきます。
アイコンを取得・表示する仕組みをざっくり説明
Shopifyの折りたたみブロックで表示されるアイコンは、画像ファイルではなくSVGのパス(path)としてテーマ内に組み込まれています。
これらのアイコンは、テーマに含まれている「icon-accordion.liquid」というスニペットにすべて記述されており、必要なアイコンのパスを呼び出して描画する仕組みになっています。
このスニペットには「icon」という変数が用意されており「{% case icon %} → {% when ‘○○○’ %}」という分岐によって、表示するアイコンを選び分けています。つまり「どのアイコンを表示するか」は、この「icon」の値によって決まります。
では、その「icon」の値はどこから渡されるのかというと、呼び出し元のファイルです。たとえば商品ページの「main-product.liquid」では、
{% render 'icon-accordion', icon: block.settings.icon %}という形でスニペットを呼び出しています。この場合、管理画面のブロック設定で選んだアイコン(block.settings.icon)がそのまま「icon」の値となり、「icon-accordion.liquid」の中で該当するアイコンが描画される仕組みです。
(関連記事)スニペットファイルを呼び出す「render」引数と渡り値とは？
独自のアイコンを追加したい場合
ここまでで、Shopifyの折りたたみブロックがどのようにアイコンを取得・表示しているか、全体の仕組みを掴んでいただけたと思います。では次に、デフォルトには存在しない独自アイコンを追加する方法 を解説します。
まずは、アイコンの描画を担っている「icon-accordion.liquid」を編集します。このファイルでは「{% case icon %}」による分岐でアイコンを選別しているため、ここに新しい項目を追加します。
たとえば「クレジットカード（credit）」アイコンを追加したい場合は、
{%- when 'credit' -%}
<!-- ここにSVGコードを書く -->のように「when」ブロックを追加し、その中にSVGパスを記述します。（※SVGコード自体は本記事では割愛します。）追加後はファイルを保存すれば準備完了です。
続いて、呼び出し元のファイルを編集します。今回は例として「main-product.liquid」を開き、折りたたみ（collapsible_tab）ブロックのスキーマ（schema）設定に選択肢を追加します。
ブロック設定の “options” 配列に、次のような項目を追加します。
{
"value": "credit",
"label": "クレジットカード"
}これで管理画面のブロック設定で「クレジットカード」アイコンが選択できるようになります。
なお、デフォルトで用意されているアイコンは
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options.xxx"のように表記されています。これは 翻訳キー(translation key)と呼ばれ、テーマエディタの文言を多言語対応させるための Shopify 独自の仕組みです。今回は独自追加なので、通常の文字列ラベルで問題ありません。
***
これで、テーマエディタ上で追加したアイコンが正しく表示されるか確認するだけです。
数ステップの作業ではありますが、仕組みを理解しておくとテーマの拡張がぐっと楽になります。
ショップ運営において必須の知識というわけではありませんが、「少し見た目をユニークにしたい」「renderスニペットの動きを深く理解したい」という方には、きっと役立つはずです。Shopifyテーマの柔軟性を活かしながら、より魅力的な商品ページづくりにお役立ていただければと思います。
