[ランキングの表示]2023/10/27に公開ECShopifyLiquidtechはじめにこの記事では、商品一覧(コレクション)でランキングを表示させる方法をまとめます。新しくセクションを追加する名前をfeature-new-collection.liquidとします。既存のfeature-collection.liquidのコードを丸ごとコピーして貼り付けます。デフォルトでは、この画像のようにただの商品の羅列になっています。HTMLfeature-new-collection.liquidの以下の箇所を探します。-%}このコードのすぐ下の<li>タグの閉じタグの直前にランキング用の<div>タグを追加します。*/</li>挿入するコードはこちらです。}}</span></div>!forloopオブジェクトの説明は省略します。CSSCSSのコードも追加します。上記のコードできちんとランキング表示されています!カスタマイズ設定によっては、三角形のデザインも可能です。ほかにもベストセラー順に並べたときだけ有効にするなど、Liquidを使用すれば可能です。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。