みなさん、こんにちは。

MEGIDO(メギド)です。

現在、Shopify案件で商品詳細ページに
タグみたいな文字を表示できないかという依頼がありました。

ECサイトなどでよくある「送料無料」や「当日発送」
みたいなの表示する依頼です。

この表示ですがShopifyの商品タグの機能と
ShopifyのテンプレートエンジンであるLiquidのメソッドを使えば
簡単に表示させることができます。

今回はその方法についてお伝えします。

 

「一般的な商品タグを出力する方法」

まずよくある商品タグの表示方法です。
任意の「送料無料」や「当日発送」のタグを表示させるのではなく
Shopifyで商品登録したときに登録した商品タグをすべて表示させる方法です。

Shopifyでは「product.tags」で商品に登録されている
商品タグをすべて取得できます。

これを「for」文でループさせて表示させることで
全ての商品タグを表示させることが可能です。

 

「任意の商品タグだけを出力する方法」

続いては「送料無料」や「当日発送」などの任意の商品タグだけを
商品詳細ページに表示させる方法です。

いろいろ表示方法があると思うのですが、
「全てのタグを確認して、当てはまる商品タグがある場合、任意のコードを表示させる」
この考え方で表示させる方法をお伝えします。

「contains」はその中に指定された文字列が含まれているかを確認するメソッドです。
このメソッドを利用して「送料無料」のタグを表示させたい場合は上記のようになります。
※このやり方だとタグで絞り込み検索はできません。
※今回の案件はタグっぽいもの表示させるだけでよかったのでこのように出力しています。

 

まとめ

今回はShopifyの商品詳細ページに
タグ(文字)を表示させる方法をお伝えしました。

Shopifyの情報は少ないですが公式ドキュメントをみれば
けっこう解決できることも多いです。

それでは今回はここまで。
最後までお読みいただきありがとうございました。

 

まとめ

SHARE

アバター
TEXT BY MEGIDO

RECOMMENDED POSTこの記事もおすすめ!