Shopify テーマ、Liquid、ロゴ、その他の類似トピック
現在のテーマのバックアップを取るため、「管理画面から複製」をすると、複製したテーマのCSSが崩れた状態で複製されてしまいます。
ただ複製をしても、そのままコードも複製されるはずですが、何故CSSが崩れた状態(一部反映されない状態)で複製がされてしまうのか原因が不明です。
この謎の現象に対して分かる方が見えましたら、お教えいただけますと幸いです。
お手数お掛けいたしますが、よろしくお願い致します。
解決済! ベストソリューションを見る。
成功
私自身は、複製によるスタイルの崩れに遭遇したことがないため、
見当違いの回答であれば申し訳ございません。
私が時折、遭遇する次の現象と関係があるかもしれません。
下記のようにCSSを記述した場合、
(参考: https://shopify.dev/api/liquid/tags/theme-tags )
{% stylesheet %}
css_styles
{% endstylesheet %}
{% stylesheet %}内の内容をいかに変更しても、
ストアフロント上では、
その変更が反映されないことがあります。
しかし、下記のような記述があった場合に、
<div class="box">
<p>テキストテキスト</p>
</div>
{% stylesheet %}
css_styles
{% endstylesheet %}
下記のように変更を加えて保存すると、{% stylesheet %}内の変更が反映されます。
(<div class="box">の下に改行を追加しただけです。)
<div class="box">
<p>テキストテキスト</p>
</div>
{% stylesheet %}
css_styles
{% endstylesheet %}
少し古い投稿ですが、同様の現象は海外のShopifyコミュニティでも報告されているようです。
この{% stylesheet %}を使用してCSSを記述しますと、
{% stylesheet %}の内容が、特定の外部のCSSファイルに出力されるようです。
もう少し、具体的に申しますと、
<style>タグで、htmlの中に現れるのではなく、
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 %}を使用していないようでしたら、
この回答は、全くの見当違いとなりますので、
スルーしていただければと思います。
ご参考まで。
(キュー田辺)
成功
私自身は、複製によるスタイルの崩れに遭遇したことがないため、
見当違いの回答であれば申し訳ございません。
私が時折、遭遇する次の現象と関係があるかもしれません。
下記のようにCSSを記述した場合、
(参考: https://shopify.dev/api/liquid/tags/theme-tags )
{% stylesheet %}
css_styles
{% endstylesheet %}
{% stylesheet %}内の内容をいかに変更しても、
ストアフロント上では、
その変更が反映されないことがあります。
しかし、下記のような記述があった場合に、
<div class="box">
<p>テキストテキスト</p>
</div>
{% stylesheet %}
css_styles
{% endstylesheet %}
下記のように変更を加えて保存すると、{% stylesheet %}内の変更が反映されます。
(<div class="box">の下に改行を追加しただけです。)
<div class="box">
<p>テキストテキスト</p>
</div>
{% stylesheet %}
css_styles
{% endstylesheet %}
少し古い投稿ですが、同様の現象は海外のShopifyコミュニティでも報告されているようです。
この{% stylesheet %}を使用してCSSを記述しますと、
{% stylesheet %}の内容が、特定の外部のCSSファイルに出力されるようです。
もう少し、具体的に申しますと、
<style>タグで、htmlの中に現れるのではなく、
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 %}を使用していないようでしたら、
この回答は、全くの見当違いとなりますので、
スルーしていただければと思います。
ご参考まで。
(キュー田辺)
株式会社Q (キュー)
田辺様
ご丁寧にお返事いただき、誠にありがとうございます。
もしかしたら{% stylesheet %}内に余計なコードが入ってしまっているのかもしれません。
{% stylesheet %}内にコードの記述が残っているかは分かりませんが、今後は一貫してアセットフォルダ内にcssファイルを作成して作業を進めると、今回のようなエラーが起こらないのではないかと推測しております。
この度は原因のソースとなる記事も添えて、ご回答をいただき感謝いたします。
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024