How to Add Custom CSS in Shopify The Right Way



Adding custom CSS, or even a custom CSS file to Shopify may seem like a daunting task, but overall it’s an easy task with endless opportunities to tweak and customize a Shopify theme.

Shopify provides an outstanding platform to really build a solid eCommerce business, but it also gives you the power to customize and edit CSS, thus creating an aesthetically pleasing store. However, with all that flexibility at your fingertips, you do need to pay close attention to the most common pitfalls, especially with paid Shopify themes.

Even with the best premium Shopify themes, you may void your warranty, or rather developer support if you choose to edit the CSS file. Not to mention, if you're awarded a free theme upgrade your CSS changes will may be transferred to the upgrade.

If you’re happy knowing that you may not get support and before you proceed, ensure you’ve duplicated your Shopify theme - a theme backup.

Always, work on the duplicated theme. You’ll be able to preview changes, and when the time is right, you simply make the duplicated theme the primary theme - the version in which users can browse.

It’s worth pointing out that your chosen theme may have the functionality already. So before editing any CSS file, ensure you cannot perform the same task in the theme editor.

Most importantly, keep your CSS clean. A clean codebase is a happy codebase.

If adding or editing CSS becomes too challenging you can opt to post a question on the Shopify Community forum or outsource. Be sure to choose an outsourcing platform where your money is protected.

Upwork Content Writing Upwork

To reiterate:

  • DO perform a backup
  • DO preview changes on the backup
  • DO test before publishing changes
  • DO check if the theme editor does not contain the functionality
  • DON’T assume you’ll still have developer support when making changes to a commercial theme
  • DON’T add inline CSS - it clutters the markup
  • DON’T add CSS to the head of the page

Now that we’ve covered the Do’s and Don’ts of adding CSS to your Shopify store, below we’ll demonstrate the steps to add and edit CSS in Shopify. With additional steps to demonstrate how to add a CSS file.

Shopify tutorials:

Again, and before moving on we’re going to assume that you’ve duplicated your Shopify theme and that you’re aware that we’re going to be working on the duplicated version.

How to Edit Existing CSS in Shopify

In the hypothetical sense, the UX team has approached us to say that 12% of our Shopify users are struggling with the "buy now" button. Users seem to be accidentally clicking the "add to cart" button due to the lack of whitespace between the buttons.

Our goal in the below example is to increase the space between the "add to cart" button and the "buy it now" button on the product pages using CSS.

Step 1: Online Store > Themes

Go to online store and then themes

Go to online store and then themes

Step 2: Edit Code

Locate and click "edit code" on the duplicated theme

Locate and click edit code on your duplicated theme

Step 3: Theme.css

Locate and click the "theme.css" file.

Locate and click the theme.css file

Step 4: Edit CSS

With the open CSS file, we're going to locate the existing element CSS rule and increase the bottom margin by 10px - from 10px to 20px.

Edit existing CSS

Step 5: Preview

When editing a global css, or any CSS for that matter, mistakes happen, you have to make sure you're happy with the results, and the CSS does not adversely affect, or conflict with any other styles.

Life is a little more stress free, if you've backed up your theme, and you're working within the backup.

Preview editing existing CSS changes

The above demonstrated how to edit existing CSS, but now we want to look at how to add custom CSS to an existing stylesheet.

How to Add Custom CSS in Shopify

Theme CSS can be complicated and difficult to digest, but adding custom CSS that acts as an override is acceptable in the right context. However, you really should take the time to understand the structure and hierarchy.

In this example, we'll add custom CSS to an existing HTML element to the theme.css file.

Custom CSS

Here we've added a width to the container using a new class added to the product description HTML element:

  • Class: "kanteneo-product-override" added to the product description element found on the product-template.liquid file
  • CSS rule consisting of a single property - "width:75%;"
Add class to an existing HTML element

Add styles to a new class in an existing css file

Adding custom CSS to an existing CSS file is fine to some degree, but it can get a little messy. So on the next step we'll cover how to add custom HTML, a new CSS file, and CSS rules.

How to Add a CSS file in Shopify

If you've it made this far, congratulations!

