# コレクション一覧に各商品の説明文を出力させたい

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

## AI-generated summary

ShopifyのBuy ButtonをWordPress記事に埋め込んだコレクション一覧で、画像・商品名・価格に加えて商品説明文も表示したいという技術相談。中心論点は、Buy Buttonの埋め込みコード内で説明文表示を有効化できるかどうかだった。

回答では、Buy ButtonのJavaScript設定内にある `product` → `contents` を確認し、`"description": true` を追加すれば表示できると案内された。あわせて、設定構造は生成内容によって多少異なるため、`product` の `contents` を探すこと、詳細はBuy Button JSの公式カスタマイズ資料を参照することも示された。

結果として、質問者はこの修正で商品説明文の表示に成功したと報告しており、問題は解決済み。添付画像は、説明文を表示したい対象の一覧UIを示す補足として使われている。

<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, 12:38am UTC](https://community.shopify.com/t/topic/40502/1 "2021-03-23T00:38:21Z")

</div>

現在、shopifyにてコレクションのBuyButtonを作成して、wordpressの記事に貼り付けているのですが、  
画像、商品名、商品価格に加えて、各商品の説明文も一覧に出力させたいと思っています。  
いろいろ検索してみたのですが、解決方法を見つけることができなかったため、  
ご存知の方がいらっしゃいましたら、ご教授いただけると幸いです。

 ![Screenshot at Mar 23 09-26-57.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/3/a/3a7e1fca0c11f1b222e5a5378bf9b400d4252c1a.png)

---

<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:** [March 23, 2021, 8:51am UTC](https://community.shopify.com/t/topic/40502/2 "2021-03-23T08:51:12Z")

</div>

Buybuttonのコードに以下のような部分があると思います。

```javascript
"product": {
    "styles": {
      "product": {
        //省略
        },
        "img": {
          //省略
        },
        "imgWrapper": {
          //省略
        }
      }
    },
    "buttonDestination": "modal",
    "contents": {
      "options": false
    },
    "text": {
      "button": "View product"
    }
  },

```

上記の contentsの部分に “description”:true を加えます。

```javascript
"product": {
    "styles": {
      "product": {
        //省略
        },
        "img": {
          //省略
        },
        "imgWrapper": {
          //省略
        }
      }
    },
    "buttonDestination": "modal",
    "contents": {
      "options": false,
      "description": true
    },
    "text": {
      "button": "View product"
    }
  },

```

恐らくこれで表示されるかと思います。

Buybuttonの設定次第で内容がかわりますので、記載したコードと違っても、とりあえずproductのcontentsを探すしていただければ場所は特定できるかと思います。

なお、Buybuttonのカスタマイズの詳細は以下を参照ください。

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

---

<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, 9:07am UTC](https://community.shopify.com/t/topic/40502/3 "2021-03-23T09:07:02Z")

</div>

jizo様

この度は、回答いただき、ありがとうございます。

おかげさまで、説明文を表示させることができました。

本当にありがとうございました！