I’m using the Taste theme, and I’m wondering if there’s a way to have shopify automatically concatenate css files. My header.liquid file is calling multiple css file loads:
That’s fine, but each line results in an individual request for a smallish css file.
Is there a way to have shopify automatically concatenate those into one file server-side? Or am I supposed to do this manually. I’m not sure if there’s a workflow guide for developers or something like that which would explain common practices. So far my experience with the developer guides has been a bit of a letdown.
Worst case I’m assuming I just create a new asset, something like component-group-1.css and copy the contents of each of those into it and then just delete those individual files. That would make development a bit more kludgy but would work fine enough I guess.
Thanks,
Jesse
Nope, there is no automatic solution.
You can create a build process and use something like gulp-concat-css
Though in my personal opnion, it’s best to have more none critical content renderblocking (important dinstiction) requests, than to have a single request with undeeded files. Though in the case of the header, most of those elements are only needed for the header, so combining them in header.css wouldn’t hurt, it would be a good idea to organize the interal css so that you know which blocks of css belong to which component, so for instance if you remoe the HTML for the search component, you can easily remove the CSS.
Hello @bean_team ,
Based on your query, we would like to inform you that, there is no particular option to automatically concatenate CSS files in Shopify.
However, there is a way to do this. You need to ask a developer or hire a developer to do this.
You need to combine all CSS files in one file and change the names from where they are called. By doing this you will need to change all the files which are already there in the store.
Hope it helps, let us know if you need any further help.
Regards,
CedCommerce