This step is a little more involved, but it's a relatively straightforward process. So we're going to look at how to add a CSS file in Shopify with HTML with styles!

The typical use case would be that you've added HTML to a page, or a section that needs some form of styling.

For the purpose of the demo we've added a "P" tag - paragraph, a nested "span" tag, and a nested "ahref" tag to the product page, this will be a generic paragraph across all products.

Create a personalized video HTML

Our new HTML needs a little "spice", we need to ensure that it's a focal point - I.E the users eyes are drawn to a CTA.

Ideally, and to understand an end-to-end process you should phyically follow the steps. Don't worry though! you should be working on your duplicated theme and you have the ability to delete all changes.

Step 1: Custom HTML

To truly understand what it means to add a CSS file, we need to add HTML right? We certainly don't want create a bunch of overrides, or pollute the theme.css file.

The mission is to extend, not modify.

In a user-story fashion, and hypothetically. A store owner needs the ability to offer a personalization service - A button that directs the user to an external, or internal page that collects data about the intention of the purchase.

If the intention of the purchase is a gift purchase, we want the user to click a button - again, hypothetically speaking.

Go to your product-template.liquid file and add the following HTML below your buy now, and/or add to cart buttons:

<p class="kanteneo-cta">Purchasing this as a gift? Personalize your purchase with a <span>video</span>. 
	Fill in a short form and we'll begin the process to create a personalized video.
	<a href="https://kanteneo.com" title="Create Personalized Video" target="_blank">Create Personalized Video</a>
</p>
Create a personalized video HTML

Step 2: Assets

Within the theme code editor, navigate to the assets and folder and click "Add a new asset".

Navigate to the assets and folder and click Add a new asset

Step 3: Upload or Create a CSS File

After clicking add new asset you'll be prompted to upload an existing css file, or create a new one.

For this demo, we'll create a new blank CSS file.

Upload an existing css file, or create a new one

Step 4: Add CSS Rules

Open the new CSS file, if not open already, and copy and paste the following CSS rules.

p.kanteneo-cta{
  width:75%;
}
p.kanteneo-cta span{
    color:#e8505b;
}
p.kanteneo-cta a{
    display:block;
    padding:10px;
    color:#ffffff;
    background-color:#e8505b;
    text-align:center;
    margin-top:20px;
    text-transform: uppercase;
}
p.kanteneo-cta a:hover{
    color:#ffffff;
}
                                


Don't forget to save!

Step 5: Reference the CSS

Great, we've added our CSS rules and HTML but the theme does not know that the CSS file exists yet, so therefore cannot render any styles.

On this step we'll need to reference the new CSS file in the head section in the theme.liquid file.

As this is a new CSS file with potential overrides, we'll need to conform to the hierarchy. Add the following code below the last CSS reference entry.

{{ 'kanteneo.css' | asset_url | stylesheet_tag }}

Replace "kanteneo.css" if you decided to use a different name for the CSS file.

Don't forget to save!

Reference the CSS

Step 6: Preview

If all has gone well, you should now see the custom HTML, and CSS rules applied to the HTML via the new CSS file.

Preview HTML and CSS changes

The clean up: If you've followed through with all tutorials, then you may have unwanted HTML/CSS. Traverse through the steps and delete.

The Takeaway

Having the ability to customize CSS is a blessing and a curse. Changing global CSS within your Shopify store can cause immense damage to your theme design. Everyone makes mistakes right?

Don’t forget to take all necessary steps to prevent damage, and don't obfuscate the design and user journey.

If the idea of changing the CSS becomes too much of a technical challenge, don’t be afraid to outsource. With thousands, upon thousands of Shopify experts around the world, you can be sure to find the right talent.

With the likes, of the Shopify Community, Upwork, and Freelancer, you have plenty to choose from, but as with anything in life, always perform a vetting process. Due diligence will only protect you from malicious and scrupulous scammers.

To summarize we've briefly covered:

  • How to edit existing CSS in Shopify
  • How to add custom CSS in Shopify
  • How to add a CSS file in Shopify

What next:





Author

avatar author

Terry Wingfield

A techy at heart, with over 10+ years of software engineering skills, and 5+ years experience in ecommerce, retention, and personalization.