How to Implement CSS in Shopify Remix?

Bharat Desai

10 months ago

Hello Shopify Friends,

Today, we’ll delve into the realm of CSS implementation in Shopify Remix.

Shopify Remix has taken the e-commerce world by storm with its dynamic and customizable themes. While the platform offers a plethora of built-in styling options, sometimes you need a little extra finesse to make your online store truly stand out. This is where Cascading Style Sheets (CSS) come into play.

Before that learn

Now, let’s find out how to implement CSS in Shopify Remix to give your store a unique and personalized touch.

We’ll explore three key aspects: Regular CSS, Component-based CSS, and CSS Bundling.

Regular CSS:

Remix helps you scale an app with regular CSS with nested routes and links. CSS Maintenance issues can creep into a web app for a few reasons. It can get difficult to know:

How and when to load CSS, so it was usually all loaded on every page.
If the class names and selectors you were using were accidentally styling other UI in the app.
If some rules weren’t even used anymore as the CSS source code grew over time.

Remix alleviates these issues with route-based stylesheets. Nested routes can each add their own stylesheets to the page, and Remix will automatically prefetch, load, and unload them with the route. When the scope of concern is limited to just the active routes, the risks of these problems are reduced significantly. The only chances for conflicts are with the parent routes’ styles.

Route Styles

Each route can add style links to the page, for example:

First of all, you can create a CSS folder in the app directory.
Create a style.css file in the CSS folder and write your CSS here.
After that, you can import CSS in your route file using the function.

For example:

import globalStyle from "../css/style.css";

export function links() {
    return[
        {
            rel:"stylesheet",
            href:globalStyle,
        }
    ]
}

Component based CSS:

If you want to add specific component CSS in your route file, you can use links.

First of all, you can create your component folder in your app directory.
Create the above function in your component.
After that, you can import your component in your route file with linked CSS.

Here is an example:

import Dashboard , { links as Stylecomponet } from  "../components/Dashboard" ;

export function links() {
    return[
        ... Stylecomponet(),
        {
            rel:"stylesheet",
            href:globalStyle,
        }
    ]
}

CSS Bundling:

Remix does not prescribe a specific CSS bundling solution, and it allows developers to choose the tools that best fit their needs. However, you can follow common practices for bundling and managing CSS in the Remix app. Here’s a general guide.

Some CSS features in Remix bundle styles into a single file that you load manually into the application.
Remix does not insert the CSS bundle into the page automatically, so that you have control over the link tags on your page.

To get access to the CSS bundle, first install the @remix-run/css-bundle package.

npm install @remix-run/css-bundle

Then import cssBundleHref and add it to a link descriptor – most likely in app/root.jsx so that it applies to your entire application.

import { cssBundleHref } from "@remix-run/css-bundle";
import type { LinksFunction } from "@remix-run/node";

export const links: LinksFunction = ( ) =>   [
    ...( cssBundleHref
    ?    [    {
                    rel: "stylesheet",
                    href: cssBundleHref
              }
         ]
    :   [ ] ) ,
    // ...
];

With this link tag inserted into the page, you’re now ready to start using the various CSS bundling features built into Remix.

Conclusion:

Implementing CSS in Shopify Remix opens up a world of possibilities for customizing your online store.

Share the tutorial of implementing CSS in Shopify Remix with your friends and stay updated with us for more such informative blogs on Shopify Remix.

Happy Coding!