Shopify is commenting out my CSS Styles on pages

[JFerreira]

Hi,

We're moving from Magento to Shopify and I've imported 1000's of pages, many of which have minor CSS tweaks here and there which we'd like to keep. 

I've imported most pages weeks ago and they were fine but stating last Friday all CSS rules are getting commented out when you save the page. 

Wven weirder, the Shopify editor seems to "apply" the rules even though they were commented but then, obviously, the live page don't.

Before Saving:

After Saving:

After saving (rules commented) showing how the editor still applies the rules:

Live page:

Any idea what's going on?

[Bellman61]

JFerreira, did you find a solution to this issue? I'm having the same problem.

Dave

[Hermit_the_Log]

Hi @JFerreira and @Bellman61 

There is a way to implement custom CSS to individual pages using metafields.

1. Navigate to Settings > Custom Data > Pages

2. Choose "Add definition"

3. Create your metafield

• The "Name" field is for reference when you're editing the Page.
• Create your Namespace and key. In this example, my Namespace is "custom_store_code" and my key is "css".  Formatted together, they should read "namespace.key" in this field.
• Set your metafield description to make it clear what this metafield is for
• For the Type of metafield, choose "Multi-line text"
• Save your shiny new metafield

4. Navigate to the editor for the Page you'd like to apply the custom CSS code to. Under the Page description, you should now see a section for your Metafield. Choose "Show all"

 

5. Click into your Custom CSS metafield, and simply add your custom CSS to this field. Save when you're finished.

6. Navigate to your Online Store Sales Channel. Click the 3 dots on your current theme next to the "Customize" button. Choose, "Edit code"

7. On the lefthand side, select your "theme.liquid" file

8.  READ NOTE BELOW BEFORE CONTINUING: Within your theme code, scroll down and find the closing </head> tag.  Just above this, insert the following code using the Namespace and key that you created.  You'll need to include the opening and closing <style> tags. Within the <style> tag, it should read {{ page.metafields.namespace.key }}, which in our example is {{  page.metafields.custom_store_code.css }}.

NOTE:  Editing your theme.liquid file will affect your entire site. Be very cautious within this file, however after you have saved any changes, you can restore previous versions of your theme.liquid file by clicking the "Current" selector underneath "Recent changes" if you need to revert back.  It is also a good idea to copy and paste this entire file to a notepad before you start making any changes, just to have a hardcoded backup.

9.  Save your theme.liquid file, and you should now see the custom code applied to the individual page you edited.