見出し画像

【shopify】商品ページで使えるコード(liquid)

いつも忘れるので、備忘録を兼ねてまとめてみます。
たった1・2行のコードに調べるのにけっこう時間がかかるものもあったので、まとめておくのは大事!

商品名の取得

{{ product.title }}

商品ページのurl取得

{{ product.url }}

商品情報の取得

{{ product.description }}

特定コレクションへのパス取得

{% assign sample_collection = collections.sample %}
<a href="{{ sample_collection.url }}">特定コレクション</a>

「sample_collection」は分かりやすい名前に変更してOK。
「collections.sample」のcollections.の後ろは指定したいコレクションページのurl部分を入れます。

特定ページのパス取得

{{ pages.test.url }}

上記コードの「test」のところをページのURL部分に書き換えたらOKです。
自動でリンクになるわけではありません。

所属するコレクションのパス取得

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

商品ページのliquid(dawnの場合はmain-product.liquid)にそのままコピペでOK。
{{ collection.url }}は所属するコレクションのパス取得、{{ collection.title }}で所属するコレクションのタイトルが取得できます。

商品が持つバリエーション情報の取得

{% for variant in product.variants %}
{{ variant.title }}
{% endfor %}

上記コードでバリエーション名が取得できます。
ちょっと古い記事ですが、下記のサイトの情報と組み合わせるとタイトル以外も取得できると思います。

https://takblog.site/web/?p=220

まとめ

コレクション情報とかは商品ページからは{{ collection.title }}とかのコードだけでは情報を取得できません。
shopifyの構築を始めた時はこのあたりの勘所がよく分からず、けっこう試行錯誤しました。
実はちゃんとshopifyのヘルプページに取得できる内容がまとめられているのですが、なにせ見にくい…。
日本語化されていないページも多いので、qiitaやnoteでまとめられている情報と合わせてカスタマイズしていくといい感じになります。

子育てと両立しながらデザイナーやってます。 フリーランス歴9年、法人成してもうすぐ3期目。基本ノンプログラマーですが、wordpress、shopfyなどカスタマイズ好きでいろいろやってます。 この記事がみなさまのお役に立てますように!