Cssが反映されない

AI-generated summary

商品画像に適用していたCSSを一部削除後、管理画面のプレビューでは新CSSが適用される一方、本番環境では画像が表示されずCSSが反映されない不一致が発生。シークレットモードでのアクセス、スーパーリロード(Win: Ctrl+Shift+R/Mac: Cmd+Shift+R)、ブラウザキャッシュ削除を実施済み。

最新状況: 外部からの確認では、対象商品ページで問題はすでに解消済みとの報告あり。原因は未確定。

共有された知見:

  • Shopifyテーマのsections内Liquid(例: sections/main-product.liquid)で、{% stylesheet %}ブロック内のCSSだけを編集・保存しても反映されないケースがある。
  • 同ファイルの{% stylesheet %}以外の箇所に軽微な変更(改行追加など)を加えて保存すると、CSS変更も反映された事例あり。
  • {% stylesheet %}はセクションアセット(セクション単位のCSS)として扱われる仕組み。

結論/アクション: 現時点で解消された模様だが、再発時はセクションファイルで{% stylesheet %}外にも微変更を加えて保存し、ビルド/キャッシュの再生成を促す対応が推奨。議論はほぼ収束、根本原因は推測段階。

①商品画像に適用されていたCSSを一部削除
②管理画面のプレビューでは新CSSが適用されている
③本番環境で確認すると画像が表示されない(新CSS適用されず)
https://eenieofficial.jp/
TOP>任意の商品ページ

◎対応したこと

ver1 シークレットモードを開いてタブを新しく開いてhttps://eenieofficial.jp/にアクセス

ver2 通常モードでタブを新規で開いてhttps://eenieofficial.jp/にアクセスし、win:Ctrl + Shift + R / max:Cmd + Shift + R のスーパーリロードを試す

ver3 ブラウザのキャッシュを削除

原因分かりますでしょうか?
よろしくお願いいたします。

サイトを拝見すると、すでに解決されているようですね。https://eenieofficial.jp/products/%E3%83%AD%E3%83%B3%E3%82%B0%E3%82%B9%E3%83%AA%E3%83%BC%E3%83%96%E3%83%AB%E3%83%BC%E3%82%BA%E3%83%8B%E3%83%83%E3%83%88%E3%83%88%E3%83%83%E3%83%97%E3%82%B9-1

原因も特定済みかもしれませんが、

私も同様の現象に出会ったことがあるので、

ご共有まで。

以前、

sectionsのliquid(sections/main-product.liquidなど)で使用できる {% stylesheet %} 内のCSSだけ編集して保存した際に、

その変更が反映されないことがありました。

https://shopify.dev/themes/architecture/sections/section-assets#stylesheet

当該liquid内の、

{% stylesheet %}以外の別の箇所に改行を入れるなどの変更を施し保存すると、

CSSの変更も反映された覚えがあります。

記憶が曖昧な部分があり不確かな情報ですが、

ご共有まで。

(キュー田辺)