How To Add Custom CSS Snippets to Shopify

So you got some guts for design?

And now you want to tweak things a little bit to bring up the look and feel that you’ve always wanted?

Hello creative Shopify merchant, you’ve reached the right place!

While there are various ways to achieve the web page layout as an apple of your eye, the basic steps remain the same.

Since the dawn of Shopify 2.0, this is the common way of adding custom CSS to your store, no matter which Shopify theme you are using.

Let’s dive in!

Log in as Shopify store admin

The Shopify admin login always looks like this: your-fancy-store-name.myshopify.com/admin

So make sure to reach this domain to input your email and password.

Navigate to your theme code

From your Shopify admin, go to Themes > Current theme > Actions > choose Edit code.

Edit-code-of-Shopify-theme

Then you will see the whole components of e-bricks and mortars that build up your online store. That’s quite a lot, right?

theme code file directory of Shopify

Don’t worry, if the next thing you add doesn’t work out, you can always roll back to the previous state.

By clicking on Older versions next to the code file, you will see all the edits that you’ve made.

How to find theme liquid file older versions

Add CSS snippets to theme.liquid

If you want to make changes to your product pages, you can add the CSS snippets to the theme.liquid file.

This helps add some preferences to the existing elements which your theme or activated apps define. Meaning here you can add some padding, margin, alignment tweaks to the existing product form, quantity selector, or variant picker on Shopify product pages.

So from the Layout directory, choose theme.liquid to open it in the file editor. Then, create <style> and </style> tags and add the CSS snippets between them.

Adding CSS snippets between the style and head tags

Keep in mind that this part should be placed within the <head> and </head>section. Overall, here’s how your new snippets might look like.

 <head>
    <style>

.product-form {
    flex-direction: column;
    align-items: flex-start;
}

.vario-variants:not(select) {
    justify-content: center;
}

.vario-variant {
    margin-right: 0px;
    width: calc(100% / 4);
}
    </style>
 </head>

Related Posts