FROM CACHE - jp_header

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

解決済

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

Aki_T
観光客
5 0 0

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

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

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

 

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

 

1 件の受理された解決策
improv
Shopify Partner
37 10 6

成功

状況把握いたしました。

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

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

 

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

 

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

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

伊藤佑真 フリーランスwebエンジニア
-shopifyアプリの開発をしています。
- 私の回答で解決しましたら、ぜひいいね、ベストソリューションの承認をお願いします。
- shopifyアプリやシステム開発のご相談はお気軽にDMにて

元の投稿で解決策を見る

7件の返信7

improv
Shopify Partner
37 10 6

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

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

 

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

 

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

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

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

 

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

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

伊藤佑真 フリーランスwebエンジニア
-shopifyアプリの開発をしています。
- 私の回答で解決しましたら、ぜひいいね、ベストソリューションの承認をお願いします。
- shopifyアプリやシステム開発のご相談はお気軽にDMにて
Aki_T
観光客
5 0 0

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

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

 

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

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

improv
Shopify Partner
37 10 6

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

 

 

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

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

 

スクリーンショット 2023-12-07 15.45.28.png

 

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

 

スクリーンショット 2023-12-07 15.45.55.png

 

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

伊藤佑真 フリーランスwebエンジニア
-shopifyアプリの開発をしています。
- 私の回答で解決しましたら、ぜひいいね、ベストソリューションの承認をお願いします。
- shopifyアプリやシステム開発のご相談はお気軽にDMにて
Aki_T
観光客
5 0 0

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

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

Aki_T
観光客
5 0 0

以前こちらでご回答いただいた件、記載のとおり対応してみましたが、商品詳細画面に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
Shopify Partner
37 10 6

成功

状況把握いたしました。

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

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

 

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

 

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

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

伊藤佑真 フリーランスwebエンジニア
-shopifyアプリの開発をしています。
- 私の回答で解決しましたら、ぜひいいね、ベストソリューションの承認をお願いします。
- shopifyアプリやシステム開発のご相談はお気軽にDMにて
Aki_T
観光客
5 0 0

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

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

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