Why can't I save custom CSS pseudo selector in theme settings?

Store Design

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.liquid or 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.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
9

I have exactly the same problem (it works in the editor but doesn’t allow me to save) and would love for Shopify to fix this known issue very soon…

3 Likes