【shopify】商品ページで使えるカスタマイズ事例01－liqiud

自分でできるカスタマイズはできるだけ自前でするのが私流。
自前カスタマイズ自体の賛否もいろいろありますが、アプリ重複やアップデートの有無による訳分からんわ！っていうトラブルはかなり回避できるので、アプリなしでできるカスタマイズはできるだけ自前でやっています。

今回はECサイトで一番カスタマイズするであろう商品ページについて。
いろいろネットで調べたけど、あまり情報がまとまってなかったので、備忘録兼ねてまとめてみました。

商品が所属しているベンダーをリンク付きで取得する方法

{{ product.vendor | link_to_vendor }}

検証した「dwan」では、セクションの「main-product.liquid」で利用可能です。

商品がで所属しているコレクションをリンク付きで取得する方法

{% for collection in product.collections %}
<a href="{{ collection.url }}">{{ collection.title | escape }}</a>
{% endfor %}

上記と一緒で、「dwan」のセクションの「main-product.liquid」で利用可能です。
dwanではコレクション名がリンク付きで横一列で表示されます（コード挿入場所によって変わるかも…）。半角スペースは自動で入ります。句読点か何か付けたいところですが、liquidで制御する方法はよく分からず…。
表示変更するならcssでする方が楽かもです。

※ご注意
このコードはshopifyのdawn7.0.0で検証しています。
保障、サポートなどは一切しておりませんので、ご自身の責任下でお試しください。
すでにカスタマイズされている場合や環境、バージョンによっては崩れたり正常に動作しないこともありますので、ご注意ください。