Adding custom CSS and JS to Shopify

Adding Custom CSS and JavaScript to Your Shopify Store

Learn how to effectively integrate custom CSS and JavaScript into your Shopify theme to enhance design, add dynamic functionality, and improve user experience.

Customizing your Shopify store's appearance and functionality often requires adding your own CSS and JavaScript. While Shopify provides extensive theme customization options through its admin panel, direct code injection offers unparalleled control. This article will guide you through the best practices for adding custom CSS and JavaScript, ensuring your modifications are maintainable, performant, and compatible with theme updates.

Understanding Shopify Theme Structure

Before diving into code, it's crucial to understand how Shopify themes are structured. Themes are built using Liquid, Shopify's templating language, and consist of various files organized into directories like layout, templates, sections, snippets, assets, and config. The assets directory is where you'll typically place your custom CSS and JavaScript files. The layout/theme.liquid file acts as the main wrapper for your store, including the header, footer, and all other theme components. This is often where you'll link your custom assets.

graph TD
    A[Shopify Theme] --> B(layout/theme.liquid)
    B --> C(sections/)
    B --> D(templates/)
    B --> E(snippets/)
    B --> F(assets/)
    F --> G(custom.css)
    F --> H(custom.js)
    G -- "Linked in" --> B
    H -- "Linked in" --> B

Simplified Shopify Theme File Structure for Custom Assets

Adding Custom CSS

There are several ways to add custom CSS to your Shopify store, each with its own advantages. The recommended approach for significant styling changes is to create a dedicated CSS file within your theme's assets directory. For smaller, more targeted adjustments, you can use the theme editor's custom CSS box.

1. Method 1: Create a new CSS file (Recommended)

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Assets directory, click Add a new asset.
4. Choose Create a blank file, select .css for the file type, and name it something descriptive like custom.css or my-styles.css.
5. Add your CSS rules to this new file.
6. To link this file to your theme, open layout/theme.liquid.
7. Before the closing </head> tag, add the following line: {{ 'custom.css' | asset_url | stylesheet_tag }} (replace custom.css with your filename). This Liquid snippet dynamically generates the correct URL for your stylesheet.

2. Method 2: Using the Theme Editor's Custom CSS

1. From your Shopify admin, go to Online Store > Themes.
2. Find your current theme and click Customize.
3. In the theme editor, navigate to Theme settings (usually represented by a gear icon or a 'Theme settings' tab).
4. Look for a section like Custom CSS or Additional CSS.
5. Paste your CSS rules directly into this box. This method is good for small, quick fixes or overrides.

Adding Custom JavaScript

Similar to CSS, custom JavaScript can be added to enhance interactivity, integrate third-party services, or implement dynamic features. For larger scripts, creating a separate .js file is best practice. For smaller snippets, you can embed them directly within theme.liquid or specific section files.

1. Method 1: Create a new JavaScript file (Recommended)

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Assets directory, click Add a new asset.
4. Choose Create a blank file, select .js for the file type, and name it something like custom.js or my-scripts.js.
5. Add your JavaScript code to this new file.
6. To link this file to your theme, open layout/theme.liquid.
7. It's generally best to place JavaScript files just before the closing </body> tag for performance reasons, as it allows the HTML to render first. Add the following line: {{ 'custom.js' | asset_url | script_tag }} (replace custom.js with your filename). This Liquid snippet dynamically generates the correct URL for your script.

2. Method 2: Inline JavaScript in theme.liquid or sections

For very small, page-specific scripts, you can embed JavaScript directly within <script> tags. In layout/theme.liquid, place your script before the closing </body> tag. For scripts specific to a particular section (e.g., a product page), you can add the <script> tags directly within the relevant section file (e.g., sections/product-template.liquid).

<script>
  // Your inline JavaScript code here
  console.log('Hello from Shopify!');
</script>

Using jQuery in Shopify

Many older Shopify themes and third-party apps still rely on jQuery. While modern JavaScript (ES6+) is often preferred, if your theme or a specific integration requires jQuery, you can ensure it's loaded correctly. Shopify themes often include jQuery by default, but if not, you can add it yourself.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  // Ensure jQuery is loaded before using it
  if (window.jQuery) {
    jQuery(document).ready(function($) {
      // Your jQuery code here
      $('.my-element').on('click', function() {
        $(this).toggleClass('active');
      });
    });
  }
</script>

Loading jQuery from a CDN and using it in your custom script