FROM CACHE - jp_header
解決済

テーマ「Brooklyn」の商品画像の背景色を白にする方法

kurosuke
訪問者
2 0 0

テーマ「Brooklyn」を使用しています。

スマホでコレクションページ(商品一覧ページ)を閲覧した際に、商品画像下の背景色(グレー)が商品画像の上下に表示されてしまうのを消したいと思っています。

 

Google Chromeデベロッパーツールで見る限り

.grid-product__image-linkの background-color: #f6f6f6;
を消せば良さそうなのですが、shopifyはまったく理解しておらずご教示を願えましたら幸いです。

どこからどのように進み、どうすればよいか詳細を教えていただけると大変助かります。

 

何卒、よろしくお願いいたします。

  • CSS
1 件の受理された解決策

Qcoltd
Shopify Partner
1015 412 388

成功

@kurosuke 様

 

BrooklynがVintageテーマ(Online Store 2.0対応前のテーマ)であるため、

新たにインストールすることができず、

検証ができていないのですが、

おそらく、Brooklynでも、「カスタムCSS」が使用できるはずですので、

そちらを利用するのが簡単です。

 

ストア管理画面 > オンラインストア > テーマ > 利用中のテーマの「カスタマイズ」をクリック。

カスタマイズ画面で、「コレクション」を開きます。

下図のように、CSSを書き換えたい要素が所属するセクションを選択し、

「カスタムCSS」に、CSSを入力します。

 

screenshot_20231127_01.png

 

 

カスタムCSSにはmedia queryも記入できますので、

スマホでの表示時のみにCSSを適用することもできます。

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1015 412 388

成功

@kurosuke 様

 

BrooklynがVintageテーマ(Online Store 2.0対応前のテーマ)であるため、

新たにインストールすることができず、

検証ができていないのですが、

おそらく、Brooklynでも、「カスタムCSS」が使用できるはずですので、

そちらを利用するのが簡単です。

 

ストア管理画面 > オンラインストア > テーマ > 利用中のテーマの「カスタマイズ」をクリック。

カスタマイズ画面で、「コレクション」を開きます。

下図のように、CSSを書き換えたい要素が所属するセクションを選択し、

「カスタムCSS」に、CSSを入力します。

 

screenshot_20231127_01.png

 

 

カスタムCSSにはmedia queryも記入できますので、

スマホでの表示時のみにCSSを適用することもできます。

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
kurosuke
訪問者
2 0 0

ありがとうございます!できました!