Can Shopify concatenate CSS files in Taste theme automatically?

bean_team
Visitor
1 0 0

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:

 

<noscript>{{ 'component-list-menu.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-search.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-menu-drawer.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-cart-notification.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-cart-items.css' | asset_url | stylesheet_tag }}</noscript>

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

Replies 2 (2)

oreoorbitz
Shopify Partner
244 29 129

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.

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes



You can also contact me directly if you prefer.

Cedcommerce
Shopify Expert
718 76 112

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

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here