Custom CSS

Featured links

1. Shopify documentation on sections and blocks
2. Shopify documentation on the theme editor
3. Company XYZ documentation on the custom css block

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this block when you need a styling adjustment that the available settings cannot handle. It lets you add targeted CSS for the current template area, which is useful for small overrides such as spacing, typography, alignment, or layout fixes. For broader context on where blocks live in a theme, see Shopify documentation on sections and blocks

Enter CSS only, without <style> tags. Broad selectors or invalid rules can affect more of the page than you intended.

Core settings

The code field is where you add your CSS. This block works best for focused changes with clear selectors, rather than large collections of site-wide styling. For an overview of the editor itself, see Shopify documentation on the theme editor

Keep rules as specific and minimal as possible. Smaller, well-scoped overrides are easier to test, easier to maintain, and less likely to break when you update content or adjust nearby blocks.

If you want step-by-step guidance, see the source-provided Custom CSS reference.

Standard block settings

Editor settings

These settings only affect how the block appears in the editor sidebar. Use the editor title to label the purpose of the CSS clearly, especially if you add multiple Custom CSS blocks to the same template.

Usage notes

1. Keep selectors narrow. Target the smallest practical area so your CSS does not unintentionally restyle other content.
2. Use this for exceptions. Rely on built-in design controls first, then use this block for adjustments those controls cannot cover.
3. Name blocks clearly. Set an editor title that describes the change, such as spacing fix or mobile typography tweak.
4. Check smaller screens. Test your CSS on mobile and tablet layouts to make sure spacing, wrapping, and alignment still work well.
5. Avoid storing too much here. Use this block for concise overrides, not as a catch-all place for large custom style systems.