Shopify educator Hannah shares six essential CSS best practices for Shopify designers. The video covers where to add CSS, why to avoid editing theme files, using variables, and other tips to create cleaner, more maintainable code.
A short editorial from the VEONIB team on why this content matters.
This video provides a clear, best-practice guide for writing maintainable CSS on Shopify, emphasizing separation of custom code from theme files. It's a practical lesson in professional web development for the platform.
The advice to never edit core theme files and to use CSS variables is a powerful, scalable strategy. SEONIB's AI-driven approach similarly emphasizes clean, structured content that is easy to update and future-proof.
Shopify designers and developers should watch this and then implement a custom.css file and variable strategy on their next project to improve code maintainability.
The use of Cascading Style Sheets to customize the look and feel of a Shopify store.
A separate CSS file you create to hold your own global styles, keeping them separate from theme files.
The code files that make up your Shopify theme, where global styles are typically added.
A custom CSS box within a section's settings that applies styles only to that specific instance.
Named values for things like colors and fonts that can be reused throughout your stylesheet.
A dynamic ID automatically generated for each section on a Shopify page.
A CSS feature that allows you to nest selectors within one another for better organization.
Where should I add global CSS in Shopify?
Add global CSS to your theme's code, typically in a custom.css file, to apply styles site-wide.
Where should I add CSS for a specific section?
Use the 'Custom CSS' box inside the section's settings. Shopify automatically prefixes your selector with a dynamic section ID.
Why shouldn't I edit the theme's core CSS files?
Editing core files makes it hard to track your changes, can cause bugs, and complicates theme updates. It's better to keep your own styles in a custom.css file.
Can I use the section ID as a CSS selector?
No, you should never use the dynamic section ID as a selector because it changes when you duplicate a theme, breaking your styles.
What are CSS variables in Shopify?
CSS variables are named values (like colors or fonts) that can be reused. Shopify themes have over 100 pre-defined variables you can reassign to quickly change styles.
How can I avoid repeating CSS selectors?
Use CSS nesting to write style rules inside a parent selector, which keeps your code organized and reduces repetition.
Is it okay to use `!important` in Shopify CSS?
Yes, it's acceptable to use `!important` when overriding styles from apps, especially if app updates break your customizations.
How do I make my Shopify store easier to maintain?
By keeping all custom CSS in a separate file, using variables, and avoiding edits to core theme files, you make your code cleaner and easier to manage.