Dawnテーマでのランキングバッジ表示のためのコード編集について

Topic 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つの選択肢が提示されている状況。

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.

質問させてください。

どなたかにお答えいただけますと大変助かります。

私はアパレルのWEBサイトを立ち上げており、売上に悩んでおります。

ECサイト運用でランキング表示は大事かと思いますが、

コード編集(リキッド編集など)がわからず苦戦しております。教えていただけますと幸いです。

私のゴールは以下の通りです。なお、使用テーマはdawnです。

・ランキング番号が自動的に付与される

・表示形式は
PCカラム:1〜3位までは3カラム、4以降は4カラム

スマホ版:全て2カラム

・ランキングバッジタイプは四角でも三角でも問わない

・カラーは1〜3位は別々で選べたら嬉しい、4位以降は全て同じ色で大丈夫

以下の記事を見てトライしてみたのですが、うまく実装できませんでした。

https://note.com/tech_malin/n/nb2824a5ec1cf

こちらの記事はdawnテーマでなく、私の知識不足でdawn用にアレンジすることができませんでした。

https://mrtc.jp/318

あまりに初歩的な質問をしており、長文のご回答となる可能性があり大変申し訳ないのですが、

お答えいただけますと幸いです。

どうぞよろしくお願いいたします。

以下の記事を見てトライしてみたのですが、うまく実装できませんでした。

https://note.com/tech_malin/n/nb2824a5ec1cf

こちらについてですが、

下記のようなエラーが表示されてしまいますか?

Liquid error (sections/main-collection-product-ranking.liquid line 99): Could not find asset snippets/product-card.liquid

もし、そうでしたら、

セクションに追加した、

main-collection-product-ranking.liquidから下記を探していただき、

{% render 'product-card',

下記のようにご変更ください。

{% render 'card-product',

もし上記がうまく行き、この方法をベースに進められるようでしたら、

申し訳ございません、

参考にされているのが有料の記事のようですので、

これ以上のアドバイスは難しそうです。

中途半端な情報で恐縮ですが、

少しでも参考になったようでしたら幸いです。

(キュー田辺)

1 Like

はじめまして

株式会社UnReactの西川と申します。

弊社のアプリ「シンプルランキング表示|お手軽ベストセラー」も有効な解決策の一つとしてご紹介させていただきます。

高いデザイン性のランキングバッジをノーコードで挿入できるアプリです。

下記、参考情報です。

シンプルランキング表示|お手軽ベストセラー

Shopifyにランキングバッジを導入するアプリについて徹底解説|ご利用ガイド

その他にも 45 個の Shopify アプリを開発しているので、ストア運用の際に参考にして頂ければ幸いです。

参考アプリ一覧