Create custom CSS page to go past 500 character limit

English Shopify Shopify Discussion
1

How can I create a custom CSS page with the dawn theme to continue adding to my custom CSS styles that exceed 500 characters for one page? To clarify, I created a page without using code by going to online store - pages - add page. Within the basic page creator in Shopify it lets you adjust the html which I did. Then in the theme editor, I used the Custom CSS section to edit that page but reached the 500 character limit. I don’t know that much about CSS or anything about JSON but if I had more characters I could easily finish customing that page with CSS.

I’ve read through forms and it seems like I need to create a new custom CSS page in the theme editor code. Could I get some help with detailed instructions of where to create the file and how to link it so that I can just continue using CSS to edit that page past the 500 character limit?

2

Hi Brandon,

A couple of things you can do with varying levels of “hacky-ness”.

Minify your CSS (Easiest)
I found this one after a quick search: https://www.toptal.com/developers/cssminifier
Just copy/paste your CSS into here and it will remove all spaces, new lines etc. Basically make it take up as few characters as possible to give you some extra room to work with.

Add a new section just for CSS (Hacky-est)
In the Dawn theme you should have access to a section called “Custom liquid”. You can use this section to add CSS as well. Because this section will only load on that page template, the styles you add will only apply to that page.

custom_liquid.png
custom_liquid.png1123×567 36.4 KB

Edit the code (Best practice)
Open Shopify’s built-in code editor. (From the customsier, click the three dots in the top left, click “Edit code”).
Under the “Assets” folder, you could probably add your custom CSS to the “base.css” file.
I believe the file loads on all pages, so be careful with your styles and specificity.

code_editor.png
code_editor.png865×475 49 KB

3 Likes
3

Thank you so much! Gamechanger, it worked great. I used the 2nd method above.

4

Hi! You could also add a “custom-liquid” setting in your section.

In settings just add this:

{
“type”: “liquid”,
“id”: “custom_liquid”,
“label”: “t:sections.custom-liquid.settings.custom_liquid.label”,
“info”: “t:sections.custom-liquid.settings.custom_liquid.info”
}

Then in any place you want to render your liquid code paste this:

{{ section.settings.custom_liquid }}

If you want to write scoped styles it’s best to use #shopify-section-{{ section.id }} before each style

5

When dealing with Shopify’s Dawn theme, creating a new CSS file inside the theme code is the way to go. Found some clear tips on https://proworkflow4.net/ about adding custom CSS files and linking them properly. Basically, you’d add a new CSS file in the assets folder, then include it in your theme.liquid file.