How to Add Custom CSS to Shopify

Understanding Shopify CSS

Before diving into the methods, it helps to understand how CSS works in Shopify. Every Shopify theme loads CSS files that control the visual appearance of your store. When you add custom CSS, you are either adding to these existing styles or overriding them.

CSS follows a specificity hierarchy. This means that more specific selectors override less specific ones, and styles that come later in the code can override earlier ones. Understanding this is key to making your custom styles work reliably.

The method you choose for adding CSS depends on your technical comfort level and the scope of changes you need to make. Let us explore each option from simplest to most advanced.

Theme Editor Method

Many modern Shopify themes include a built-in custom CSS field in the theme settings. This is the quickest and safest way to add small CSS customisations without touching any code files.

How to Find the Custom CSS Setting

1. 1
   Open your Shopify admin

   Navigate to Online Store, then Themes.

2. 2
   Click Customise on your active theme

   This opens the theme editor where you can preview changes.

3. 3
   Go to Theme Settings

   Click the gear icon or Theme Settings in the sidebar.

4. 4
   Look for Custom CSS or Advanced

   The exact location varies by theme. Check sections like Advanced, Custom Code, or CSS.

.btn, .button, .shopify-payment-button button {
  background-color: #ef436b !important;
  border-color: #ef436b !important;
}

.btn:hover, .button:hover {
  background-color: #d63d5f !important;
  border-color: #d63d5f !important;
}

Custom Liquid Section

If your theme does not have a custom CSS setting, or you need to add CSS to specific pages only, you can use the Custom Liquid section. This section type lets you add any HTML, CSS, or JavaScript to your pages.

Adding a Custom Liquid Section

1. 1
   Open the theme editor

   Go to Online Store, Themes, then click Customise.

2. 2
   Navigate to the page you want to customise

   Use the page selector at the top to choose your page.

3. 3
   Add a Custom Liquid section

   Click Add Section and search for Custom Liquid or Custom HTML.

4. 4
   Add your CSS wrapped in style tags

   Paste your CSS code between opening and closing style tags.

<style>
  /* Hide the quantity selector on product pages */
  .product-form__quantity {
    display: none;
  }

  /* Make the add to cart button full width */
  .product-form__submit {
    width: 100%;
    max-width: none;
  }
</style>

This method is particularly useful when you want different styles on different pages. You can add Custom Liquid sections to individual product pages, collection pages, or any template in your theme.

Theme Asset Files

For larger CSS customisations or a more professional setup, you should edit your theme files directly. This gives you full control and keeps your CSS organised in dedicated files.

Creating a Custom CSS File

1. 1
   Access the code editor

   Go to Online Store, Themes, click the three dots, then Edit Code.

2. 2
   Navigate to Assets folder

   Find the Assets folder in the left sidebar and click on it.

3. 3
   Add a new asset

   Click Add a new asset and create a blank file called custom.css.

4. 4
   Link the CSS file in theme.liquid

   Add the following line in your theme.liquid file, just before the closing head tag.

{{ 'custom.css' | asset_url | stylesheet_tag }}

Using theme.scss.liquid

Some older themes use SCSS instead of CSS. If your theme has a theme.scss.liquid file, you can add your styles directly to the bottom of that file. SCSS supports variables and nesting, which can make your CSS more maintainable.

CSS Best Practices

Writing maintainable CSS is just as important as making it work. Follow these practices to keep your customisations organised and future-proof.

/* =================================
   Product Page Customisations
   ================================= */

/* Hide compare at price when not on sale */
.price__compare-at {
  display: none;
}

/* Mobile styles (default) */
.product-grid {
  grid-template-columns: 1fr;
}

/* Tablet and up */
@media (min-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

Common Customisations

Here are CSS snippets for frequently requested customisations that you can adapt for your store:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body, button, input, select, textarea {
  font-family: 'Inter', sans-serif;
}

.badge--sold-out,
.product__badge--sold-out {
  display: none;
}

.product-form {
  position: sticky;
  bottom: 0;
  background: white;
  padding: 1rem;
  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

@media (min-width: 768px) {
  .product-form {
    position: static;
    box-shadow: none;
    padding: 0;
  }
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Troubleshooting

CSS not working as expected? Here are the most common issues and how to fix them:

Next Steps

Now that you know how to add custom CSS to your Shopify store, here is how to continue improving your customisation skills:

1. 1
   Learn browser developer tools

   Master the Elements and Styles panels. They are essential for CSS debugging.

2. 2
   Understand CSS Grid and Flexbox

   Modern layout techniques that make responsive design much easier.

3. 3
   Explore CSS variables

   Learn how Shopify themes use CSS custom properties for easy colour changes.