# 商品一覧ページ以外にもカートボタンを表示させたい

**URL:** <https://community.shopify.com/t/topic/40542>\
**Category:** 技術的なQ＆A\
**Created:** [March 23, 2021, 10:12am UTC](https://community.shopify.com/t/topic/40542 "2021-03-23T10:12:43Z")\
**Posts on this page:** 4\
**Page:** 1

## AI-generated summary

WordPress上でShopifyのBuy Buttonを使い、どのページでもヘッダーから「カートを見る」ボタンを押すと右側にスライドカートを表示したい、という相談。添付画像はヘッダー常設のカートボタンのイメージとして使われている。\n\n- 1つの見解では、Buy Button標準機能だけでは難しく、BuyButton.jsのカスタマイズで対応できなければStorefront APIを使った独自実装が必要。\n- 具体策として、WordPressのheader.phpに空のDIVを置き、Buy Buttonの`toggle`設定で`afterRender`時にその要素へカートトグルを移動する方法が提示された。`iframe:false`や`sticky:false`の設定例、件数・アイコン表示の指定も共有されている。\n\n未解決点は、Buy Buttonが特定の商品またはコレクションに紐づく仕様のため、ヘッダーに置けても「商品全般に対する汎用カート」としてニーズを満たすかが不明なこと。結論として、実装案は出たが、要件に完全適合するかは引き続き確認が必要。

<div class="post-metadata">

**Author:** ![jarinkogirl](https://avatars.discourse-cdn.com/v4/letter/j/ce73a5/32.png) [@jarinkogirl](https://community.shopify.com/u/jarinkogirl)\
**Post date:** [March 23, 2021, 10:12am UTC](https://community.shopify.com/t/topic/40542/1 "2021-03-23T10:12:43Z")

</div>

wordpressにコレクションをBuyButtonで埋め込んでいます。

どのページに行っても、カートボタンをヘッダーに常に配置したいのですが、

何か方法はありますでしょうか？

検討がつかず、どなたかご助言いただけますと幸いです。

（挙動としては、どのページにおいても、「カートを見る」ボタンを押すと、

右からカートがスライドで表示（デフォルトの表示のされ方）にしたいと思っています）

 ![Screenshot at Mar 23 19-09-56.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/2/2/5/225c7543995abc53c33a1581c4d9932241e001e7.png)

---

<div class="post-metadata">

**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\
**Post date:** [March 29, 2021, 7:03am UTC](https://community.shopify.com/t/topic/40542/2 "2021-03-29T07:03:19Z")

</div>

おそらくBuyButtonの範疇ではできないと思います。

以下にBuyButton.jsの仕様があるので、ここで書いてあるカスタマイズでできれば可能ですが、できない場合は、Storefront APIなど使って自作するしかないと思います。

[https://shopify.github.io/buy-button-js/](https://shopify.github.io/buy-button-js/)

---

<div class="post-metadata">

**Author:** ![nyabuson](https://avatars.discourse-cdn.com/v4/letter/n/b77776/32.png) [@nyabuson](https://community.shopify.com/u/nyabuson)\
**Post date:** [May 10, 2021, 3:10am UTC](https://community.shopify.com/t/topic/40542/3 "2021-05-10T03:10:09Z")

</div>

header.phpに空のDIVを用意します。

例えば id=“shopify-toggle-box” とします。

購入ボタンのJSに “toggle”: {} の部分がありますが、それを以下に変えたらできました。

CSSはWP側で適宜つけます。

```javascript
"toggle": {
    "iframe":false,
    "sticky":false,
    "contents":{
      "count": true,
      "icon": true,
      "title": false
    },
    "text":{},
    "events": {
        afterRender: function (component) {
          document.getElementById('shopify-toggle-box').appendChild(component.node);
        },
    }
  },

```

---

<div class="post-metadata">

**Author:** ![junichiokamura](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/junichiokamura/32/299737_2.png) [@junichiokamura](https://community.shopify.com/u/junichiokamura)\
**Post date:** [May 10, 2021, 4:23am UTC](https://community.shopify.com/t/topic/40542/4 "2021-05-10T04:23:00Z")

</div>

ご回答ありがとうございます。

ちなみに、BuyButtonは、どれかの商品か、コレクションに対しての指定になると思うので、ヘッダーに固定で表示できても、内容は特定の商品かコレクションになるかと思うのですが、それはニーズにあっていますか？（商品全般の汎用的なカート機能は提供していなかったと思います）