# 商品グリッドの背景を変更したい。

**URL:** <https://community.shopify.com/t/topic/137075>\
**Category:** 技術的なQ＆A\
**Created:** [July 22, 2022, 2:12am UTC](https://community.shopify.com/t/topic/137075 "2022-07-22T02:12:17Z")\
**Posts on this page:** 4\
**Page:** 1

## AI-generated summary

商品グリッドの背景色だけを変えたいが、同時にヘッダー色も変わってしまう問題。対象テーマは Studio。コレクションページ想定。

初回提案：管理画面→オンラインストア→対象テーマ→コードを編集で、main-collection-product-list-grid.liquid（冒頭付近）にCSSを追加。product-grid-container に background-color を指定して商品グリッドの背景を変更。

結果報告：変更後、上下にヘッダーと同色の帯が残存。該当箇所を示すスクリーンショットが添付され、帯部分の背景も変更したい要望。

追加提案：content-for-layout と collection-hero に background-color を指定するよう修正。黒い帯を含めた周辺領域の背景も統一できる可能性に言及。

注意点：個々のカスタマイズ状況によっては想定通りにならない場合があるため、うまくいかない場合は個別連絡によるサイト確認を提案。

現状：解決可否の最終報告は未提出。スレッドは継続中で、追加提案の結果待ち。

<div class="post-metadata">

**Author:** ![sayapple](https://avatars.discourse-cdn.com/v4/letter/s/c68b51/32.png) [@sayapple](https://community.shopify.com/u/sayapple)\
**Post date:** [July 22, 2022, 2:12am UTC](https://community.shopify.com/t/topic/137075/1 "2022-07-22T02:12:17Z")

</div>

商品グリッドの背景を変更すると、同時にヘッダーの色も変更されてしまいます。  
ヘッダーの色はそのままで、商品グリッドのみ背景色を変更したいと考えております。  
使用しているテーマはStudioです。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [July 22, 2022, 12:28pm UTC](https://community.shopify.com/t/topic/137075/2 "2022-07-22T12:28:25Z")

</div>

コレクションのページのお話で合っていますでしょうか？

もし、合っているようでしたら、下記のようにされると良いかと思います。

しかし、商品グリッドのどこからどこまでの背景色を変えられたいかによっては、

ご希望通りにならないかもしれません。

その場合は、

こちらのスレッドでどこまでの背景を変更されたいかご返信いただければ、

即答は難しいかもしれませんが、回答いたします。

管理画面 \> オンラインストア \> 対象のテーマの「アクション」 \> コードを編集

セクションの中の "main-cllection-product-list-grid.liquid"の15行目付近

```css
{%- style -%}  
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

```

こちらを、下記のように変更します。

```css
{%- style -%}
  .product-grid-container {
      background-color: #ff0000; /* お好きな色に変更してください */
  }
  
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

```

ご参考まで。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![sayapple](https://avatars.discourse-cdn.com/v4/letter/s/c68b51/32.png) [@sayapple](https://community.shopify.com/u/sayapple)\
**Post date:** [July 27, 2022, 1:40am UTC](https://community.shopify.com/t/topic/137075/3 "2022-07-27T01:40:48Z")

</div>

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

コードを変更したところ、  
上下にヘッダー背景と同じ色の帯ができてしまいます。

 ![商品グリッド 問い合わせ ２.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/a/6/a63439f19b631285ec8a98871cab77bb79047725.jpeg)

 ![商品グリッド 問い合わせ.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/5/f/5fa060dfeecf87f01b2950aa2155235b0139b14e.jpeg)

この部分の背景色を変えるには  
どうすればよろしいでしょうか。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [July 27, 2022, 2:30am UTC](https://community.shopify.com/t/topic/137075/4 "2022-07-27T02:30:01Z")

</div>

おそらく、黒色の帯のことをおっしゃっていて、

その部分も含めて背景色を変更したいということですね。

おそらく、

前回お伝えした内容を下記のように変更いただくことで実現できると思いますが、

質問者様のカスタマイズ状況によっては、うまくいかないかもしれません。

```markup
.product-grid-container {
      background-color: #ff0000; /* お好きな色に変更してください */
  }

```

↓

```markup
.content-for-layout, .collection-hero {
      background-color: #ff0000; /* お好きな色に変更してください */
  }

```

もし、うまくいかない場合は、

サイトを直接拝見した方が早いので、

私個人にメッセージを頂戴できればと思います。

(キュー田辺)