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

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

pixelstorm
Shopify Partner
7 0 4

 

 

 

.product-stock-level-wrapper::before {
  content: "";
}

 

 

 

 

when i put this custom css code in the custom css area in theme settings i get the following error

"Online Store editor session can't be published"

if i remove the 

 

 

 

content: ""; 

 

 

 

the settings are saved. This seems to be a road block in regards to customising a theme.

CleanShot 2023-02-27 at 18.56.39.png



Replies 22 (22)

ecomheroes_dev
Excursionist
60 1 2

@pixelstormAdd this CSS in the CSS files that are located in the theme files

Problem Solved? ✔Accept and Like solutions to help future merchants
Hire Shopify Experts for Shopify Store Design and Development
info@ecomheroes.dev
https://ecomheroes.dev
pixelstorm
Shopify Partner
7 0 4

That code will be overwritten when the theme updates.

pawankumar
Shopify Partner
566 76 98

Hi,
I hope you are doing good.
It looks like it is known issue to new custom CSS feature.
Unless it is resolved, You can add your style to assets/theme.css
I hope the above is useful to you.
Thanks!

- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee  | Email: thepkpawankumar@gmail.com
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Best regards,
Pawan
pixelstorm
Shopify Partner
7 0 4

thanks @pawankumar . do you have a link to the "known issue" so i can keep an eye on the progress of the issue?

pawankumar
Shopify Partner
566 76 98

No, I don't have link but I checked on many themes and issue is still there so it is from Shopify side, but I don't have direct link where this issue is mentioned.
Thanks!

- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee  | Email: thepkpawankumar@gmail.com
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Best regards,
Pawan

mediafish
Shopify Partner
11 0 9

...still an issue today - drove me nuts until I realized I'm not the only one. Code works perfectly until I want to save it. 

Testing it I came to the conclusion that the following line is not supported:  

 

content: '';

 

that does not let you save the custom CSS - if you take that off it saves... 

 

I talked to the support  explaining that it is valid CSS.

 

I showed him it doesn't work in my Theme; and when he told me it was a Theme problem I installed the Dawn Theme - and it didn't work there either.

 

He told me he will talk to the Dawn (Shopify) Theme Support and the Theme Support told me: 

 

  • We are unable to give you an answer as of now, but they are already in the known of this. What I am going to do for you would be to give you an update about this via your email...

I will keep you posted - as soo as this is fixed.

 

 

 

 

 

 

mediafish
Shopify Partner
11 0 9

Below is their answer and in the first paragraph my answer to it: 

 

Bottom line: I never asked for advice on custom code. I only pointed out that: In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
And this CSS pseudo element does not work in Shopify Custom code.
Your developer can simply check that by adding a pseudo element in the custom code and check it such as:
a::before {
content: '';
}
and they will find out that it can't be saved.

 

Shopify answer: 

Hello Sven, 
 
This is Vel from the Shopify Support team and I appreciate your patience while waiting for Theme Support to look closely into this. 

They check on the issues where you were trying to save the valid CSS on your theme and have shared that as part of our Design time policy it is outside of our scope of support to offer code advice for custom code. While our theme support team can provide guidance and assistance with issues related to our themes, they are not be able to provide support for custom code.
 
Regarding the CCS validator, please note that the link you shared here: https://jigsaw.w3.org/css-validator/#validate_by_input is an external website and is not anything Shopify supported/related. Therefore, it might not be able to validate CCS for Shopify themes and should be considered as a 3rd party source. That being said, the Theme support also likes to share that everything on the Shopify end is working as expected. 
 
This help guide here: Theme Support Shopify can help when explaining our level of support and it does say and explain with this image here:

 

 


 
that the arrow above is not supported. 
 
Given these circumstances, I would highly recommend reaching out to the Experts community on Shopify. This way, you can consult with our partners and developers for more guidance on this issue. 

Thank you for your understanding and let me know if you have any further questions or concerns. We are always here to help and support you in any way that we can.

Emm_
Shopify Partner
5 0 6

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

luxbags
Tourist
7 0 2

I have the exact same problem! I'm new to web programming and it's driving me nuts not knowing that is causing the issue. Thank you so much for your post. Any work around so at least I can save some work done?

pixelstorm
Shopify Partner
7 0 4

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

Jamie40
Tourist
4 0 1

I'm having same issue - and appreciate your advice. However if i add it to the main theme css liquid, then it applies to all images on the site. And I only want to have this particular style on certain sections.

 

Does anyone know who is looking to fix this? Is this a Shopify thing? Or something each theme owner needs to fix?

 

It's so frustrating to see it perfect in preview but unable to save.

 

Thanks - glad to know I'm not alone. 

 

pixelstorm
Shopify Partner
7 0 4

Can you not add a custom css class to the section? then use your css selectors to target that specific section

.custom_css_selector .child_selector::after {

 

}

Jamie40
Tourist
4 0 1

Thank you so much for the reply. I don't see how to add a custom css class to the section.

 

I'm trying to add opaque background to image with text section, but it won't let me save the custom css with this: content: "Text here";

 

It will save with the opaque box but not if I include the content class.

 

 

 

 

 

 

pixelstorm
Shopify Partner
7 0 4

you can add a custom css class to your section. https://dynamitefrog.com/posts/shopify-add-class-to-section/

mwex501
Shopify Partner
11 0 5

Hello,

 

Several posted to this due to the errors relevant to creating custom CSS in the customizer. Shopify published all the limitations relevant to using custom CSS here: https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

I hope this helps!

mediafish
Shopify Partner
11 0 9

Hi, 

 

Thanks but where do you see the limitation of the content property? I can't find anything about it... 

Also I just tried to add this code and it still does not save. 

.product-stock-level-wrapper::before {
  content: "";
}
aisaac-curallux
Visitor
2 0 0

I think the problem with the content property is the ' " ' character.

Remember that the custom css is going to be reflected on the json file associated with that template, and ".className {content: " ";} would break the json file. 

A possible solution would be escaping the ", (.className {content:\" \";}but this also fails

I guess this can only be solved by Shopify devs?

aisaac-curallux
Visitor
2 0 0

I'm wrong. content:normal doesn't work. And if you try to edit the template file and escape characters manually the error message is: Invalid property value: content

So should be the "content" rule causing the problem

mediafish
Shopify Partner
11 0 9

Yes that is a confirmed problem... and Shopify told me they look into about a year ago.. 

 

Just think we should be able to use valid CSS 😉

Jackary
Visitor
1 0 0

Still an issue.

I cant believe we are paying for a service which cant even handle "Custom"

Not to mention... no subcategories.

theleoad
Shopify Partner
1 0 0

I don't know if I'm coming too late to this topic, but since I noticed the problem with pseudo elements, I usually create a Liquid section and place the CSS inside it, when it's a modification only on that page. I think this way it's easier for me to maintain and not need to edit the CSS elsewhere

vbay-dev
Visitor
1 0 1

This is still not fixed and is still an issue.

Can we please update to modern css?