コレクションのBuyButtonの表示件数を制御する方法について

Topic summary

コレクションのBuy Buttonで表示件数を8件に制御したい(WordPress上)。optionsのproductSetにlimitプロパティを追加したが反応せず。参照元が不明で、公式仕様としてのlimit情報は見当たらない。

提案された回避策(公式機能ではない):

  • iframeなし: productSetのiframeを無効化し、CSSの:nth-child()で9件目以降を非表示。独自CSS調整が必要。
  • iframeあり: JSでiframe内にCSSを挿入し、同様に:nth-child()で不要な商品を隠す(contentWindow経由)。

参考: Shopify Buy Button JS Advanced(iframe回避のカスタムスタイリング)、MDN HTMLIFrameElement.contentWindow。

結果・状況: 質問者は提案を試す意向。公式APIでの件数制御の確証は得られておらず、現状はワークアラウンドでの対応。議論は未解決(正式な方法は不明)。

Summarized with AI on January 3. AI used: gpt-5.

現在WPにてコレクションのBuyButtonを設置しているのですが、表示件数を登録されたすべてを表示するのではなく、「8件だけ表示」するというような商品数の数を制御する方法はないでしょうか?

調べた中で、「optionsオブジェクト内のproductSetセクションにlimitプロパティを追加」というものを実行したのですが、まったく反応せず何が原因かがわからず困っております。

何卒よろしくお願いいたします。

調べた中で、「optionsオブジェクト内のproductSetセクションにlimitプロパティを追加」というものを実行した

興味があったものの上記の参照元が書かれておらず、少し探してみましたがそのような仕様は見つけられなかったためとりあえず別案を記載します。

無理やりな方法なのでお勧めするものではありませんが、一応以下のような方法でも対応できるかなと思います。

軽くしか試していないのでその点留意ください。

iframeなし

  • productSetのiframeを無効にする
  • CSSの:nth-child()擬似クラスなどで不要な商品を消す

※自力でCSSを色々設定する必要があると思われます。

iframeあり

  • JSでiframe内にcssを挿入し、:nth-child()擬似クラスなどで不要な商品を消す

参考:

https://shopify.github.io/buy-button-js/advanced/

※Custom styling without iframes の見出し以下にiframeに関する記述あり

https://developer.mozilla.org/ja/docs/Web/API/HTMLIFrameElement/contentWindow

以上ですが、参照元がどうあれ現時点でlimitに関して情報が見つけられなかったため私からの回答は以上となります。

ご返信ありがとうございます!

方法さえもわからない状況でしたので、とてもありがたいです

上記参考にさせていただきます!