Customize the design of your store using CSS

Easily customize the design of your store using CSS to enhance your branding, style specific sections or your whole site, and take advantage of modern theme features — all without editing core code.

Last updated 4 months ago

Helpful links

  1. https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics

  2. https://developer.mozilla.org/en-US/docs/Learn/CSS

  3. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

  4. https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors

  5. https://help.shopify.com/en/manual/online-store/themes/theme-support

  6. https://shopify.dev/themes/architecture/sections/section-schema#tag

  7. https://shopify.dev/themes/architecture/settings/fonts#add-shopify-fonts-to-your-theme

  8. https://help.shopify.com/en/manual/online-store/web-performance

Overview

Custom CSS empowers you to adjust your store’s appearance beyond what’s possible with built-in settings. This is a powerful way to personalize your site, whether you want to update your entire store or focus on individual sections. By leveraging our modern themes, you’ll always have access to the latest design features and customization options for your brand.

💡 Tip: Even a little experience with CSS and HTML makes it easier to customize your theme.

Learning resources for CSS

If you're interested in improving your CSS skills, check out the following resources:

  1. https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics

  2. https://developer.mozilla.org/en-US/docs/Learn/CSS

  3. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

  4. https://developer.mozilla.org/docs/Learn/CSS/Building_blocks/Selectors

  5. https://help.shopify.com/en/manual/online-store/themes/theme-support

Adding custom CSS to your theme

A cascading style sheet (CSS) lets you control the appearance of your site’s elements across single or multiple pages. With Custom CSS, you can style the entire store or target just one section for unique customizations.

You cannot use custom CSS on the Checkout page.

Considerations for using custom CSS

⚠️ Important:Custom CSS will always take priority and override built-in theme settings if there’s a conflict.

You should keep the following details in mind before adding custom CSS:

  1. Some CSS selectors and at-rules are restricted

    1. The following are not allowed: @import, @charset, and @namespace.

    2. At the section level, only @media, @container, @layer, and @supports are supported.

    3. It is not possible to target IDs or classes belonging to the parent shopify-section wrapper at the section level.

  2. If you write a CSS rule for the wrapper tag of the parent section, it acts as a descendant selector. While the default wrapper is a <div>, it can be changed to another permitted HTML tag.

    1. For more on permitted wrapper tags, visit https://shopify.dev/themes/architecture/sections/section-schema#tag.

  3. Only content hosted on https://cdn.shopify.com is allowed in custom CSS URLs.

  4. Custom fonts may be used, but since they load separately, they can impact your store’s speed.

    1. Learn more about using custom fonts.

    2. You can find tips on optimizing performance when using additional resources.

  5. Character limits exist for custom CSS:

    1. Up to 1500 characters when applied to the whole theme

    2. Up to 500 characters when applied to a single section

  6. CSS that depends on specific theme classes or structure might stop working after a theme update.

  7. Our support team does not provide in-depth troubleshooting for custom code changes.

    1. For additional support, check https://help.shopify.com/en/manual/online-store/themes/theme-support.

🚧 Caution: Always carefully review your CSS after any theme update — new releases can change markup or class names.

How to add custom CSS to your entire theme

To apply custom CSS across your entire store, follow these steps:

  1. Go to your admin dashboard and select Online Store > Themes.

  2. Click Customize next to your active theme.

  3. Navigate to Theme settings.

  4. Click Custom CSS.

  5. Add or paste your CSS rules.

  6. Click Save.

Your changes will be live across all pages except Checkout.

How to add custom CSS to a specific section

To style just one section with Custom CSS:

  1. In your admin dashboard, go to Online Store > Themes.

  2. Click Customize.

  3. Select the section you want to update in the customizer.

  4. Scroll to the bottom of the section panel and click Custom CSS.

  5. Enter your custom CSS styles.

  6. Click Save.

This approach allows you to tailor the look of specific areas without changing your entire store.