Dawn 商品一覧ページにSKUを表示させたい

[Aki_T]

テーマDawnを利用しております。

現在商品一覧ページには、各商品につき、商品画像・商品名・税込金額が表示されています。

これを、各商品につき、商品画像・SKU・商品名・税込金額となるようにしたいのですが、どのように対応したらよいでしょうか。

ご教授よろしくお願いいたします。

[improv]

初めまして。該当の商品がバリエーションの設定をしていない場合は

下記コードをliquidに追記すれば可能かと存じます。

<div> SKU: {{ product.variants.first.sku }} </div>

skuは商品のバリエーションがそれぞれ持っているので

１つ目のバリエーションのskuを表示するだけなら上記で問題ないのですが

（バリエーションの設定をしていない場合でも内部的には１つのバリエーションを持っている）

バリエーションを複数持っている場合で、選択されたバリエーションに対して

動的に表示を変更したい場合は別途 js での実装が必要になります。

[Aki_T]

ご回答くださいましてありがとうございます。

バリエーションを複数登録することはせず、単一のバリエーションでのSKU表示をしたく考えておりました。

ご回答にありますコードは、どのLiquidのどのあたりに追記したらよいのでしょうか。

全くの素人のため、大変初歩的な質問をお尋ねしてしまい恐縮ではございますが、ご教授くださいますとありがたいです。

[improv]

main-product.liquid の {%- when 'title' -%} の上あたりに追記すれば良いかと思います。

また、テンプレートのカスタマイズページにて

「ブロックを追加」→ 「カスタムliquid」を選択

カスタムリキッドという項目が追加されるので、クリック

フォームの中にコードを入れれば、テーマブロックのように扱うこともできます。

[Aki_T]

早速ご回答くださいましてありがとうございました。

教えてくださった内容で修正してみます！

[Aki_T]

以前こちらでご回答いただいた件、記載のとおり対応してみましたが、商品詳細画面にSKUがでてしまい、商品一覧画面にはSKUが表示されませんでした。

いろいろ調べたところ、以下の記事が見つかりました。

わたしがやりたいことは以下の投稿の内容だったのですが、main-product.liquidではなく、product-card.liquidの編集することとなっています。

この投稿にある内容はテーマDawnでも有効なのでしょうか。

https://community.shopify.com/c/shopify-design/add-sku-to-collection-page/m-p/1337978

もしこの回答はテーマDawnでも有効な場合、上記投稿に対する回答のコードは、具体的にどの部分に挿入すべきものなのでしょうか。

いろいろやってみましたが、なかなか商品一覧画面に反映させることができませんでした。

大変お手数ではございますが、再度ご教授くださいますと幸いです。

[improv · Accepted solution]

状況把握いたしました。

ご提示いただきましたURLのコードでは上手く表示できなかったのですが、

下記コードの場合、Dawnでも表示することができました。

<div> SKU: {{ card_product.variants.first.sku }} </div>

card-product.liquid の 138行目にある <div class="card__information"> の中に

挿入すれば表示できるかと思います。

[Aki_T]

ご回答くださいましてありがとうございました。

早速試したところ、実現できました。

丁寧に教えてくださいましてありがとうございました！