質問: shopifyのDebutのテーマを使用しています。 ページの編集にオリジナルCSSを作成していてそれをリンクさせたいのですが、方法がわかりません。 about.cssをAssetsに作成してtheme.liquidに以下を読み込ませてみたが反映されませんでした。 {{ 'about.css' | asset_url | stylesheet_tag }} またトップページのメニューバーを固定するCSSを反映する方法も教えていただけないでしょうか? よろしくお願いします。 解決済! ベストソリューションを見る。
回答: まずは問題の切り分けのため、色々確認していきましょう。 まず、実際に店舗のトップページを表示していただいて、 about.css が読み込まれているか ソースコード上で確認しましょう。 もしここで読み込まれていなければ、theme.liquidに書いたコードに誤りがあるかもしれません。 さて、実際にabout.css が確かに読み込まれていることを確認できた場合、CSSの記述に誤りがあるか、セレクタの優先順位の関係で 反映されていない、ということになります。 DebutのデフォルトCSSは結構 !important 使われてるのでうまく効いてくれないこともあると思います。 デベロッパーツールで実際に適用されているCSSを確認しましょう。 ちなみにヘッダー固定は ``` .site-header { position: fixed; } ``` で行けるはずです。スマホ用のサーチウィンドウとかはheaderに入ってないっぽいので要注意ですが。