I am using Shopify CLI to develop my theme. Unfortunately, it stopped showing new CSS changes. I renamed my CSS files, and they are still not working. My theme is almost complete, please let me know if there is a workaround.
Topic summary
A developer using Shopify CLI encountered an issue where CSS changes stopped appearing in their theme, even after renaming files.
Identified Cause:
- The problem stems from cached versions on Shopify’s CDN preventing updated CSS from loading.
Suggested Solutions:
- Add version parameters to CSS file links (e.g.,
styles.css?v=1→styles.css?v=2) and increment with each change - Use
shopify theme dev --theme-editor-syncto bypass cached resources during development - Verify renamed CSS files were properly uploaded via
shopify theme pushand correctly referenced in theme code - Perform a hard browser refresh (Ctrl + Shift + R on Windows / Cmd + Shift + R on Mac)
- Clear local theme cache using
shopify theme dev --reset
Status: The issue remains unresolved, with community members providing multiple troubleshooting approaches to address the CDN caching problem.
It seems like the CSS files updating problem due to cached versions on Shopify’s CDN. Simple possible way for this:
— Clear CDN cache in Shopify: To begin with, you have to put some unique string at the end of your CSS link in the theme and increase the number after that. like, styles.css?v=1 into v=2 increment.
— Purge Cache via CLI: Make use of shopify theme dev --theme-editor-sync to ensure effective changes bypassing cached resources while still in the development stage.
— Check Asset Upload: Confirm that you have used Shopify CLI (shopify theme push) to upload the renamed CSS files and they are referred to in the theme code properly.
By doing this, the updated CSS should be loaded from the CDN.
Maybe due to CDN caching issue, you can try to hard refresh your browser (Ctrl + Shift + R on Windows / Cmd + Shift + R on Mac) to clear cached assets. Or, clear local theme cache by running shopify theme dev --reset in your CLI.