Custom CSS

Featured links

1. Shopify CDN
2. Shopify documentation on adding custom CSS to your theme
3. Shopify admin Themes
4. Shopify documentation on theme support
5. Shopify developer documentation on section schema tags
6. Shopify documentation on web performance
7. Shopify developer documentation on custom fonts
8. Shopify documentation on additional support resources
9. Shopify documentation on custom CSS
10. Shopify documentation on templates

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Add custom CSS

Custom CSS lets you make styling changes to your Align theme when its built-in settings do not provide the result you need. Use it carefully, and test changes before publishing them to your live store.

Apply CSS across your Align theme

Use theme-level CSS for changes that should appear throughout your store, such as button styling.

1. In your Shopify admin, go to Online Store > Themes
2. Find Align, then click Customize.
3. Click Theme settings.
4. Click Custom CSS.
5. Add your code.
6. Click Save.

Theme-level CSS applies to all store pages except Checkout and is limited to 1,500 characters.

Apply CSS to one section

Use section-level CSS when a change should affect only one section, such as its font size or background color.

1. In your Shopify admin, go to Online Store > Themes
2. Find Align, then click Customize.
3. Select the section that you want to style.
4. At the bottom of the section properties panel, click Custom CSS.
5. Add your code.
6. Click Save.

Section-level CSS is scoped to the selected section and is limited to 500 characters.

Work within custom CSS limits

Custom CSS requires familiarity with CSS and HTML. For Align-specific guidance, start with Company XYZ support. For Shopify platform limitations and general theme support information, review the available theme support

1. Use supported rules. @import, @charset, and @namespace are not supported. In section-level CSS, only @media, @container, @layer, and @supports at-rules are allowed.
2. Target section content carefully. Section-level CSS cannot target the ID or classes on the section’s outer wrapper. A rule that begins with the parent wrapper tag is treated as a descendant rule within that section. The wrapper is usually a <div>, but themes can use other permitted values
3. Use approved asset URLs. URLs in custom CSS can use only the https://cdn.shopify.com domain.
4. Consider font performance. Custom fonts are allowed, but browsers download them before rendering text. Test their effect on store performance, and review how to use custom fonts in your theme
5. Retest after theme updates. Changes to theme markup, selectors, or classes can cause existing custom CSS to stop working.

If you receive an error that you cannot resolve, contact Company XYZ support for Align guidance and review Shopify’s additional support resources for platform help.

Usage notes

1. Start with built-in settings. Use custom CSS only when the available Align theme controls do not provide the result you need.
2. Keep rules focused. Use theme-level CSS for shared styling and section-level CSS for local adjustments.
3. Check every screen size. Test changes on desktop and mobile before publishing.
4. Save a copy of your rules. Keep your CSS somewhere accessible so you can restore or update it after a theme update.