# コレクションページ　商品ページに関して **URL:** \ **Category:** 技術的なQ＆A\ **Tags:** css\ **Created:** [November 16, 2022, 4:58am UTC](https://community.shopify.com/t/topic/168209 "2022-11-16T04:58:06Z")\ **Posts on this page:** 3\ **Page:** 1 ## AI-generated summary Flowテーマを使用したShopifyストアのカスタマイズに関する質問と回答。 **主な質問内容:** - コレクションページと商品ページで、商品画像を横幅いっぱい（白枠まで含めて全幅）に表示したい - コレクションページで商品画像内（下部）に商品クレジットを表示したい - 商品クレジットを左寄せにしたい（デフォルトは中央揃え） **提案された解決策:** - 商品クレジット表示には「販売元」フィールドを活用し、Collection gridのカスタマイズ画面でProduct vendorブロックを追加 - 左寄せにするには以下のCSSを適用: ``` .product-grid--vendor-text { margin-bottom: 5px; text-align: left; } ``` **追加の懸念点:** 質問者は画像内にクレジットを表示しつつ、通常のクレジット（画像外）も左寄せにする方法について確認中。画像を完全な全幅表示にする具体的な実装方法については継続的な議論が必要な状態。
**Author:** ![ad2678](https://avatars.discourse-cdn.com/v4/letter/a/ecb155/32.png) [@ad2678](https://community.shopify.com/u/ad2678)\ **Post date:** [November 16, 2022, 4:58am UTC](https://community.shopify.com/t/topic/168209/1 "2022-11-16T04:58:06Z")
Flowのテーマを使用しております。 下記のカスタマイズを行いたいのですが、方法をご存じの方いらっしゃいますでしょうか。 ■コレクションページで、商品画像を横幅いっぱいに表示する ■コレクションページで、商品画像内（下部）に商品クレジットを表示する ■コレクションページで、商品クレジットを左寄せにする（通常中央揃え） ■商品ページで、商品画像を横幅いっぱいに表示する 恐れ入りますが、ご確認よろしくお願いいたします。 ---
**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:** [November 29, 2022, 9:23am UTC](https://community.shopify.com/t/topic/168209/2 "2022-11-29T09:23:15Z")
Ad2678さま はじめまして、フルバランスの渡邉です。 ご質問を確認いたしました。 テーマによってカスタマイズ方法が違うのでややこしいですよね。 ■コレクションページで、商品画像を横幅いっぱいに表示する ■商品ページで、商品画像を横幅いっぱいに表示する 横幅いっぱいというのは、以下画像のグレーの範囲いっぱいにということでしょうか？ 弊社環境でFlowテーマを試したところ、どのサイズの画像も横幅いっぱいに表示されていました。 ![スクリーンショット 2022-11-29 18.19.42.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/a/0/a033359ea15304ebf4dedcc6ddd7873f9792b991.png) ■コレクションページで、商品画像内（下部）に商品クレジットを表示する 商品ごとに異なるテキストを表示されたいという認識でよろしいでしょうか？ 一番シンプルな方法ですと販売元の入力欄を使用する形で表示できるかと思います。 1. 商品管理 → 商品を選択 → 販売元に任意のテキストを入力 2. コレクションのカスタマイズ画面のCollection gridでProduct vendorというブロックを追加し、画像の下にドラッグ&ドロップ ![スクリーンショット 2022-11-29 18.02.13.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/a/5/a5e666e98eeb1d4493d822cfd182fb4c6c437c27.png) ■コレクションページで、商品クレジットを左寄せにする（通常中央揃え） (もしProduct vendorを使ってクレジット表記された場合) デフォルトで中央寄せなので、以下CSSを当てれば左寄せに調整できます。 .product-grid–vendor-text { margin-bottom: 5px; text-align: left; } ご参考になりましたでしょうか。 私たちの励みにもなりますので、 お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。 分からない点があれば、またいつでもご連絡ください。 フルバランス 渡邉 ---
**Author:** ![ad2678](https://avatars.discourse-cdn.com/v4/letter/a/ecb155/32.png) [@ad2678](https://community.shopify.com/u/ad2678)\ **Post date:** [November 29, 2022, 11:44am UTC](https://community.shopify.com/t/topic/168209/3 "2022-11-29T11:44:47Z")
フルバランス 渡邉様 ご丁寧にご返信いただきありがとうございます。 下記ご相談内容になります。 ご確認よろしくお願いいたします。 ■コレクションページで、商品画像を横幅いっぱいに表示する ■商品ページで、商品画像を横幅いっぱいに表示する こちらですが、添付頂いた画像で、グレーの範囲の左右にある白枠まで画像をいっぱいに表示したいです。スマホで見た際、下記のように両サイドすべて画像になるイメージです。 ![IMG_2727.PNG](https://canada1.discourse-cdn.com/shopifyforum/original/2X/c/cc7d3f2a96aafc09ca1c160775df2be5445bd30f.png) ■コレクションページで、商品画像内（下部）に商品クレジットを表示する クレジットは通常でも表示されているので、画像内に表示させたかったのですが、 こちらは可能でしょうか？下記のイメージです。 ![ad2678_0-1669722091530.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/6/4/0/6401826b9b4f758cae3eed367a535babbcfc2a50.png) ■コレクションページで、商品クレジットを左寄せにする（通常中央揃え） 上記の画像内の表記が難しい場合、通常のクレジットを左に寄せる場合はどのようにすればよろしいでしょうか？ CSSの追加場所もご教授いただけますと幸いです。 お忙しい中大変恐れ入りますが、ご確認よろしくお願いいたします。