商品情報にスキップ
1 1
公開日:2026.03.19

【Horizon】Shopifyのテーマ「Horizon」でコレクションのソートフィルタ項目を個々に表示・非表示する方法

【Horizon】Shopifyのテーマ「Horizon」でコレクションのソートフィルタ項目を個々に表示・非表示する方法

用途

  • コレクション編集
詳細を表示する

Shopifyのコレクションページにあるソートフィルタ(並び替え)ですが、競合対策の観点から売上順を非表示にするなどのリクエストを頂くことがあります。その際、直接コードで非表示にしても良いのですが、運用後の方針変更にも対応できるよう、設定値を変更するだけで個々の表示/非表示を切り替えられると便利ですね。

Horizonテーマの安全なカスタマイズ方針(custom.*ファイルのみ)に準拠した実装例です。カスタムLiquidセクションにコードを追加するだけで設定できます。


Shopifyのテーマ「Horizon」でコレクションのソートフィルタ項目を個々に表示・非表示する方法

ソートフィルタ設定の説明


【設定手順】コレクションテンプレートにカスタムLiquidセクションを追加してコードを挿入

設定手順の説明

◆手順
・コレクションテンプレートに「カスタムLiquid」セクションを追加
・コードを貼り付け、非表示にしたいソートオプションの value のコメントアウトを解除
・フィルタ操作やページネーション後にもオプションが復活しないよう、MutationObserverでDOM差し替えを監視して再実行


◆ソートオプション value 一覧
・manual — オススメ(手動並び順)
・best-selling — ベストセラー(売上順)
・title-ascending — アルファベット順, A-Z
・title-descending — アルファベット順, Z-A
・price-ascending — 価格の安い順
・price-descending — 価格の高い順
・created-ascending — 古い商品順
・created-descending — 新着順


Dawn版のTIPSはこちら: コレクションのソートフィルタ項目を個々に設定可能にする方法

ご購入(すべて¥0です)いただくと、サンプルコードをご覧いただけるようになります。

すでにご購入済みの方はこちらからログインしてください。

サンプルコード

動作検証済テーマ:Horizon 3.4.0

コレクションテンプレートの「カスタムLiquid」セクションに貼り付けるコード