テーマをコピーするとcssが反映されない現象

日本語 ディスカッション Shopify テーマ

Topic summary

問題の概要:
Shopifyの管理画面からテーマを複製すると、CSSが崩れた状態（一部が反映されない状態）で複製される現象が発生。原因が不明で解決方法を求めている。

提案された解決策:
{% stylesheet %}タグを使用している場合、タグ内のCSS変更が反映されないキャッシュ関連の問題が存在する可能性がある。

対処方法:

  • {% stylesheet %}タグの外側（{% javascript %}タグなど関連しないLiquidコード部分）に改行を1つ追加するなど、何らかの変更を加えて保存する
  • これにより外部CSSファイルが再コンパイルされ、変更が反映される場合がある
  • 海外のShopifyコミュニティでも同様の現象が報告されている

今後の対応:
質問者は、{% stylesheet %}内に余計なコードが入っている可能性を考慮し、今後はassetsフォルダ内に直接CSSファイルを作成する方法で作業を進める予定。

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

現在のテーマのバックアップを取るため、「管理画面から複製」をすると、複製したテーマのCSSが崩れた状態で複製されてしまいます。

ただ複製をしても、そのままコードも複製されるはずですが、何故CSSが崩れた状態（一部反映されない状態）で複製がされてしまうのか原因が不明です。

この謎の現象に対して分かる方が見えましたら、お教えいただけますと幸いです。

お手数お掛けいたしますが、よろしくお願い致します。

2

私自身は、複製によるスタイルの崩れに遭遇したことがないため、

見当違いの回答であれば申し訳ございません。

私が時折、遭遇する次の現象と関係があるかもしれません。

下記のようにCSSを記述した場合、

(参考: https://shopify.dev/api/liquid/tags/theme-tags )

{% stylesheet %}
  css_styles
{% endstylesheet %}

{% stylesheet %}内の内容をいかに変更しても、

ストアフロント上では、

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

しかし、下記のような記述があった場合に、


  

テキストテキスト

{% stylesheet %}
  css_styles
{% endstylesheet %}

下記のように変更を加えて保存すると、{% stylesheet %}内の変更が反映されます。

(

の下に改行を追加しただけです。)


  

テキストテキスト

{% stylesheet %}
  css_styles
{% endstylesheet %}

少し古い投稿ですが、同様の現象は海外のShopifyコミュニティでも報告されているようです。

https://community.shopify.com/topic/686641

この{% stylesheet %}を使用してCSSを記述しますと、

{% stylesheet %}の内容が、特定の外部のCSSファイルに出力されるようです。

もう少し、具体的に申しますと、

タグで、htmlの中に現れるのではなく、 [https://cdn.shopify.com/s/files/x/xxxx/xxxx/xxxx/x/x/compiled_assets/styles.css](https://cdn.shopify.com/s/files/x/xxxx/xxxx/xxxx/x/x/compiled_assets/styles.css) のようなURLのCSSファイルに出力されます。 (URLを考慮すると、出力されるというよりコンパイルされる、といった方が正確かもしれません。) {% stylesheet %}内を変更しただけでは、 コンパイルが行われず、この外部CSSファイルが更新されないことがある、 のだと個人的に考えています。 もしかしたら、 これと似たようなことが「複製」でも発生するのかもしれません。 上記、海外コミュニティの投稿にあるように、 これが原因である場合、 関連するliquidの{% stylesheet %}や{% javascript %}以外の箇所に、 何かしら変更を加えれば(例えば、改行を1つ追加するなど)、 スタイルの崩れが解決するかもしれません。 もし、 {% stylesheet %}を使用していないようでしたら、 この回答は、全くの見当違いとなりますので、 スルーしていただければと思います。 ご参考まで。 (キュー田辺)
1 Like
3

株式会社Q (キュー)

田辺様

ご丁寧にお返事いただき、誠にありがとうございます。

もしかしたら{% stylesheet %}内に余計なコードが入ってしまっているのかもしれません。

{% stylesheet %}内にコードの記述が残っているかは分かりませんが、今後は一貫してアセットフォルダ内にcssファイルを作成して作業を進めると、今回のようなエラーが起こらないのではないかと推測しております。

この度は原因のソースとなる記事も添えて、ご回答をいただき感謝いたします。

1 Like