Shopifyレンジ設定: 「Range Parameters Must Have at Most 101 Steps」エラーの修正方法

「Range settings must have at most 101 steps」エラーは、min、max、stepの組み合わせが101を超えるスライダーポジションを生成していることを意味します。stepを広げるか、maxを狭めるか、大きな数値範囲が本当に必要な場合はnumber入力タイプに切り替えることで修正できます。根本的な原因は常に計算の問題であり、バグではありません。

重要なポイント

• Shopifyはレンジ設定を最大101ステップに制限します(スキーマ解析時に適用)。
• ステップ数は(max - min) / stepで計算され、その結果は100以下である必要があります。
• エラーはShopifyテーマエディターに表示され、セクションのレンダリングをブロックします。
• step: 1をより高い整数に変更することが最速の修正方法です。
• キャップのない整数入力が必要な場合は、rangeをnumberに置き換えます。

101ステップルールとは何か

Shopifyのrange入力タイプはテーマエディターにスライダーをレンダリングします。プラットフォームは厳格な上限を適用します: スライダーは最大101ポジション(ステップ0から100まで、包括的)を持つことができます。Shopifyはステップ数を内部的に次のように計算します:

steps = (max - min) / step

この計算が100より大きい値を生成する場合、Shopifyはスキーマを拒否して以下をスローします:

Error: Invalid schema: setting with id="[your_id]" step invalid.
Range settings must have at most 101 steps.

このバリデーションはテーマエディターがセクションをロードするたびに実行されるため、スキーマが修正されるまでセクションは完全に機能しなくなります。

注: Shopifyが入力設定のドキュメントで確認したように、4つすべてのレンジ属性(min、max、step、default)は数値でなければならず、文字列ではありません。いずれかに文字列を渡すとエラーもスローされます。

3つの最も一般的なトリガー

これらはマーチャントまたはジュニア開発者がこの問題に直面するときに最も見かけるパターンです:

1. 大きなレンジとstep: 1: min: 0, max: 500, step: 1を設定すると500ステップが生成されます。これが最も一般的なケースです。
2. stepを調整せずに既存のmaxを変更する: 開発者がロゴ幅スライダーのmaxを100から300に変更しますが、stepは1のままです。
3. HTMLスペック例からレンジをコピーする: 標準HTMLはステップ数を許可しますが、Shopifyはそうではありません。

実際のコミュニティ例には、min: 0, max: 500, step: 1に設定されたfree_shipping_thresholdスライダーと、ステップを再計算せずに300pxから550pxに拡張されたlogo_max_widthスライダーが含まれます。

レンジが有効かどうかを計算する方法

1行のスキーマを書く前に、このチェックを実行してください:

(max - min) / step <= 100   →  有効
(max - min) / step > 100    →  101ステップエラーをスローします

クイック例

境界は正確に100計算ステップです(スタートポイントを含む101スライダーポジション)。100より上の値はすべて拒否されます。

修正する3つの方法

1. ステップ値を増やす

これはほとんどの場合の正しい修正です。0から200pxの範囲で2ステップで動作するパディングスライダーは101ポジションをマーチャントに提供し、制限内に収まります。

{
  "type": "range",
  "id": "section_padding",
  "label": "Section padding",
  "min": 0,
  "max": 200,
  "step": 2,
  "unit": "px",
  "default": 40
}

使用場面: ほぼ常に。ほとんどのデザイン値(パディング、フォントサイズ、不透明度のパーセンテージ)は、広い範囲にわたって単位精度は必要ありません。

2. 最大値を狭める

単位ステップの精度が重要な場合(例えば、1から5の星評価または0から100のパーセンテージ)、step: 1で100ステップ内に収まるようにmaxを単純に削減します。

{
  "type": "range",
  "id": "free_shipping_threshold",
  "label": "Free shipping threshold",
  "min": 0,
  "max": 100,
  "step": 1,
  "unit": "$",
  "default": 50
}

このコミュニティで検証済みの修正は、Shopifyフォーラム全体に広がったfree_shipping_thresholdケースの受け入れられたソリューションでした。

3. numberタイプに切り替える

マーチャントが整数を入力する必要がある場合(ミリ秒単位のアニメーション遅延、100を超える製品数、0-9999である可能性があるしきい値)、rangeタイプは完全に間違ったツールです。代わりにnumberを使用してください。

{
  "type": "number",
  "id": "free_shipping_threshold",
  "label": "Free shipping threshold ($)",
  "default": 50
}

numberタイプは任意の整数を受け入れ、スライダーキャップがなく、Liquidでsection.settings.free_shipping_thresholdと同じようにアクセスされます。トレードオフはスライダーの代わりにテキスト入力となるため、マーチャントは範囲外の値を入力できます。ガードレールが重要な場合は、セクションコードにLiquidチェックを追加してください。

正しい修正を選ぶ: 決定テーブル

多くのチュートリアルが見落とすこと: レンジは整数のみをサポート

Shopifyのレンジ入力は10進数ステップ値をサポートしていません。不透明度に0.1ステップが必要な場合、回避策は値を整数(0から100)として保存し、Liquid出力で100で割ることです:

{% assign opacity = section.settings.overlay_opacity | divided_by: 100.0 %}
<div style="opacity: {{ opacity }}">

このパターンは見た目よりもクリーンです: マーチャントは0-100スライダーを見て、CSSは0.0-1.0浮動小数点数を取得します。ハックは必要ありません。

公開前に修正を検証する

Shopifyの公式リントCLIであるTheme Checkは、ローカル開発中にこのエラーをキャッチします。スキーマ変更をプッシュする前に実行してください:

shopify theme check

ローカルCLIセットアップなしでShopify管理コードエディターで直接作業している場合は、セクションファイルを保存してテーマエディタープレビューをリロードしてください。スキーマがまだ無効な場合、エラーはカスタマイザーの上部に赤いバナーとして表示されます。

Theme Checkがスキーマバリデーションと引数エラーをどのように処理するかについての詳細な説明については、Shopify Theme Check: Why a Single File Path Argument Does Not Workを参照してください。

レンジ設定を追加する前の実用的なチェックリスト

新しいrangeブロックを書くたびにこのリストを使用してください:

• (max - min) / stepを計算し、結果が100以下であることを確認します。
• 4つのすべての属性(min、max、step、default)が文字列ではなく整数であることを確認します。
• defaultがminとmaxの間にあることを確認します。
• この値は本当にスライダーから利益を得ていますか? そうでない場合は、number、select、またはtextを使用してください。
• 本番環境にプッシュする前にテーマエディターでテストします。

すべてのスキーマ入力タイプと各タイプを使用する場合についての完全な説明については、Shopifyテーマ開発ガイドを参照してください。

まとめ

「range parameters must have at most 101 steps」エラーは純粋な計算です。公式(max - min) / stepは100以下の値を生成する必要があります。ステップを広げるか、maxをキャップするか、numberタイプに切り替えてください。これらの修正は、Shopifyプランのアップグレード、テーマの再インストール、またはサポートチケットを必要としません。制約を一度理解すればもう二度と遭遇することはありません。