Shopifyでトップページに商品タグ一覧を表示する方法【アプリなし】

2024年8月27日2024年8月30日

この記事ではShopifyのトップページに商品タグをすべて表示する方法について解説していきます。なお、同じ方法でトップページ以外にも配置可能です。
アプリなし、コピペのみで無料で使うことができる設定方法です。

完成形がこちら

商品につくタグがすべて表示されます。タグをクリックするとそのタグが付いた商品の一覧ページにリンクするようになっています。

また、表示したくないタグを設定することも可能です。

設定方法

「オンラインストア > テーマ > カスタマイズ」をクリックします。

「①ブロックを追加 > ②カスタムLiquid」を選択します。
③赤枠に下記のコードを貼り付けます。貼り付けたら保存してください。

Liquid

{% assign tags  = "" %}
{% assign inactive = "サンプル1,サンプル2,サンプル3" %}{% # 表示しないタグをカンマ区切りで入力 %}
{% paginate collections.all.products by 2000 %}
　{% for product in collections.all.products %}
    {% for tag in product.tags %}
      {% unless inactive contains tag %}
        {% unless tags contains tag %}
          {% assign tags = tags | append: tag | append: "," %}
        {% endunless %}
      {% endunless %}
    {% endfor %}
　{% endfor %}
{% endpaginate %}
<div class="page-width">
  <h2>タグから探す</h2>{% # セクションのタイトル %}
  <div class="all-product-tags">
    {% assign tags = tags | split: "," | sort %}
    {% for tag in tags %}
      <a href="collections/all/{{ tag }}">{{ tag }}</a>
    {% endfor %}
  </div>
</div>

次に見た目を整えていきます。

左の歯車マークから「テーマ設定 > カスタムCSS」を選択し下記のコードを貼り付けます。

CSS

.all-product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 8px; /* タグの間隔 */
}

.all-product-tags a {
    display: grid;
    padding: 7px 14px 9px; /* タグの余白 */
    color: currentColor;
    border: solid 1px currentColor; /* 枠線の太さと色 */
    border-radius: 20px;　/* 角丸にしない場合は消す */
    line-height: 1;
    font-size: 15px; /* 文字サイズ */
    text-decoration: none;
    transition: opacity 0.25s;
}

.all-product-tags a:hover {
    opacity: 0.7;
}