Zenn
✨

【Shopify オリジナル構築⑤】 [ランキングの表示]

2023/10/27に公開
EC
Shopify
Liquid
tech

はじめに

この記事では、商品一覧(コレクション)でランキングを表示させる方法をまとめます。

ファイルの作成

カスタマイズ > コード編集 > 新しくセクションを追加する
名前をfeature-new-collection.liquidとします。
既存のfeature-collection.liquidのコードを丸ごとコピーして貼り付けます。

デフォルトでは、この画像のようにただの商品の羅列になっています。

コード編集 HTML

feature-new-collection.liquidの以下の箇所を探します。

{%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}

このコードのすぐ下の<li>タグの閉じタグの直前にランキング用の<div>タグを追加します。

挿入する箇所
<li id="Slide-{{ section.id }}-{{ forloop.index }}" ～ >
 ～
 /* ここに新しくdivタグを挿入 */
</li>

挿入するコードはこちらです。

挿入するコード
<div class="ranking-bagde ranking-badge-{{ forloop.index }}">
  <span>{{ forloop.index }}</span>
</div>

コード編集 CSS

CSSのコードも追加します。

CSS
  .ranking-bagde {
    position: absolute;
    z-index: 1;
    top: 0;
    font-size: 25px;
    color: #ffffff;
    width: 4.5rem;
    height: 4.5rem;
    line-height: 4.5rem;
    text-align: center;
  }	
  .ranking-bagde-1 {
    background-color: red;
  }
  .ranking-bagde-2 {
    background-color: blue;
  }
  .ranking-bagde-3 {
    background-color: green;
  }

確認

上記のコードできちんとランキング表示されています！

カスタマイズ

設定によっては、三角形のデザインも可能です。

ほかにもベストセラー順に並べたときだけ有効にするなど、Liquidを使用すれば可能です。

Shopifyの構築を承ります！

Shopifyで実装したいデザインなどがござましたら、お気軽にご相談、お問い合わせくださいませ！

Discussion