# Buy buttonでの注文メモ欄に、デフォルトで文章を入れる方法はありますか

**URL:** <https://community.shopify.com/t/buy-button/133459>\
**Category:** 技術的なQ＆A\
**Created:** [July 7, 2022, 4:30am UTC](https://community.shopify.com/t/buy-button/133459 "2022-07-07T04:30:20Z")\
**Posts on this page:** 5\
**Page:** 1

## AI-generated summary

主題: Shopify Buy Buttonの注文メモ（備考欄）に、購入前からデフォルトの案内文を表示できるか。placeholder（入力欄に表示される薄いガイド文）で対応したい要望。

経緯: 本体のカートテンプレートではplaceholder追加で実現できたが、Buy Button経由の購入フローでは反映されず。iframe内で描画される仕様が障壁となっていた。

解決策: Buy Button JSのevents.afterRenderを使い、cart描画後にiframe内ドキュメントを取得し、備考用textarea（.shopify-buy__cart__note__text-area）へplaceholder属性を付与。公式ドキュメント（Customizationのevents）を参照して実装可能。

代替案: iframeを使わない埋め込み（Custom styling without iframes）に切り替え、設置サイト側のJS/CSSで制御する方法もある。また、Buy Button作成時の「追加情報」欄で必要事項を促す簡便な運用も提案。

結果: 提案と資料を基に実装に成功。Buy Buttonでもデフォルト文言の表示が実現し、要件は解消。アプリ連携は難しそうとの所感はあるが、スレッドは実質解決済み。

<div class="post-metadata">

**Author:** ![N0613](https://avatars.discourse-cdn.com/v4/letter/n/db5fbb/32.png) [@N0613](https://community.shopify.com/u/N0613)\
**Post date:** [July 7, 2022, 4:30am UTC](https://community.shopify.com/t/buy-button/133459/1 "2022-07-07T04:30:20Z")

</div>

![natsumi156_0-1657168127052.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/b/9/9/b99bbc4eb1a2d71c098677c37b8315e10e029910.png)

Buybuttonの機能で注文メモ「備考欄」を記載できるコードを発行しています。

購入者に入力して欲しい内容などをデフォルトで枠内に記載しておきたいと思うのですが、そういったことは可能なのでしょうか？また、もし可能であれば方法をご教示いただけますと幸いです。

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [July 8, 2022, 12:40am UTC](https://community.shopify.com/t/buy-button/133459/2 "2022-07-08T00:40:36Z")

</div>

Natsumi156 様

はじめまして。

株式会社フルバランスのドウケと申します。

一案ではございますが、該当コードのinputまたはtextareaにplaceholderを設けることで、解決するのではないでしょうか。

以下、例になります。

```auto
<textarea placeholder="特別な連絡事項がありましたら、こちらに入力して下さい。"></textarea>

```

ご参考になれば幸いです。

また、お困りごとなどありましたら、お気軽にご質問くださいね。

---

<div class="post-metadata">

**Author:** ![N0613](https://avatars.discourse-cdn.com/v4/letter/n/db5fbb/32.png) [@N0613](https://community.shopify.com/u/N0613)\
**Post date:** [July 8, 2022, 12:57am UTC](https://community.shopify.com/t/buy-button/133459/3 "2022-07-08T00:57:44Z")

</div>

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

ご教示いただいた内容をカート画面のテンプレートに追記したことで、shopify本体のカート画面にはデフォルトの文章を挿入できたのですが、Buybuttonでの購入時にはデフォルトテキストが反映されないようでした。

可能であればBuybuttonでの購入時にデフォルトテキストの表示がしたいのですが、何か方法などあるでしょうか。

---

<div class="post-metadata">

**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\
**Post date:** [July 9, 2022, 6:57am UTC](https://community.shopify.com/t/buy-button/133459/4 "2022-07-09T06:57:24Z")

</div>

一応ですが以下のような感じでcartにeventsを設定する方法でplaceholderを追加可能でした。

```javascript
// 以上省略 
 "cart": {
    "events": {
      'afterRender': function(component){
        const iframe = component.node.childNodes[0]
        const iframeDocument = iframe.contentWindow.document;
        const textarea = iframeDocument.querySelector('.shopify-buy __cart__ note__text-area');
        textarea.setAttribute('placeholder','追加したい内容');
      }
    },
// 以下省略

```

参考:「events」の項目

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

他にはiframeのでの出力をやめて購入ボタン設置側のサイトにJSを書いて処理を行うことも考えられますが(実際に試してはいません)、この場合CSSを独自につくる必要があると思います。

参考: 「Custom styling without iframes」の項目

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

蛇足ですが、以下の「追加情報」欄に必要な事柄入力するのが簡単で利便性が高いかなとも思います。

[https://help.shopify.com/ja/manual/online-sales-channels/buy-button/create-buy-button#part-f050224005275e5f](https://help.shopify.com/ja/manual/online-sales-channels/buy-button/create-buy-button#part-f050224005275e5f)

より見やすくすのであれば、placeholderと同様にJSで付近に同種の文言を追加するなども考えられます。

以上ですが、JavaScriptの読み書きが難しい場合はパートナーやエキスパートに依頼されることをお勧めします。

またはこのまま他の方の回答をお待ちください。

---

<div class="post-metadata">

**Author:** ![N0613](https://avatars.discourse-cdn.com/v4/letter/n/db5fbb/32.png) [@N0613](https://community.shopify.com/u/N0613)\
**Post date:** [July 11, 2022, 1:55am UTC](https://community.shopify.com/t/buy-button/133459/5 "2022-07-11T01:55:29Z")

</div>

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

ご提案いただいた内容や参考ページをもとに、実装することができました。

これまではBuybuttonに制限が多いかと思っていたのですが、こういった内容であればさまざまカスタマイズができそうだと感じました。

アプリとの連携ができるとなお良いと感じるのですがきっと難しいのでしょうね。

この度はご回答ありがとうございました。