Unpredictable behavior from Custom CSS feature. Online Store editor session can't be published.

BFWebTeam
Tourist
10 0 14

I was very excited for the potential of adding scoped, custom CSS to individual sections and so I wrote some markup and styles for a grid of icon boxes. My code is well under 500 characters, and does not violate any of the disallowed features that Shopify lists. Despite the care I took in writing this code however, I get the dreadfully vague error "Online Store editor session can't be published".

 

After some experimentation, I have come to the conclusion that the new CSS nesting features, as well as the "filter" property, were the culprits preventing my code from being saved. In my research, I also found that several other users here were having similar issues. To provide some examples, Zartifact7 can't save a section with a single innocuous content rule, Kaijann can't position their text, and Marvic cannot add a scale transform. I have seen a lot of discussion about Shopify forbidding certain CSS properties, but that doesn't make a ton of sense to me. None of the properties that caused issues for these users are mentioned in the Shopify article linked in the previous paragraph, and these properties are totally okay within theme css, style tags, and even inline styles.

 

Where can I find concrete information about all of the limitations of the custom CSS editor? Is Shopify explicitly forbidding certain CSS properties, or are they still working out bugs with the feature?

Replies 3 (3)

Made4uo-Ribe
Shopify Partner
6383 1533 1903

Hi @BFWebTeam 

 

Since the Custom CSS code is modified to later add with the section ID to make it unique, you cannot add multiple selectors.  One thing I always remember is to use only one or two class that is unique to that section for it to work. 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
BFWebTeam
Tourist
10 0 14

I'm not sure what exactly you mean by "multiple selectors," but selectors have not been an issue with my style rules. To clarify, my code works fine; I'm looking for information about strange behavior of the Custom CSS editor that Shopify doesn't provide documentation on.

 

To illustrate what I mean by "strange behavior," I have provided the code that caused it below.

 

.ft {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.ft-sl {
  background-color: var(--colorNav);
  transition: 0.4s background ease;
  color: var(--colorNavText);
  padding: 12px;
  display: flex;
  align-items: center;
}
img {
  width: 64px;
  margin-right: 12px;
  filter: invert();
}
.ft-sl:hover {
  background-color: var(--colorScheme2Bg);
}
@media screen and (max-width: 1024px) {
  .ft {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 425px) {
  .ft {
    display: flex;
    flex-direction: column;
  }
  .ft-sl + .ft-sl {
    margin-top: 12px;
  }
}

 

This is the code I wrote, which describes a feature container (.ft) that holds a responsive grid of feature selectors (.ft-sl). Although the code is under 500 characters and doesn't include any of the CSS features that Shopify disallows, the Store Editor refused to save it or explain why. I spent a good 15 minutes troubleshooting, and it wasn't until I removed the filter: invert(); rule that I was finally able to save my styles.

 

Based on this behavior, and the comments that users have made on the forums about similar issues, it seems that there are several CSS properties that Shopify forbids in the Custom CSS editor. I am hoping to find a full list of these forbidden properties, so that I can design and style my store with these limitations in mind rather than needing to figure them out by trial and error.

btf85
Visitor
2 0 1

Having this issue as well. Would really like to see this addressed.