CSSファイルを作成 アセットを追加 「新しいassetを追加する」より「collection-ranking.css」を作成します。こちらの名称も何でも構いません。 CSSを追加 以下のCSSをコピペし保存してください。 .ranking-item { position: relative; } .ranking-item .ranking-badge { position: absolute; top: 0; left: .5rem; display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; font-weight: 700; text-align: center; letter-spacing: 0; color: #999; background-color: #eee; z-index: 1; } .ranking-item .ranking-badge[data-rank="1"] { color: #fff; background-color: #c90; } .ranking-item .ranking-badge[data-rank="2"] { color: #fff; background-color: #999; } .ranking-item .ranking-badge[data-rank="3"] { color: #fff; background-color: #633; } @media (min-width: 750px) { .ranking-item .ranking-badge { left: 1rem; } } このCSSはサムネイル通りのシンプルな四角形のデザインで、Dawn用のものになります。 ご利用のテーマデザインに合わせて編集してください。 セクションファイルを作成 セクションを追加 コード編集画面に移動して「新しいsectionを追加する」より「main-collection-ranking.liquid」を作成します。 名称は何でも構いませんが、管理しやすいものがおすすめです。 コレクションのソースをコピペ テーマによって該当のファイル名は異なりますが、Templates内の「collection.json」または「collection.liquid」を開いて、読み込んでいるセクションファイルを確認し展開してください。 DawnならSections内の「main-collection-product-grid.liquid」が該当します。Debutの場合は「collection-template.liquid」になります。 Dawnの場合はこちらになります。 不要なソースを削除 Dawn（v2.5.0）の場合は、26〜33、141〜163行目は並べ替えや絞り込みの部分の為、ランキングページには不要なので削除します。 {%- if section.settings.enable_filtering or section.settings.enable_sorting -%} {{ 'component-facets.css' | asset_url | stylesheet_tag }} <script src="{{ 'facets.js' | asset_url }}" defer="defer"></script> <div class="page-width" id="main-collection-filters" data-id="{{ section.id }}"> {% render 'facets', results: collection, enable_filtering: section.settings.enable_filtering, enable_sorting: section.settings.enable_sorting, collapse_on_larger_devices: section.settings.collapse_on_larger_devices %} </div> {%- endif -%} { "type": "header", "content": "t:sections.main-collection-product-grid.settings.header__1.content" }, { "type": "checkbox", "id": "enable_filtering", "default": true, "label": "t:sections.main-collection-product-grid.settings.enable_filtering.label", "info": "t:sections.main-collection-product-grid.settings.enable_filtering.info" }, { "type": "checkbox", "id": "enable_sorting", "default": true, "label": "t:sections.main-collection-product-grid.settings.enable_sorting.label" }, { "type": "checkbox", "id": "collapse_on_larger_devices", "default": false, "label": "t:sections.main-collection-product-grid.settings.collapse_on_larger_devices.label" }, Liquidコードを挿入 1で作成した「collection-ranking.css」を読み込むLiquidコードを6行目あたりに挿入します。 {{ 'collection-ranking.css' | asset_url | stylesheet_tag }} そして62行目にある<li class="grid__item">にクラス「raking-item」加え、すぐ下に以下のLiquidコードを挿入します。 <li class="grid__item ranking-item"> <span class="ranking-badge" data-rank="{{ forloop.index | plus: paginate.current_offset }}"> {{ forloop.index | plus: paginate.current_offset }} </span> 簡単に説明しますと、{{ forloop.index }} で商品をナンバリングして、plus: paginate.current_offsetで前ページまでの商品点数を加算するというコードです。 商品点数が少なく1ページで完結する場合は{{ forloop.index }} だけで構いません。 詳しく知りたい方はShopify Developersでご確認ください。 forloop.indexpaginate.current_offset 上記のコードが挿入できたらファイルを保存します。 テンプレートを追加 JSONテンプレートを作成 「新しいtemplateを追加する」より「collection.ranking.json」を作成します。 基本的には「collection.json」の内容をコピペして、2で作成したセクションファイルを読み込むように編集するだけの作業です。 Dawnの場合は、以下が見本ソースとなります。 { "name": "Ranking template", "sections": { "banner": { "type": "main-collection-banner", "settings": { } }, "ranking": { "type": "main-collection-ranking", "settings": { } } }, "order": [ "banner", "ranking" ] } これを保存すれば、テーマ編集は完了です。 人気ランキングページを作成 コレクションを作成 「商品管理→コレクション」の「コレクションを作成する」ボタンより新規コレクションを作成しタイトルをつけてください。 次にテーマテンプレートのドロップダウンで「ranking」を選択します。本来はテンプレートの「name」が反映されるのだと思いますが、現時点ではファイル名から出力されているようです。 続いて条件を設定してください。総合ランキングの場合は「在庫数が0より大きい」や「商品価格が0より大きい」などの設定で作れます。ブランド別や、カテゴリー別ランキングにしたり、手動でランキングを作ることもできます。 商品管理の並べ変えを「ベストセラー」にすれば、売上順に並ぶので、メンテ不要のリアルタイム人気ランキングページとなります。 実装サンプル 実際のランキングページ見本はこちら
