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

English Shopify Shopify Discussion
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