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 Online Store 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 or theme.scss.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, and 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 what 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>

This CSS can help improve and customize your product variant options.

Thuy Nguyen
Thuy Nguyen

Thuy Nguyen is an online marketeer and professional blogger. When not creating content for YayCommerce, she can most often be found at some cafés in town, reading Graphic Guides, or enjoying a good laugh with The Big Bang Theory.

Related Posts