Shopify / Shopify/liquid

Theme settings not hot-reloading in {% style %} in Theme Editor

Open
#1,985 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Ruby
Stars
11.9k
Forks
1.5k
Avg merge
17h 55m
Merged PRs (30d)
3

Description

⚠️ This bug was reproduced in Dawn and can occur in any theme. ⚠️

Problem

IF a global theme setting is mapped to a CSS property in {% style %} AND that same setting is used within a CSS file imported via asset_url THEN the CSS property in {% style %} will not update in the Theme Editor until changes are saved.

The problem occurs the same if the {% style %} is within a rendered snippet or section.

Color settings do not have the same problem.

Workaround

Using <style> instead of {% style %} solves the problem.

Demo

Video showing the problem: https://files.pxu.co/DOuYdJg6

theme.liquid

<!doctype html>
<html>
  <head>
    {{ content_for_header }}
    {{ 'test.css' | asset_url | stylesheet_tag }}
  </head>

  <body>
    <p id="test">Testing</p>
    
    {% style %}
        #test {
          font-size: 2px;
          font-size: {{ settings.body_scale | append: 'px' }};
        }
    {% endstyle %}

    {{ content_for_layout }}
  </body>
</html>

test.css.liquid

#other {
    margin: {{ settings.body_scale | append: 'px' }};
}

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the issue with the provided theme.liquid and test.css.liquid examples in the Theme Editor, including the rendered snippet or section case. Trace why the {% style %} output does not refresh when the same setting is used through asset_url. Done means the CSS property updates before saving, while preserving the stated color-setting behavior.

Written by the indexing model from the issue text.

Assessment

Domain
backend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.