Liquid、JavaScriptなどに関する質問
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に入ってないっぽいので要注意ですが。
成功
試しに
新しいassetを追加する → 空のファイルを作成する → test.css を作ってみました。
{{ 'test.css' | asset_url | stylesheet_tag }}
を theme.liquid に追加したら問題なく読込ができました。
おっしゃられている位置では 読込どうこうの前に、theme.scss.css に優先順位で負けてしまって
ほとんどのcssは適用されません。
あと通常は metaタグの下に追加するのが一般的です。
読込が遅くてもいいスタイルは 逆にフッター付近で呼ぶこともあります。
成功
英語ですが、以下の動画も参考になると思います。
https://www.youtube.com/watch?v=Tt-Wy-ZDwas
theme.scss.liquidの下部にコメントでカスタムcss用のimport を記載するエリアが書かれています。
成功
まずは問題の切り分けのため、色々確認していきましょう。
まず、実際に店舗のトップページを表示していただいて、
about.css が読み込まれているか ソースコード上で確認しましょう。
もしここで読み込まれていなければ、theme.liquidに書いたコードに誤りがあるかもしれません。
さて、実際にabout.css が確かに読み込まれていることを確認できた場合、CSSの記述に誤りがあるか、セレクタの優先順位の関係で
反映されていない、ということになります。
DebutのデフォルトCSSは結構 !important 使われてるのでうまく効いてくれないこともあると思います。
デベロッパーツールで実際に適用されているCSSを確認しましょう。
ちなみにヘッダー固定は
.site-header { position: fixed; }
で行けるはずです。スマホ用のサーチウィンドウとかはheaderに入ってないっぽいので要注意ですが。
@WEBUILD さん お答えありがとうございます。
実際に店舗のトップページをディベロッパーツールで検索したところabout.css は読み込まれていませんでした。theme.liquidの<head>のメタのあとの<link rel="canonical" href="{{ canonical_url }}">の下に{{ 'about.css' | asset_url | stylesheet_tag }}を記述しています。記述位置はhead内のメタの直後がよいのでしょうか?
アドバイスをもとにもう少し検証してみますが、タグのおすすめ記述位置がわかると助かります。
よろしくお願いいたします。
成功
試しに
新しいassetを追加する → 空のファイルを作成する → test.css を作ってみました。
{{ 'test.css' | asset_url | stylesheet_tag }}
を theme.liquid に追加したら問題なく読込ができました。
おっしゃられている位置では 読込どうこうの前に、theme.scss.css に優先順位で負けてしまって
ほとんどのcssは適用されません。
あと通常は metaタグの下に追加するのが一般的です。
読込が遅くてもいいスタイルは 逆にフッター付近で呼ぶこともあります。
成功
WEBUILDさん
週末に試したところ解決いたしました。
ありがとうございました。
今回は読みこませる位置をメタタグのすぐ下にしたことで解決しましたが、他の情報も今後に役立させていただきます!
成功
英語ですが、以下の動画も参考になると思います。
https://www.youtube.com/watch?v=Tt-Wy-ZDwas
theme.scss.liquidの下部にコメントでカスタムcss用のimport を記載するエリアが書かれています。
junichiokamuraさん
ありがとうございます。
こちらの方法でも試してみます。
Shopifyのチェックアウトは世界一コンバージョン率が高いチェックアウトです。2023年4月に実施された世界3大手マネジメントコンサルティング会社の共同調査によると、Sho...
By Minami_ Apr 11, 2024Shopifyのルーツ Shopifyは、スノーボードをオンラインで販売したいという夢を叶えるために2004年に誕生しました。当時は大企業だけがインターネットで販売す...
By JapanGuru Apr 7, 2024リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024