# Dawnテーマでのランキングバッジ表示のためのコード編集について **URL:** \ **Category:** サンプルコード集（アプリ・テーマ）\ **Created:** [December 5, 2022, 3:22am UTC](https://community.shopify.com/t/dawn/173486 "2022-12-05T03:22:14Z")\ **Posts on this page:** 3\ **Page:** 1 ## AI-generated summary アパレルECサイトでDawnテーマを使用し、ランキングバッジ表示機能の実装に苦戦している質問。 **実装したい要件:** - ランキング番号の自動付与 - PC表示：1〜3位は3カラム、4位以降は4カラム - スマホ表示：全て2カラム - 1〜3位は個別の色設定、4位以降は同色 **現状の課題:** 質問者は参考記事（note.com/tech_malin）を見て実装を試みたが、うまく動作せず。 **提案された解決策:** 1. **コード修正アプローチ（Qcoltd氏）:** - Liquidエラーが発生している可能性を指摘 - `{% render 'card-product' %}` を `{% render 'product-card' %}` に変更する修正案を提示 2. **アプリ導入アプローチ（Nishi_3氏）:** - UnReact社の「シンプルランキング表示」アプリを紹介 - ノーコードでデザイン性の高いランキングバッジを挿入可能 - 利用ガイドと参考情報のリンクを提供 コード編集とアプリ利用の2つの選択肢が提示されている状況。
**Author:** ![oyouhukuyasan](https://avatars.discourse-cdn.com/v4/letter/o/51bf81/32.png) [@oyouhukuyasan](https://community.shopify.com/u/oyouhukuyasan)\ **Post date:** [December 5, 2022, 3:22am UTC](https://community.shopify.com/t/dawn/173486/1 "2022-12-05T03:22:14Z")
質問させてください。 どなたかにお答えいただけますと大変助かります。 私はアパレルのWEBサイトを立ち上げており、売上に悩んでおります。 ECサイト運用でランキング表示は大事かと思いますが、 コード編集（リキッド編集など）がわからず苦戦しております。教えていただけますと幸いです。 私のゴールは以下の通りです。なお、使用テーマはdawnです。 ・ランキング番号が自動的に付与される ・表示形式は PCカラム：１〜３位までは３カラム、４以降は４カラム スマホ版：全て２カラム ・ランキングバッジタイプは四角でも三角でも問わない ・カラーは１〜3位は別々で選べたら嬉しい、4位以降は全て同じ色で大丈夫 以下の記事を見てトライしてみたのですが、うまく実装できませんでした。 [https://note.com/tech\_malin/n/nb2824a5ec1cf](https://note.com/tech_malin/n/nb2824a5ec1cf) こちらの記事はdawnテーマでなく、私の知識不足でdawn用にアレンジすることができませんでした。 [https://mrtc.jp/318](https://mrtc.jp/318) あまりに初歩的な質問をしており、長文のご回答となる可能性があり大変申し訳ないのですが、 お答えいただけますと幸いです。 どうぞよろしくお願いいたします。 ---
**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\ **Post date:** [December 14, 2022, 11:45am UTC](https://community.shopify.com/t/dawn/173486/2 "2022-12-14T11:45:23Z")
> 以下の記事を見てトライしてみたのですが、うまく実装できませんでした。 > [https://note.com/tech\_malin/n/nb2824a5ec1cf](https://note.com/tech_malin/n/nb2824a5ec1cf) こちらについてですが、 下記のようなエラーが表示されてしまいますか？ ```markup Liquid error (sections/main-collection-product-ranking.liquid line 99): Could not find asset snippets/product-card.liquid ``` もし、そうでしたら、 セクションに追加した、 main-collection-product-ranking.liquidから下記を探していただき、 ```auto {% render 'product-card', ``` 下記のようにご変更ください。 ```auto {% render 'card-product', ``` もし上記がうまく行き、この方法をベースに進められるようでしたら、 申し訳ございません、 参考にされているのが有料の記事のようですので、 これ以上のアドバイスは難しそうです。 中途半端な情報で恐縮ですが、 少しでも参考になったようでしたら幸いです。 (キュー田辺) ---
**Author:** ![Nishi\_3](https://avatars.discourse-cdn.com/v4/letter/n/8c91f0/32.png) [@Nishi\_3](https://community.shopify.com/u/Nishi_3)\ **Post date:** [August 7, 2024, 8:25am UTC](https://community.shopify.com/t/dawn/173486/3 "2024-08-07T08:25:04Z")
はじめまして 株式会社UnReactの西川と申します。 弊社のアプリ「[シンプルランキング表示｜お手軽ベストセラー](https://apps.shopify.com/sa-022-ur-ranking-app?locale=ja)」も有効な解決策の一つとしてご紹介させていただきます。 ![CI_ciLKxu4QDEAE=.webp](https://canada1.discourse-cdn.com/shopifyforum/original/3X/a/4/a4756f8431ae73581a7d54b978e1a4cdd2317110.webp) 高いデザイン性のランキングバッジをノーコードで挿入できるアプリです。 ![CLn78u-ru4QDEAE=.webp](https://canada1.discourse-cdn.com/shopifyforum/original/3X/5/0/50547e5eaf14df84f0188f7ff75c9050121c26a5.webp) 下記、参考情報です。 [シンプルランキング表示｜お手軽ベストセラー](https://apps.shopify.com/sa-022-ur-ranking-app?locale=ja) [Shopifyにランキングバッジを導入するアプリについて徹底解説｜ご利用ガイド](https://unreact.jp/shopify-apps/sa-022-ur-ranking-app/guide) その他にも 45 個の Shopify アプリを開発しているので、ストア運用の際に参考にして頂ければ幸いです。 [参考アプリ一覧](https://apps.shopify.com/partners/unreact5?locale=ja&page=1)