# コレクション→商品一覧の商品名改行位置について

**URL:** <https://community.shopify.com/t/topic/364881>\
**Category:** 技術的なQ＆A\
**Created:** [October 9, 2024, 9:08am UTC](https://community.shopify.com/t/topic/364881 "2024-10-09T09:08:23Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

・Shopifyテーマ「Draw」のコレクション商品一覧で、商品名を「-（ハイフン）」の直前で改行したいという要望。

・編集対象がmain-collection-product-gridに見当たらず不明との相談に対し、商品名はrender 'card-product'で読み込まれるスニペットcard-product.liquid内の{{ card_product.title | escape }}で出力されると案内。

・対応案として、titleにreplaceフィルターを適用し、置換で改行を挿入（例: | replace: ' ', '\n'）すれば制御可能との提案。

・依頼者はcard-product.liquid内で同コードを4箇所確認し、全てを| replace: ' ', '<br>'に変更したが、見た目に変化がなく再度助言を要請。

・現在、編集箇所や方法が適切か、置換対象（スペースではなくハイフンにすべきか）などが不明で、表示に反映されない原因も特定できていない。

・決定事項や解決は未了。添付画像は参考用で、コード側の出力箇所と置換条件の特定が今後の論点。

<div class="post-metadata">

**Author:** ![556](https://avatars.discourse-cdn.com/v4/letter/5/c89c15/32.png) [@556](https://community.shopify.com/u/556)\
**Post date:** [October 9, 2024, 9:08am UTC](https://community.shopify.com/t/topic/364881/1 "2024-10-09T09:08:23Z")

</div>

現在テーマdrawを利用してますが、コレクションで商品名の改行位置を変更したいと考えております。  
添付画像の左が現状で、右がイメージ図になります。

イメージとしては「-」 の前で改行したいのですが、過去記事の[https://community.shopify.com/post/713284](https://community.shopify.com/post/713284)

を参照して確認するとmain-collection-product-gridの中にproduct.title がなくてどう修正すれば良いか悩んでおります。

大変申し訳ないですが、どなたかご教授いただけないでしょうか？

お手数おかけしますが、ご確認よろしくお願いします。

 ![スクリーンショット 2024-10-09 18.05.54.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/4/3/436d749eb91cf0f2705480b6a32ee9b18e3ff160.jpeg)

---

<div class="post-metadata">

**Author:** ![Anonymous\_5168086324d6fa4637c896de39bb248c](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_5168086324d6fa4637c896de39bb248c/32/28647_2.png) [@Anonymous\_5168086324d6fa4637c896de39bb248c](https://community.shopify.com/u/Anonymous_5168086324d6fa4637c896de39bb248c)\
**Post date:** [October 9, 2024, 10:31pm UTC](https://community.shopify.com/t/topic/364881/2 "2024-10-09T22:31:57Z")

</div>

main-collection-product-gridでは、

```markup
render 'card-product',

```

という形で、「スニペット」フォルダ内にあるcard-product.liquidを読み込んで商品名などを表示させています。

card-product.liquidの中にある

```markup
{{ card_product.title | escape }}

```

が商品名を表示するコードです（2箇所あります）。これを

```markup
{{ card_product.title | escape | replace: ' ' ,'
' }}

```

とすることで、改行位置を変更できるかと思います。

---

<div class="post-metadata">

**Author:** ![556](https://avatars.discourse-cdn.com/v4/letter/5/c89c15/32.png) [@556](https://community.shopify.com/u/556)\
**Post date:** [October 10, 2024, 8:08am UTC](https://community.shopify.com/t/topic/364881/3 "2024-10-10T08:08:34Z")

</div>

ご確認ありがとうございます。

大変申し訳ないのですが、再度ご相談させてください。

card-product.liquidの中にある

```auto
{{ card_product.title | escape }}

```

こちらは２ヶ所ではなく４ヶ所ございました。

全て下記の内容で書き替えを行いましたが、

```auto
{{ card_product.title | escape | replace: ' ' ,'<br>' }}

```

特に変化はありませんでした。

編集の仕方と箇所が間違っていますでしょうか？

もしコードが必要であったりご質問等がございましたら遠慮なくご指示いただけますと幸いです。

お手数おかけしますが、どうかご確認よろしくお願いいたします。