the best practice here would be to put your css code in the theme.css.liquid (or the file that holds all the styling css / liquid code for your theme. That should fix your problem in the short term. Going forward you will need to copy / paste your custom css code back into your theme.css.liquid if you perform theme updates
Topic summary
Users cannot save CSS pseudo-element selectors (specifically ::before and ::after with the content property) in Shopify’s theme customizer Custom CSS area. When attempting to save code like .product-stock-level-wrapper::before { content: ""; }, the editor throws an error: “Online Store editor session can’t be published.” Removing the content property allows saving, but defeats the purpose.
Root Cause:
The issue appears related to how quotation marks in the content property conflict with JSON formatting in template files. Escaping characters doesn’t resolve it, and Shopify support has acknowledged this as a known limitation but hasn’t provided a timeline for fixes.
Current Workarounds:
- Add CSS directly to
theme.css.liquidor theme asset files (requires re-adding after theme updates) - Create a Custom Liquid block in Footer (site-wide) or specific sections (page-specific) and wrap CSS in
<style>tags or{% style %}Liquid tags - Use custom CSS classes on sections to target specific elements
Status:
Unresolved since at least 2023, with users reporting the issue persists into 2025. Shopify has not committed to fixing this valid CSS limitation.