Liquid、JavaScriptなどに関する質問
テーマ「Brooklyn」を使用しています。
スマホでコレクションページ(商品一覧ページ)を閲覧した際に、商品画像下の背景色(グレー)が商品画像の上下に表示されてしまうのを消したいと思っています。
Google Chromeデベロッパーツールで見る限り
.grid-product__image-linkの background-color: #f6f6f6;
を消せば良さそうなのですが、shopifyはまったく理解しておらずご教示を願えましたら幸いです。
どこからどのように進み、どうすればよいか詳細を教えていただけると大変助かります。
何卒、よろしくお願いいたします。
解決済! ベストソリューションを見る。
成功
BrooklynがVintageテーマ(Online Store 2.0対応前のテーマ)であるため、
新たにインストールすることができず、
検証ができていないのですが、
おそらく、Brooklynでも、「カスタムCSS」が使用できるはずですので、
そちらを利用するのが簡単です。
ストア管理画面 > オンラインストア > テーマ > 利用中のテーマの「カスタマイズ」をクリック。
カスタマイズ画面で、「コレクション」を開きます。
下図のように、CSSを書き換えたい要素が所属するセクションを選択し、
「カスタムCSS」に、CSSを入力します。
カスタムCSSにはmedia queryも記入できますので、
スマホでの表示時のみにCSSを適用することもできます。
ご参考まで。
(キュー田辺)
成功
BrooklynがVintageテーマ(Online Store 2.0対応前のテーマ)であるため、
新たにインストールすることができず、
検証ができていないのですが、
おそらく、Brooklynでも、「カスタムCSS」が使用できるはずですので、
そちらを利用するのが簡単です。
ストア管理画面 > オンラインストア > テーマ > 利用中のテーマの「カスタマイズ」をクリック。
カスタマイズ画面で、「コレクション」を開きます。
下図のように、CSSを書き換えたい要素が所属するセクションを選択し、
「カスタムCSS」に、CSSを入力します。
カスタムCSSにはmedia queryも記入できますので、
スマホでの表示時のみにCSSを適用することもできます。
ご参考まで。
(キュー田辺)
オンラインストアを運営する中で、商品の返品や交換は重要なプロセスとなります。Shopify管理画面を通して簡単に返品や交換が行えることをご存知でしょうか?希望する場合は、お客...
By Mirai Sep 15, 2024Shopifyの請求書の支払いが失敗したという通知を受け取って驚いたことはありますか。初めての支払いでエラーが発生したり、これまで何の問題もなく支払いできていたのに突然失敗し...
By Minami_ Sep 8, 20242023年2月、Shopifyはcheckout.liquidを廃止し、Checkout Extensibilityに移行することを発表いたしました。この新しいチェックアウト...
By JasonH Aug 15, 2024