# DOMのカスタマイズがうまくできません

**URL:** <https://community.shopify.com/t/dom/40932>\
**Category:** 技術的なQ＆A\
**Created:** [March 26, 2021, 2:39am UTC](https://community.shopify.com/t/dom/40932 "2021-03-26T02:39:38Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

ShopifyのBuyButton JSで、コレクション出力後のDOMカスタマイズが反映されず、何も表示されない問題が相談された。参照していたのは公式ドキュメントの「customizing the DOM」で、設定記述の誤りが疑われていた。

結論として、原因はカスタム要素`details`を定義しただけで、表示順を指定する`order`配列に`'details'`を入れていなかった点だった。`templates`、`classes`、`styles`で`details`を定義し、さらに`order`に`'details'`を追加したところ、価格や説明文を含む内容が正しく表示された。

重要な更新点:
- `details`用のテンプレートを追加
- `details`用のclassとstyleを設定
- `order`に`'details'`を追加して実際に描画対象に含めた

コード例が解決の中心で、問題は自己解決済み。未解決の論点は特に残っていない。

<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 26, 2021, 2:39am UTC](https://community.shopify.com/t/dom/40932/1 "2021-03-26T02:39:38Z")

</div>

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

こちらを参考に、BuyButtonで出力したコレクションにカスタマイズをしようとしているのですが、何も出力されません。

記述が間違っているのでしょうか？

どなたか、ご教授、お願いいたしますm(\_ \_)m

 ![Screenshot at Mar 26 11-38-29.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/b/9/6/b961a79cbf568636f2fafe4f78250b904e03f734.png)

---

<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 26, 2021, 3:15am UTC](https://community.shopify.com/t/dom/40932/2 "2021-03-26T03:15:54Z")

</div>

自己解決いたしました。

以下の記述を追加したら、表示されました。

（orderに’details’を加えました。）

```markup
"templates": {
                              "details": '' +
                                '{{data.selectedVariant.price}}' +
                                '
{{data.description}}
' +
                              '
'
                            },
                            "classes": {
                              "details": 'product-details',
                            },
                            "styles": {
                              "details": {
                                'background-color': 'grey'
                              }
                            },
                            "order": [
                              'img',
                              'title',
                              'price',
                              'options',
                              'quantity',
                              'button',
                              'details'
                            ],

```