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

[sayapple]

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

[Qcoltd · Accepted solution]

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

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

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

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

その場合は、

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

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

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

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

{%- 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 -%}

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

{%- 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 -%}

ご参考まで。

(キュー田辺)

[Qcoltd · Accepted solution]

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

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

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

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

その場合は、

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

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

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

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

{%- 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 -%}

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

{%- 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 -%}

ご参考まで。

(キュー田辺)

[sayapple]

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

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

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

[Qcoltd · Accepted solution]

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

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

おそらく、

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

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

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

↓

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

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

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

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

(キュー田辺)