Shopifyの商品ページに数量またはボリュームディスカウントテーブルを表示するには、テーマエディタの割引アプリからテーマアプリブロックを追加するか、商品テンプレート内のLiquidでテーブルをハンドコードします。アプリブロックルートはノーコードパスです。ブロックをカートに追加ボタンの下にドロップすると、テーマファイルに触れずに「もっと購入してもっと保存」階層テーブルがレンダリングされます。実際に重要なことは、配置後に起こることです。表示されたテーブルは、チェックアウト時に発火する割引と同期を保つ必要があり、ヘッディングタグで価格をラップする追加のH1を作成してランキングを静かに損なう、SEOセーフにレンダリングする必要があります。これら2つのことを正しく取得し、階層テーブルは商品ページに追加できる最も高いレバレッジの1つです。これらを誤ってチェックアウトしないお客様に価格を表示している場合、ヘッディング構造を破損しました。
このガイドは、可視階層テーブルが平均注文額を上昇させる理由、DIY Liquidアプローチとそれを破る保守トラップ、テーマアプリブロック対ハンドコードCoreWebVitalsの考慮事項、およびコピーできる「数量、各単価、節約」テーブルを備えた完全な実行例をカバーしています。
そもそも、なぜ商品ページに数量ブレークテーブルを表示するのですか?
数量ブレークは層状割引です。3つ購入して10%節約、6つ購入して15%節約、12つ以上購入して20%節約してください。割引は、ストアフロント表示なしで完全に存在できます。Shopifyはお客様が来ることを見ることはないかどうかにかかわらずチェックアウト時にそれを適用します。これがちょうど問題です。買い手が見ることができない割引は、行動を変えることができない割引です。
階層テーブルはオファーの販売および商品化です。サイレント価格ルールを目に見えるオファーに変えます。1ユニットを購入したい顧客は、3つを購入すると1ユニットあたりの価格が低下すること、6つ購入するとさらに低下することを明確に数字で見ています。これは決定の正確な瞬間に配置されたより大きなカートへの動きです。カートに追加ボタンの下。
この理由は十分に理解されている行動理由です。階層テーブルはアンカーを設定し、「節約」デルタを表示します。買い手は分離された1つの価格を評価していません。彼らは現在の選択肢を1つか2つのユニット離れたはるか目に見える方法と比較しています。消耗可能な、在庫可能な、またはギフト優しい商品の場合、その比較は確実にユニットを移動します。卸売およびB2Bの買い手は、価格破損グリッドをコースの問題として期待し、その欠席は欠落した機能として読みます。
これは買い手がそれを信じる場合にのみ役立つことです。顧客が最初に商品ページで「各34ドルで6」を見て、その後チェックアウト時に各40ドルで請求された場合、その注文を失っていません。あなたはあなたの価格が実数ではないことを教えて与えました。これが表示と割引エンジンが2つの別々のシステムであってはならない理由です。
画像プレースホルダー (画像 1): 商品ページ上の数量ブレーク層テーブル
推奨ビジュアル: Shopify商品ページのきれいな16:9ストアフロントモックアップ。右列は商品タイトル、価格、カートに追加ボタンを表示します。ボタンのすぐ下に、「数量」、「各単価」、および「節約」列を持つ4行階層テーブルが配置されます。3行目 (6から11) は紫色で強調表示され、アクティブな階層で、小さな「15%節約している」メモが表示されます。左側に中立的な商品写真プレースホルダー。ブランドカラー紫と金のアクセント、フラットモダンUI、実際のロゴなし。
Shopify商品ページの階層テーブルを表示するにはどのような方法がありますか?
3つの実用的なルートがあり、大体最も手動から最も保守可能な順です。
オプション1: Liquidでテーブルをハンドコードする
商品テンプレート (またはそれがレンダリングするセクションまたはスニペット) を編集して、テーブルマークアップ自体を作成します。階層値を静的HTMLとしてハンドコードするか、商品メタフィールドから読み込んでLiquidでループします。これにより、マークアップとスタイリングを完全に制御できます。1つまたは2つの商品とオンコール開発者を使用する店の場合、これは本当に正しい答えです。
コストはメンテナンスであり、見た目よりも高いです。ハンドコードテーブルは、割引から切断された、テーマに住む価格設定の2番目のコピーです。階層を変更するたびに、2つの場所で変更します。割引とテーマ。1つを見逃すと、テーブルが嘘をつきます。Shopifyフォーラムのマーチャントは、階層表示のためにハンドビルトHTMLテーブルを構築し、完全に別の場所に住んでいる割引ルールと同じ方法で常に同じ方法で整列を保つのを説明しています。これは、ある日それが静かにもう一つ行われるまで機能します。
オプション2: メタフィールド駆動のLiquidテーブル
より堅牢なDIYバージョンは、階層データを商品メタフィールドに保存し、Liquidループでレンダリングするため、テーブルは商品ごとのハンドコードではなくデータ駆動型です。これは良い。1つの構造化された場所で階層を編集します。しかし、あなたはレンダリング、レスポンシブスタイリング、ライブ更新JavaScript、そして重要なことに、メタフィールド値を割引が使用する値と同じに保つ仕事を所有しています。何もその平等を強制しません。
オプション3: 割引アプリからのテーマアプリブロック
ノーコードルートはShopifyのテーマアプリ拡張フレームワークを使用します。Shopifyのテーマアプリ拡張ドキュメントに従うと、これらの拡張「マーチャントがLiquidテンプレートまたはコードと相互作用することなく、テーマに動的要素を簡単に追加できます」。ドキュメントは「価格、評価」を動的要素として一覧表示します。階層テーブルはこの種のぴったり合ったものです。
アプリはアプリブロックを提供しています。テーマエディタで商品テンプレートを開き、セクション内のブロック追加をクリックして、アプリの階層テーブルブロックを選択し、通常はカートに追加ボタンの下に配置する場所に配置します。テーマコードを編集することはありません。Shopifyのドキュメントは、マーチャントがエディタでアプリブロックをセクションレベルで「追加、削除、および並べ替え」できることを確認し、アプリブロックは「テーマから書体と色などのスタイル設定プロパティを継承」するため、カスタムCSSなしでテーブルが書体と設計に一致します。
重要な構造的利点は、良好に構築されたアプリブロックが割引と同じ真実のソースから階層値を読み込むため、表示とチェックアウト数学が逆流できないということです。これが全体的なゲームであり、ほとんどの店がこのルートを獲得する理由です。
アプリブロック対アプリ埋め込みブロック: 階層テーブルはどちらですか?
Shopifyのテーマアプリ拡張フレームワークには2つの種類のブロックがあり、階層テーブルが一方であり、もう一方ではないため、知る価値があります。
アプリブロックはtarget: sectionをスキーマで使用します。これは、マーチャントがセクション内の特定のスポットにドロップし、現在の商品のような動的ソースをポイントできる目に見える配置された要素です。Shopifyの構成ドキュメントによると、アプリブロックは、テーマエディタで「追加、削除、および並べ替え」され、「ページをディスプレイするため、異なる商品のデータを表示するために動的ソースをポイント」できます。その最後の部分は、階層テーブルが必要とする正確なものです。異なる商品が表示されると、あらゆる商品のティアを表示する必要があります。したがって、階層テーブルはアプリブロックです。
アプリ埋め込みブロックはtarget: head、compliance_head、またはbodyを使用します。Shopifyは「閉鎖head and body タグの前にアプリ埋め込みブロックをレンダリングして注入」し、チャットバブル、バッジ、分析またはSEOタグのような浮遊またはオーバーレイされた要素を対象としています。レイアウト内の正確なポイントに配置されたコンテンツではありません。アプリ埋め込みブロックはデフォルトで無効になっており、マーチャントはテーマ設定、アプリ埋め込みの下で有効にします。階層テーブルは、ページをフローティングしていなく、正確な位置に商品レイアウトに配置する必要があるため、埋め込みブロックではありません。
正直なガイドに属する1つの注意事項: アプリブロックはOnline Store 2.0テーマでのみサポートされます。JSONテンプレートを使用するテーマです。Shopifyのオンボーディングドキュメントは、「アプリブロックはJSONテンプレート(Online Store 2.0テーマとも呼ばれる)を含むテーマでのみサポートされる」と述べています。はるか昔ながらのテーマを使用している場合、ドラッグアンドドロップブロック配置は利用できず、Liquidアプローチまたはテーマアップグレードに戻ります。最新のShopifyテーマにいるほとんどの店はすでにOnline Store 2.0にいます。
画像プレースホルダー (画像 2): テーマエディタで階層テーブルアプリブロックを追加する
推奨ビジュアル: Shopifyテーマエディタの16:9スクリーンショットスタイルのモックアップ。左パネルには、展開された「ブロック追加」アフォーダンスを備えた商品テンプレートのセクションツリーが表示され、アプリの「数量ブレークテーブル」ブロックオプションがアプリの見出しの下に表示されます。中央には、カートに追加ボタンの下に表示される階層テーブルを含むライブ商品プレビューが表示されます。Polaris スタイル管理者クロム、選択ブロックのアクセント紫。参照スクリーンショットマニフェスト.mdスロットボリュームディスカウント-ステップ-3は、後で実際のスクリーンをキャプチャします。
なぜハンドコード階層テーブルは静かに破損するのか (コレクショントラップ)
これは最も不満なフォーラムの投稿を生成する失敗モードであり、テーブルマークアップのバグではありません。割引がスコープされていると考える方法とShopifyが実際にカウントする方法の間の不一致です。
ダイニングチェア商品ページでハンドコードテーブルを構築したと言ってください。3〜5椅子は15%を節約し、6〜9は18%を節約し、10以上は20%を節約します。あなたは「椅子」コレクションにスコープされたネイティブShopify割引で戻ります。テーブルは正しく見えます。その後、2つのことは静かに間違って行きます。
まず、ネイティブコレクションスコープ割引は、1つの椅子ではなく、コレクション内のすべての商品にわたって総ユニットをカウントします。したがって、買い手は3つの異なる椅子のうち1つずつを追加することで「3買う」階層をトリガーでき、これは任意の単一椅子ページのテーブルが意味するものではありません。表示されたテーブルは1つの商品の視点から作成されます。割引は収集数学を実行しています。彼らは異なるオファーを説明してください。
2番目に、割引のメンバーシップはあなたの下で変わります。新しい商品をそのコレクションに追加する瞬間、または商品がそれから外れた瞬間、しきい値に向かってカウントするアイテムのセットが変わります。マーチャントはフォーラムでこれをフラグしました。コレクションに商品を追加するとサイレント割引ロジックが変わり、何も警告しません。ハンドコードテーブルは古い階層を表示しています。顧客が見る割引をもう説明しているのはこれからです。
これが、階層テーブルが手で保持する静的アーティファクトであってはならない理由です。テーブルは割引の表示です。割引が、テーブルに触れることなく、スコープまたはメンバーシップを変更できる場合、2つがドリフトしますが、ドリフトは顧客やあなた自身のテストオーダーがそれを表示するまで見えません。修正は構造的です。割引が使用する同じ定義から商品ごとの階層を表示し、テーブルがカウント方法をカウント、コレクション全体にプールされていない場合、商品のない、商品のないをカウントします。商品単位ボリューム割引。これは常に真の表と火曜日の真の表との違いです。
SEOトラップ: 価格をヘッディングタグとしてレンダリングしません
これは本物で文書化された地雷です。アプリレビューから直接来ます。マーチャントは、人気のある割引アプリがオンページ価格をヘッディングタグ内にレンダリングしたことをフラグしました。これは複数の競合するH1要素を全ての商品ページに作成し、サポートは修正を拒否しました。これは化粧品の苦情ではありません。これはウィジェットに焼き込まれたSEOの退行です。
なぜそれが重要なのか。検索エンジンはあなたのヘッディング階層を使用してページを理解してください。H1は、ページの単一の主要タイトル、ほぼ常に商品名であることを意味しています。残りのヘッディング、H2およびH3は、その下の構造を説明します。割引ウィジェットが「各6ドル34」をラップするときまたは理由は意味的にゼロであり、実際のヘッディングを薄めます。1ページ上の複数のH1は、ページが実際に何についてであるかについてのシグナルを曇らせます。価格と「節約」数字はデータです。ヘッディングの要素ではなく、テーブルセル、スパン、またはCSSでスタイルされた段落に属しています。
層テーブルをレンダリングするための正しい方法は、退屈に正しいHTML: 割引アプリを評価する場合、これはインストール前に確認するための具体的なことです。デモ商品ページでソースを表示するか、ブラウザのアクセシビリティまたはSEOインスペクターを使用して実行して、ウィジェットがヘッディング要素を追加しないことを確認してください。これは5分間のテストであり、遅い、診断が難しいランキング低下から保存されます。この問題の欠落をマーケティングすることは公正なゲームであり、多くのウィジェットがそれを間違ってしまうため。 商品ページ階層テーブルは小さいですが、最高の意図、高トラフィックのページにレンダリングされるため、パフォーマンスコストが複合化されます。2つのCore Web Vitals指標が視聴する必要があります。 累積的なレイアウトシフト (CLS) が最初です。テーブルがページの残りの部分がペイントした後、瞬間でポップアップされて、カートに追加ボタンを押し、レイアウトシフトがラックアップされます。修正は、可能な限り初期HTMLでサーバー側でテーブルをレンダリングすることです。スペースは最初のペイントから予約されるため、ページが沈むまでJavaScriptで後で注入する代わりに。層テーブルの値はレンダリング時に認識されます。それが遅く到着する必要がある理由はありません。 最大コンテンツフルペイント (LCP) と一般的な重量予算が2番目です。重いJavaScriptバンドル、独自のWebフォント、またはフレームワークコードの塊を読み込むウィジェットは、根本的には小さなテーブルを描くためにあなたのスピード予算をかなり危機的に費やしています。Shopifyのテーマアプリ拡張フレームワークはここで役立ちます。アプリブロックがページに存在する場合、そのスタイルシートとスクリプトはフレームワーク独自のタグを介して1回ロードされ、マーチャントが同じファイルを参照する複数のブロックを追加する場合、Shopifyはそのファイルを1回だけ含みます。良い層テーブルはそれに頼り、最小限のCSSとJSを提供し、重いリフティングサーバー側を行います。 ライブ更新動作にも注目する価値があります。素敵な層テーブルはアクティブな層をハイライトします。買い手が数量を変更すると、ページをリロードなしです。この相互作用は、バニラJavaScriptの数行がクラスを切り替えるときに安いもので、フレームワークを再レンダリングするときに高価です。それを明るく保ってください。テーブルのポイントはより多くのユニットを販売することであり、相互作用が遅いページはより少ないユニットを販売します。 具体的なものを構築しましょう。サプリメントブランドは40ドルでタンパク質ダブをキューます。彼らは同じタブへの在庫を報酬したいと考えています。これらの階層にカウントされた同じ製品: 商品ページのテーブルは、カートに追加ボタンの直下に配置されたものはこのようなものです。「節約」列がそれは説得される。 6タブを追加する買い手は、「6〜11」行をアクティブな階層としてハイライトしてから、各34ドルで6つの完全な価格で購入することに対して48ドルを節約しています。上下の行は表示されたままなので、次の階層 (「もう6つだけ、それは各32ドルに低下する") は常に表示されます。その目に見える次のステップは、メカニズムです。これは卸売価格グリッドが常に印刷された理由と同じです。 このガイドの残りの部分からの2つのルールは両方ともこの正確なテーブルに適用されます。まず、「各単価」列の値は、割引が実際に請求する値である必要があります。整理コレクション全体にプールされていない場合は、商品名の風味バリアントに数えられました。2番目に、これらのセルのいずれもヘッディングタグではできません。34ドルはテーブルセルです。 これは、ほとんどの店が使用すべき、アプリブロックルートの信頼できるシーケンスです。 アプリブロックにはJSONテンプレートテーマが必要です。現在のShopifyテーマを使用している場合、ほぼ間違いなく適格です。ビンテージテーマを使用している場合は、まずテーマアップグレード計画するか、その間にLiquidアプローチを使用してください。 割引自体に数量ブレークを設定します。分岐点、1ユニットあたりの価格またはパーセンテージ、およびカウントモード (この商品のバリアントを一緒にカウントし、収集全体ではなく)。これは真実の単一のソースです。顧客が見るすべてのものはここから派生する必要があります。 テーマエディタで商品テンプレートを開き、商品情報セクション内のブロック追加を選択して、アプリの階層テーブルブロックを選択します。カートに追加ボタンのすぐ下にドラッグします。アプリブロックはテーマの書体と色を継承するため、すぐに設計に一致します。スペーシングまたは配置のみを調整してください。ブロックが設定を公開する場合。 実際のテストカートに商品を6つのユニットなど、階層境界を越える数量で追加し、テーブルが表示された価格がShop Payを含むチェックアウト価格であることを確認してください。これは顧客がそれを行う前に展開をキャッチするステップです。 商品ページソースを表示し、ウィジェットがヘッディングタグを追加しておらず、読み込まれたときにカートに追加ボタンをプッシュしていないことを確認してください。SEOまたはアクセシビリティインスペクターのクイック通過により、1つのH1、商品タイトルが確認されます。階層テーブルはテーブルまたはリストに住んでいます。ヘッディングではなく。 割引がスコープされている場合は、関連する収集またはグループから商品を追加および削除し、ターゲット商品上の階層テーブルを再確認して、意図した階層が表示されることを確認します。これは手で保たれたテーブルが失敗する場所です。適切に商品スコープのオファーはしません。 割引からドリフトする手でコードされたテーブルを維持したくない場合、またはウィジェットのHTMLを監査して迷いヘッディングタグを監査する場合は、これが具体的な問題ですStackable正直にShopifyの実際のルール内で処理するために構築されました。 Stackableの無料インストールを参照してください。商品ページテーブルとチェックアウト合計が一分の一に同意するusestackable.com/pricing。 よくある質問への回答 テーマエディタで割引アプリからテーマアプリブロックを追加して、カートに追加ボタンの下に配置するか、商品テンプレート内のLiquidでテーブルをハンドコードします。アプリブロックルートはコード不要で、良好に構築されたアプリではチェックアウトが使用する同じ階層値を読みます。どちらの場合でも、表示される価格がチェックアウトで請求される価格と一致すること、およびテーブルがヘッディングタグを使用していないことが必須要件です。 はい。テーマがOnline Store 2.0であり、テーマアプリブロックを提供する割引アプリを使用する場合です。Shopifyのテーマエディタにより、マーチャントはアプリブロックをビジュアルで追加、削除、並べ替えられます。テーマコードは不要です。LiquidでテーブルをハンドコードするにはJavaScriptの知識が必要で、テーブルは割引から分離されているため、同期を保つために手動でメンテナンスする必要があります。 構築が悪い場合のみです。本当の危険は、価格をヘッディングタグ内にレンダリングするウィジェットです。これにより追加のH1またはH2要素が生成され、ページのヘッディング構造が薄れます。正しく構築されたテーブルは、価格をテーブルセルまたはCSSでスタイルされたスパンに配置し、単一のH1 (商品タイトル) を保ちます。デモページでソースを表示し、ヘッディング要素が追加されていないことを確認して、アプリをチェックしてください。 検索エンジンはページのヘッディング階層を読んで、ページを理解します。H1はページの主要タイトル、通常は商品名である必要があります。ウィジェットが価格をH1またはH2でラップして大きく見せると、実際の意味を持たないヘッディングが注入され、複数の競合するヘッディングが作成され、ページが何についてのものであるかについてのシグナルが曖昧になります。価格はデータです。ヘッディングタグではなくCSSでスタイルしてください。 一致する必要があります。これは最も重要なことです。テーブルが手でコードされた価格設定のコピーである場合、実際の割引から逸脱する可能性があります。割引エンジンが使用する同じ定義から読む場合、逸脱できません。常に階層境界を越える数量でテストオーダーを配置し、商品ページの価格がShop Payを含むチェックアウト価格と等しいことを確認してください。 ネイティブコレクションスコープの割引では、商品を追加または削除すると、しきい値にカウントされるアイテムが変更され、ハンドコードテーブルはそれを反映しません。マーチャントはフォーラムでこの正確な沈黙の破損を報告しています。コレクション全体をプールするのではなく、特定の商品とそのバリアントをカウントする商品単位のオファーは問題を回避するため、その商品ページ上のテーブルはコレクション変更に関係なく正確なままです。 する必要はありません。Shopifyのフレームワークは、複数のブロックが同じファイルを共有している場合でも、アプリブロックのCSSとJavaScriptを1ページあたり1回だけ読み込みます。良い階層テーブルはサーバー側にレンダリングされるため、スペースは最初のペイントから予約され (Cumulative Layout Shiftを保護)、最小限のCSSとJSを提供し、重いフレームワークの再レンダリングではなくバニラJavaScriptの数行を使用してライブ階層ハイライトを行います。 The team building Stackable, the reliability-first bulk and volume discount app for Shopify. We write about discount stacking, Shopify Functions, and how to run promotions that hold up at checkout. 本サイトの運営には必須Cookieを使用しており、お客様の同意をいただいた場合のみ、アクセス状況を把握するための分析Cookieを使用します。詳細は Cookieポリシー.(またはスタイルされたリスト) その量と価格を保有するセル。CSSを通じて視覚的な重量を適用し、ヘッディングタグを通じてではなく。数字は、デザイナーが望むほど大きく大胆に見えることができます。彼らは単にページの見出しのふりをしてはいけません。テーマアプリ拡張フレームワークのStorefront Widgets向けのShopifyの独自のガイダンスは同じ方向を指し、内部的にはルールが単純です。Storefront ウィジェットはSEO安全である必要があり、注入されたヘッディングタグはありません。
Core Web Vitals: 層テーブルはあなたの速度をコストしてはいけません
実行例: 「数量、各単価、節約」テーブル
で成型されます。これら2つのルールに従い、このテーブルはカタログ内のすべての商品ページで出荷するのは安全です。ステップバイステップで設定する方法
1.テーマがOnline Store 2.0であることを確認します
2.階層を1回定義します。割引で
3.テーマエディタのティアテーブルアプリブロックを追加します
4.表示がチェックアウト数学と等しいことを確認します
5.ヘッディング構造とレイアウトの安定性を確認します
6.コレクションエッジケースをテストします
画像プレースホルダー (画像 3): 表示とチェックアウトが同意しました
推奨ビジュアル: 16:9分割図。左パネルのラベル「商品ページ」6単位行が $34.00 各高い場所で階層テーブルを表示しています。右パネルのラベル「チェックアウト」は、「同じ価格」の読み取り緑チェックマークバッジで、$34.00 各に充電されたものと同じ6ユニットが表示されます。単一の壊れていないチェーンアイコンは、2つのパネルをリンクしています。以下、キャプションストリップは「1つの真実のソース: ディスプレイはチェックアウトと等しい。」ブランドカラー紫と金、フラットベクトル、写真なし。
Stackableで確実に実行してください
ボトムライン
関連記事
よくある質問
Stackable Team
Related Posts
