I created a .css file, how do i attach this to base.css ?

Shopify Discussion

Topic summary

Goal: load custom CSS from a separate file instead of editing base.css in a Shopify theme.

Key approaches suggested:

  • Upload your custom .css to Assets (Online Store > Themes > Edit code > Assets > Add a new asset). Then include it:
    • In base.css using an @import rule: @import url(‘{{ ‘your-custom.css’ | asset_url }}’);
    • Or in theme.liquid after the base.css line using a separate stylesheet tag: {{ ‘your-custom.css’ | asset_url | stylesheet_tag }}.

Clarifications:

  • Shopify has no asset build/bundling step. You can’t “attach” files in a build sense; you either import from base.css or link the file directly in theme.liquid.
  • Another option is to inline styles via a snippet in theme.liquid, though keeping a separate asset is cleaner.

Notes on implementation:

  • Liquid helpers used: asset_url (generates the asset URL) and stylesheet_tag (outputs a tag).
  • Code snippets are central to applying the solutions.

Status: Practical, actionable methods provided. No explicit resolution from the original poster; approaches are compatible and can be adopted immediately.

Summarized with AI on December 12. AI used: gpt-5.
1

Hi I would like to write some custom css in a seperate file, as I do not want to write it directly into the

base.css file. Could anyone advise what code should I write in the base.css file, so that it will

read from the .css file I created ? Thank you.

2

Hey @hip280 ,

In Shopify, to include a custom CSS file without directly editing the base.css, you can link your custom CSS file by adding an @import rule to the base.css or the appropriate theme file. Here’s how:

  1. Upload the Custom CSS File:
    Go to your Shopify Admin > Online Store > Themes > Actions > Edit Code. In the Assets folder, click Add a new asset and upload your .css file.

  2. Edit the base.css or theme.css File:
    Locate the base.css or main CSS file in the Assets folder and add the following line at the top or where appropriate:

    @import url(‘{{ ‘your-custom.css’ | asset_url }}’);

    Replace your-custom.css with the name of your custom CSS file.

This approach ensures your custom styles are included without altering existing code directly.

Feel free to DM if you’ve any more questions :slightly_smiling_face:

Cheers!
Shubham | Untechnickle

3

You can add this file to your theme by adding it below this file code to theme.liquid file. Below this line of code “{{ ‘base.css’ | asset_url | stylesheet_tag }}”

Add code example like this

{{ 'your-file-name.css' | asset_url | stylesheet_tag }}
1 Like
4

Shopify does not have a build process for assets.

Either inline it as a snippet into theme.liquid

Or make it it’s own asset to be used in theme.liquid similar to base.css

1 Like