New CSS for specific sections field in the Shopify 2.0 themes

Igor BujasFebruary 10, 20231 Mins read434 Views

Shopify launched a neat new feature for 2.0 themes to quickly add CSS to a specific section of the theme. So that means you can easily target a specific section, which is probably a bit faster than inspecting the element and then targeting it using CSS specificity.

Here is how to see this in action. Log into the Admin of your 2.0 theme, and go to Online Store -> Themes -> Customize.

Find the section where you want to add the custom CSS, enter the code, and SAVE.

New CSS for specific sections field in the 2.0 themes

Another new option is the field for custom CSS under the theme settings. It works the same as the CSS fields in WordPress theme editors do.

Again you can find it under:

Online Store -> Themes -> Customize -> Theme Settings (this little icon):

You can now enter your custom CSS for site-wide usage here.

Previous post Boosting Productivity as a Shopify Developer: a few useful tips

Next post A step-by-step tutorial on adding Tailwind CSS to your website

Written by

Igor Bujas

I am a UI designer and front-end developer professional working mostly in the Shopify ecosystem. I've been working in the industry for so long that I was fixing bugs for IE5, and animating in Flash while it was still a Macromedia product. While not differentiating between the UI and the code, I am always looking to get outdoors for some alpine climbs or scuba dives. I also work as a Krav Maga instructor in Zagreb, Croatia.