How to Add Custom CSS to Shopify Theme

Customizing the appearance of your Shopify store is essential for creating a unique and memorable shopping experience for your customers. Adding custom CSS to your theme is one of the most effective ways to personalize your store's look and feel.

This guide will take you through the process of integrating custom CSS into your Shopify theme, helping you achieve the desired visual impact. Whether you're making minor tweaks or significant changes, learning how to apply custom CSS will give you the flexibility to design your store exactly how you envision it. Keep reading to uncover crucial tips and best practices for enhancing your Shopify store with custom CSS.

Considerations Before Using Custom CSS

Before adding custom CSS to your Shopify theme, consider the following:

• The following CSS selectors can't be used in custom CSS:
• You cannot use at-rules @import, @charset, and @namespace.
• For section-level CSS, only at-rules @media, @container, @layer, and @supports are allowed.
• You can't target the ID or classes of the Shopify Section element with the shopify-section class at the section level.
• Only the https://cdn.shopify.com domain is allowed when using URLs in custom CSS.
• If you declare a custom CSS rule with the tag wrapping the parent section element, it's considered a descendant tag, and the style applies to that section. By default, the parent section is wrapped in a <div> tag, but theme developers can set this to any permitted value in the section schema.
• Only the https://cdn.shopify.com domain is allowed for URLs in custom CSS.
• Custom fonts are allowed, but can impact store performance because they are separate resources that browsers must download before displaying text. Ensure your storefront isn't negatively affected by custom fonts. Learn how to use custom fonts in your theme.
• CSS rules affecting the entire theme are limited to 1500 characters.
• CSS rules for a specific section are limited to 500 characters.
• Updates to your theme might cause your custom CSS to stop working, depending on the CSS selectors or classes you use.

Shopify doesn't support advanced theme customizations. If you encounter an error related to these limitations and can't determine the cause, refer to other available support resources.
 

Step 1: Access the Code Editor

The first step to adding custom CSS is accessing the code editor within your Shopify admin. Here's how:

1. Navigate to Online Store > Themes.
2. Locate the theme you wish to customize and click "Actions," then select "Edit code."
3. In the code editor, expand the "Assets" folder to find your theme's CSS files.

By following these straightforward steps, you'll gain access to the files responsible for your store's styling, allowing you to make targeted modifications.
 

Step 2: Create a Custom CSS File

While you can edit existing CSS files, it's recommended to create a dedicated custom CSS file to keep your changes organized and separate from the theme's code. Here's how:

1. Within the "Assets" folder in the code editor, click "Add a new asset."
2. Choose "Create a blank file" and name your file (e.g., "custom.css").
3. Add your custom CSS code to this new file.

Having a separate custom CSS file ensures that your modifications won't be overwritten when updating your theme, providing a seamless transition.
 

Step 3: Link the Custom CSS File

To ensure your custom CSS file takes effect, you'll need to link it within your theme's main Liquid file. Here's how:

1. Navigate to the "Layout" folder and open the "theme.liquid" file.
2. Look for the existing line that links the base CSS file (e.g., `{{ 'base.css' | asset_url | stylesheet_tag }}`).
3. Copy and paste that line below, replacing the filename with your custom CSS file (e.g., `{{ 'custom.css' | asset_url | stylesheet_tag }}`).

By linking your custom CSS file, your store will now reflect the styles you've defined, breathing new life into your online presence.
 

Customize with Shogun Page Builder

If you prefer a more user-friendly approach, consider using Shogun Page Builder, a powerful Shopify app that allows you to customize your store without delving into code. With its drag-and-drop interface and visual editing capabilities, Shogun provides an intuitive way to create stunning designs tailored to your brand.
 

Conclusion: How to Add Custom CSS to Shopify Theme

By following these steps, you'll be able to add custom CSS, giving you the freedom to craft a visually captivating online presence that sets you apart from the competition. Whether you choose to edit CSS files directly or leverage the convenience of Shogun Page Builder, the ability to tailor your store's appearance is now at your fingertips. Unleash your creativity and elevate your brand's online experience today!