Where to add CSS
Prefer Theme settings → Custom CSS (if available) or a small assets/custom.css file. Avoid editing vendor CSS to keep updates simple.
Document changes and keep overrides near the components they affect.
Refs: Shopify Help, Optimize CSS.
Targeting sections and blocks
Use section IDs/classes and data attributes to scope rules. Avoid global selectors that cascade unpredictably across templates.
Keep specificity modest; rely on component classes instead of !important whenever possible.
Guide: CSS specificity.
Mobile‑first adjustments
Start with small screens and add media queries as the viewport grows. Test hit targets, tap spacing, and line length.
Use the browser device emulator to validate across breakpoints.
Learn: Media queries.
Performance and maintainability
Group related rules, remove dead code, and prefer design tokens/variables if your theme supports them. Minimize unused CSS and avoid render‑blocking styles.
Measure impact after changes.
Refs: Web.dev Measure.
Frequently Asked Questions
Will theme updates overwrite my CSS?
If stored in the theme’s custom CSS setting or a separate asset, updates are typically safe.
How do I undo CSS changes?
Comment or remove rules; keep a small changelog for quick rollback.