FROM CACHE - jp_header

{%- style -%}にセクションやブロックの値が反映させる方法がわかりません。

解決済

{%- style -%}にセクションやブロックの値が反映させる方法がわかりません。

Kuroda96
Shopify Partner
14 0 0

Dawnテーマを使っています。セクションの背景の色やボタンの色などをテーマのカスタマイズ画面で設定できるようにしようとしています。

 {%- style -%}タグに{{section.settings.background_color}}や{{block.settings.button_color}}と設定して色を変更できるようにcssを書き込んだのですが、デフォルトの値は反映されますが色を変更しても変わりません。直接色を指定した場合には色が変わるのでcssは機能していると思われます。また、他のliquidで同じようなコードをした場合には色が変更できます。

{%- style -%}タグにセクションやブロックの情報を反映できる方法や条件が知りたいです。ご教示よろしくお願いいたします。

1 件の受理された解決策

株式会社フルバランス
Shopify Partner
1540 550 699

成功

参照方法自体は頂いている内容で方向性は合っております。
弊社「Dawn」テーマにて、デフォルトで用意されている変数を使用して以下コードをtheme.liquidに挿入したところ、正常に反映を確認いたしました。

{% style %}
body {
background-color: {{ settings.colors_accent_1 }}!important;
}
{% endstyle %}

 

恐らくですが、原因としては、以下のいずれかだと推測いたします。
・別のCSSで上書きされている
・section.settings.background_color や block.settings.button_color など 記載をしている変数とstyleの挿入位置が合っていない(変数が参照できない位置にコードを挿入している)

 

前者の場合、まずは!importantなどで強制的に上書きをしてご確認をいただき、
後者の場合、{% style %}のコードを挿入している箇所で、{{ section.settings.background_color }} などと記載をいただき、styleタグの有無に関わらず、正常に値が取得できているか?
をご確認いただくのが良いと思います。

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス

元の投稿で解決策を見る

2件の返信2

株式会社フルバランス
Shopify Partner
1540 550 699

成功

参照方法自体は頂いている内容で方向性は合っております。
弊社「Dawn」テーマにて、デフォルトで用意されている変数を使用して以下コードをtheme.liquidに挿入したところ、正常に反映を確認いたしました。

{% style %}
body {
background-color: {{ settings.colors_accent_1 }}!important;
}
{% endstyle %}

 

恐らくですが、原因としては、以下のいずれかだと推測いたします。
・別のCSSで上書きされている
・section.settings.background_color や block.settings.button_color など 記載をしている変数とstyleの挿入位置が合っていない(変数が参照できない位置にコードを挿入している)

 

前者の場合、まずは!importantなどで強制的に上書きをしてご確認をいただき、
後者の場合、{% style %}のコードを挿入している箇所で、{{ section.settings.background_color }} などと記載をいただき、styleタグの有無に関わらず、正常に値が取得できているか?
をご確認いただくのが良いと思います。

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
Kuroda96
Shopify Partner
14 0 0

ご回答いただきありがとうございます。

リッチテキストやテキスト付き画像のliquidを編集していたのですが、theme.liquidの方は試していなかったので、そちらで試してみようと思います。

また、pタグで{{ section.settings.background_color }} を出力したところ、カラーコードが出力されて色を変えるとカラーコードも変わったので、値は取得できていると思われます。