Shopify CSS: How to Customize Your Store With Custom CSS Edits
May 26, 2022
Customizing your Shopify store is vital for creating a final product that looks like your brand and not just another cookie-cutter store with a popular theme.
Even if you use a premium Shopify theme, your basic customization options will be limited, and your store will bear a striking resemblance to any others that used that theme.
To make significant adjustments to your fonts and layouts, you’ll want to tweak your theme’s CSS files.
Unless you have some technical know-how, you may not understand how to add custom code to Shopify.
While it’s essential to let the experts handle adding custom CSS to your Shopify theme (and we do recommend leaving it to them), we’ll break down all things CSS so that you can better understand how to edit CSS on your Shopify store (and whether you should even bother).
First, let’s cover the basics of CSS, and then we can get into how you can use it in your store.
#cta-visual-pb#<cta-title>Customize your Shopify store the easy way<cta-title>Make your store look and feel as unique as your brand by customizing with the best page builder for Shopify.Start building for free
What is CSS?
CSS stands for Cascading Style Sheets. It is a coding language used to specify how hypertext markup language (HTML) elements are displayed on a website.
HTML is the hard-coded skeleton of all web pages, determining the essential structure of a page (headings, body content, images, video, etc). CSS works with HTML to build out how that structure appears to users (layouts, fonts, colors, spacing, etc).
So, a simple example of HTML could be:
#cta-paragraph-pb#<h1>I’m a heading!</h1>
On its own, this would display the phrase “I’m a heading!” in the H1 heading format.
The extent of its decoration would depend on the CSS styling defined in the stylesheet (a separate document called up by HTML to determine the style of elements).
The h1 element’s styling in the CSS stylesheet could look like this:
The above styling would make the HTML heading appear as plain 36-point black text. Not terribly exciting, I know.
That one line of CSS would dictate what every H1 on a page would look like.
CSS code structure
The “h1” in the above example of CSS code is referred to as a selector. It could be a paragraph tag (“p”) or a uniquely defined class (“.uniquely-defined-class”).
The selector is the CSS’s connection to the HTML code. So, the “h1” selector is defining the style for all <h1> tags in the HTML document.
Within the curly braces, you have your declarations. In this case, the declarations for the H1 heading are “color:black” and “font-size:36px”.
These declarations are made up of two parts: the property and the value. Color is a property, and black is the value of that property. Declarations determine how the HTML with be stylized.
When you have more than one declaration, as you often will, they must be separated by semicolons. A semicolon also must be used at the end of the declarations.
A note about CSS rules:
If, for some reason, a selector is used more than once in a CSS file, the selector further down the document will be used. Later code overrides older code. This is handy when you are editing a file.
Ways to customize your Shopify store
Before we get into how to edit Shopify CSS files, let’s first talk about the various options you have for customizing your Shopify store.
There are a few ways to customize how your Shopify store looks and feels after installing your ideal theme.
Shopify theme editor
Shopify makes it easy to customize your theme in the theme editor.
You can access it by going to Online Store > Themes, and clicking Customize on the theme you want to make changes to.
The theme editor allows you to make style changes to the overall theme—colors, fonts, button styles, etc—as well as to individual page templates.
With Online Store 2.0 themes, Shopify sections can be added, moved, and customized on any page template.
Shopify code editor
That said, the theme editor is limited in what you can change. That’s where the code editor comes in.
The code editor gives you access to all your theme’s liquid, CSS, and HTML files.
As changes you make to these files can affect the functionality of your theme, they should be made by a developer that knows what they are doing. Also, you should always back up your theme before editing anything.
We’ll be digging into the code editor for what we’re talking about today.
Shogun Page Builder
Finally, if you don’t want to mess with code but need something more powerful for customizing your Shopify store, you can use a page-building app that gives you more control over how page elements work in a drag and drop visual editor.
Shogun Page Builder is here for you when you need something powerful and aren’t interested in making code changes.
I’ll show you some examples of what it can do later on.
IMPORTANT: What to do before editing your Shopify CSS code
You ALWAYS need to duplicate your theme before customizing your Shopify theme in the code editor.
This creates a backup copy that you can revert back to if your CSS changes end up going awry.
To duplicate your theme, you’ll want to click Actions on the theme in question and select Duplicate from the dropdown menu.
Make sure you rename the backup to make it obvious what version you would be reverting back to—something like the date for a precise timestamp.
#cta-visual-pb#<cta-title>Worried about breaking your theme?<cta-title>Use Shogun Page Builder to customize your store without the threat of mucking up your store theme.Start building for free
How to access CSS files in the Shopify code editor
Accessing the Shopify code editor is simple. As always, you’ll start from your Shopify admin dashboard.
Step 1: Go to your Themes page
Navigate to Online Store > Themes. Find the theme you want to edit on the themes page and click Actions.
Step 2: Click Edit code
In the Actions dropdown menu, click on Edit code to get to the code editor.
Step 3: Find the Assets folder for CSS files
Once in the code editor, you’ll want to collapse the Templates folder (which is open by default). Below that, you’ll find the Assets folder. Expand it to reveal your theme’s CSS folder.
You’ll find a ton of CSS files titled for the components and sections they contain the styling for.
You can click on multiple files, and they’ll remain as tabs in your edit window to customize multiple files at once.
How to edit existing CSS on Shopify
You can make simple CSS edits on existing files in your Shopify theme.
To do so, you’ll want to find the CSS file you wish to make changes in. For the Dawn theme, the main CSS file is called base.css. It could also be called main.css or theme.css.
Step 1: Open the base.css file
Under Assets, find the base.css file and click to open. You’ll see it show up in the main editor screen, with a tab above so you don’t lose it when editing other files.
Step 2: Find the name of the element you want to edit
You may already know what elements you want to make changes to, but you can also do your research easily in your browser.
Just pull up your store in your browser, right-click the element you want to make changes to, and click Inspect.
By clicking on the element in the inspector window, you’ll see the CSS attributes already in use.
You can even make changes to the CSS (it won’t affect your actual site) to see how your updates would affect how your store looks.
By inspecting the element, you can find the element’s class or id that is used to define it in the CSS file.
Step 3: Find your element in the CSS file
With the CSS element name known, you can simply search your base.css file (it may also be called theme.css) to find what you want to make changes to.
You can search by pressing Control + F (for PCs) or Command + F (for Macs).
Step 4: Make your CSS edits and save
Once you’ve made the changes to your CSS element, simply click the green Save button in the upper right corner.
With that, you can click the Preview button to see the effect your changes had on the element in question.
How to create a new custom Shopify CSS file
Creating a new CSS file to host your custom CSS styles only takes a few steps.
Step 1: In the code editor, click “Add a new asset”
Under the Assets folder, click Add a new asset to create a custom CSS file.
Step 2: Upload an existing CSS file or start from blank
If you already have a CSS file ready to upload, you can simply select the file.
If you are starting from scratch, click the Create a blank file tab and name your CSS file. You can choose your file suffix here too, but updated themes now use the .css file extension.
Add your CSS code in the file if you chose to start from a blank file asset. Make sure your CSS code doesn’t have duplicated naming conventions from the base.css file.
Step 3: Go to theme.liquid in the Layout folder
Since you’ve created a new CSS file, it needs to be referenced in the theme file to actually work its magic on your store.
To add CSS to the Liquid file, go to the Layout folder and select the theme.liquid file.
Step 4: Add code for the custom.css stylesheet
Scroll down to where it calls up the base.css file (or search for “base.css”).
Copy the line of code for base.css and paste it below that line. Replace the filename with your own custom CSS filename. In our example, it would be:
In short, margins are the invisible external space between the edge of an element and everything else, whereas padding is the visible internal space between the edge of an element and the content within the element.
On Page Builder, these measurements are available on every element for complete customization control.
Many page elements will come already spaced appropriately, but you can tweak each to best fit your vision.
Editing font styles
Making your text look just right is so easy. Just click the text or heading element to see the customization options.
Change heading type, font family, font weight, font size, color, line height, letter spacing, and alignment.
Quickly make big changes like the background color of any particular section.
Save your brand’s color palette to access the right colors anytime you need them. Beyond colors, you can also add high-resolution images and full-width videos to create a rich experience for customers.
For image backgrounds, the parallax effect is a great way to introduce motion as shoppers scroll—great for a header.
Create custom CSS elements for your Shopify store
You can also create custom CSS elements on Page Builder to add to any page.
Custom elements are located in the Advanced section of the Page Builder dashboard. To create a new one, click the purple New Custom Element button.
Select CSS to start using the custom CSS editor. Once done, click Save and your new custom code can be found in your Custom Elements library.
Your custom elements will be accessible right from the drag and drop editor to add on any page.
Customize your Shopify store for an on-brand shopping experience
You should now have a clear understanding of how to go about customizing your Shopify CSS to upgrade your shopping experience.
There are tons of custom CSS changes you can make, but they’ll be unique to your store and your brand. Once you know the changes you want to make, you can know exactly how to customize your Shopify store with them.
If you’d rather go with a drag and drop editor for these visual updates, Shogun Page Builder is here to make it super easy to do that.
#cta-visual-pb#<cta-title>Customize your Shopify store to fit your brand<cta-title>Make your store look and feel as unique as your brand by customizing with the best page builder for Shopify.Start building for free
Sean is one of Shogun's tireless content marketers. When he isn't creating exciting ecommerce content, he's probably biking or at the park.