How to fix Online Store editor session can't be published

Topic summary

A user encountered an error preventing publication when attempting to add custom CSS code to their Shopify store. The error message states “Online Store editor session can’t be published.”

The Problem:

  • The CSS code appears corrupted or reversed (text is backwards/mirrored)
  • Code targets header elements with properties like position: fixed, z-index: 9999, and width: 100%

Proposed Solution:
Another user suggested an alternative implementation method:

  • Navigate to Shopify > Theme > Edit code
  • Locate the theme.liquid file
  • Insert the CSS within {% style %} and {% endstyle %} Liquid tags before the </head> tag
  • This wraps the CSS properly within Shopify’s Liquid templating system

The solution involves using Liquid syntax instead of direct CSS implementation, though the response also appears to contain corrupted/reversed text, suggesting potential encoding or copy-paste issues in the original conversation.

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

When I try to implement this code on custom CSS

And save it this pops up Online Store editor session can’t be published

Filip02_0-1733419330292.png

Code is:

.shopify-section-group-header-group.section-header {
position: fixed !important;
top: 38.8px;
z-index: 9999 !important;
width: 100%;
}
div.shopify-section-group-header-group.announcement-bar-section {
position: fixed !important;
top: 0 !important;
z-index: 9999 !important;
width: 100%;
}

Hi @Filip02

You can follow the instruction here to fix the issue:

  1. Go to Shopify > Theme > Edit code

  2. Find the theme.liquid > then add the code below before tag

{% style %}
      .shopify-section-group-header-group.section-header {
        position: fixed !important;
        top: 38.8px;
        z-index: 9999 !important;
        width: 100%;
      }
      div.shopify-section-group-header-group.announcement-bar-section {
        position: fixed !important;
        top: 0 !important;
        z-index: 9999 !important;
        width: 100%;
      }
    {% endstyle %}