Everything You Should Know About Shopify Custom CSS

November 19, 2019

There are 70+ Shopify themes to choose from, and if you want to use a design element that your theme doesn’t offer, you can probably add it through one of the 2,900+ Shopify apps

But even with all the possible combinations of themes and plugins, you still might not be able to make your site look exactly the way you want it to look. You may need to edit the CSS code of your Shopify theme to achieve the style and layout that currently only exists in your head. 

CSS
Image Source: Pixabay

What Is CSS?

Cascading Style Sheets (CSS) is a computer language that’s used to specify how hypertext markup language (HTML) elements are displayed. 

HTML and CSS work together to build web pages. HTML determines the structure of the page (headings, body content, embedded images and video, etc.), while CSS determines the design (layout, font style, text color, paragraph spacing, etc.).

Here’s a sample piece of HTML:

<p>Hello!</p>

With this HTML code, the word “Hello!” will be displayed in paragraph text formatting on the page.

But what will the “Hello!” look like? The text could be big or small. It could be bold or italicized or both. It could be black, red, yellow, blue, green, or any other color. That’s where the CSS code comes in. 

Here’s a sample piece of CSS that could be used with the <p>“Hello!”</p> HTML: 

p  {  color:black;  font-size:12px;  }

In this example, “Hello!” (along with the rest of the paragraph text on the page) would be displayed in standard, professional-looking 12 point black text. 

Now let’s review the structure of CSS code. The “p” at the beginning of this CSS sample is known as a selector. The selector connects the CSS code to the HTML code that it’s styling (in CSS, “p” connects to the “<p>” HTML tag for paragraph text). 

The “color:black” and “font-size:12px” sections of the code are known as declarations. They are made up of two parts: properties, which go before the colon (“color” and “font-size”), and values, which go after the colon (“black” and “12px). 

Declarations determine how the HTML code will be stylized. They are wrapped in curly braces, and when there are multiple declarations used for the same selector, they must be separated by semicolons. 

One last detail about CSS: if there are two or more instances of the same selector being used in the same way in a CSS file, the selector used closest to the bottom of the file will replace the ones used above. This simple override rule comes in handy when you’re editing code. 

Safety First

Further down in this post, we’ll show you real-life applications of custom CSS code.

You should always duplicate your theme before you edit its code. This allows you to just go back and start from scratch whenever something goes wrong. 

If your theme is currently being used by a live site, that’s another reason to work out of a duplicate. You don’t want to risk disrupting your visitors, of course.

Duplicating a theme is easy. After using your Shopify login credentials to access your store, go to “Online Store” > “Themes”, then select the “Duplicate” option from the “Actions” dropdown menu next to the theme you want to duplicate. 

select the “Duplicate” option from the “Actions” dropdown menu

How to Access Your Theme’s CSS Code

Once you have the duplicate of your theme ready, select “Edit Code” from the “Actions” dropdown menu to open the Shopify source code editor. 

Select “Edit Code” from the “Actions” dropdown menu to open the Shopify source code editor

Next, open the CSS file. In Shopify’s Debut theme, it’s titled “theme.scss.liquid” and located in the “Assets” folder. In your theme, it may be called something slightly different. If you can’t find “theme.scss.liquid”, look for another file with “scss” or “css” in the title.

theme.scss.liquid

How to Use Shopify Custom CSS

Let’s take a look at some of the things you can do with Shopify custom CSS code, shall we?

We’ll start with something simple. Here’s what a page looks like by default in the Debut theme:

Default Debut theme

To change the color of paragraph text to red on this page, you could add the following code to the bottom of “theme.scss.liquid”:

p  {  color:red  }

Add the following code

And this is the result:

The result

It must be noted that editing the “theme.scss.liquid” file like this will change the style of all the pages on your site. In some cases, you might want to customize a specific page or set of pages rather than your whole site. 

To add page-specific CSS, you’ll need to create a new template for your custom design:

1. Open your Shopify source code and select “Templates” > “Add a new template”.

Open your Shopify source code and select “Templates” > “Add a new template”

2. Choose the type of page you want to customize and give your new template a name. Select “Create template“ to continue. 

Select “Create template“ to continue

3. Add the CSS code for red paragraph text to the bottom of your new template as you would to the “theme.scss.liquid” file - the only difference here is that you need to wrap the code in the <style> tag.

Add the CSS code for red paragraph text to the bottom of your new template

4. Go back to the dashboard and open the page you want to customize.

Go back to the dashboard and open the page you want to customize

5. In the “Template” section of the page, open the dropdown menu and select the template you just created. 

In the “Template” section of the page, open the dropdown menu and select the template you just created

After you save your changes, your page-specific custom CSS will be published. 

In this example, you could have used Shopify’s built-in rich text editor to change the color of your text. Then you wouldn’t have even needed to touch the code. 

Rich text editor

The rich text editor also allows you to change formatting (heading, blockquote, paragraph), style (bold, italicized, underlined), alignment (left, right, center), and more with just the click of a button.

But there are many things that the rich text editor and other standard theme settings can’t do, such as:

Add Shadows to Text

A shadow effect will surely draw some attention to your text. 

Insert the following code at the bottom of the “theme.scss.liquid” file or a custom template to add this design element:

h1 {  text-shadow: 2px 2px;  }

Insert the code

On the front end, the customized heading will look like this:

Customized heading

If you want to add the shadow effect to other formatting types, simply include each formatting type in the selector (separate each formatting type with a comma and space):

h1, h2 {  text-shadow: 2px 2px;  }

Formatting shadow

You can adjust the size and color of the shadow effect as well:

h1, h2 {  text-shadow: 4px 4px blue;  }

Size and color of the shadow effect

Add Columns to Pages

There’s nothing quite like columns for giving your page an old-school, print publishing feel. 

1. Add the following code to the bottom of your “theme.scss.liquid” file or custom template:

.one-half-column-left {
width:48%;
float:left;
}
.one-half-column-right {
width:48%;
float:right;
}
@media only screen and (max-width: 600px) {
.one-half-column-left, .one-half-column-right, 
.one-third-column, .one-third-column-last {
float:none;
width:100%;
margin-right:0;
}
}

Add the code

2. Open a page that you want to add columns to:

Open a page that you want to add columns to

3. Switch from the rich text editor to the HTML editor. 

Switch from the rich text editor to the HTML editor

4. Insert the following code into your post and add your content as instructed:

<div class="one-half-column-left">
<p>Left column goes here</p>
</div>
<div class="one-half-column-right">
<p>Right column content goes here.</p>
</div>
<br style="clear:both;" />

Insert the following code into your post and add your content as instructed

5. After you save your changes, your new layout will be published.

After you save your changes, your new layout will be published

Add Tabs to Product Descriptions

Tabs allow you to condense product information and give your pages a cleaner, less cluttered look.

1. Add the following code to your “theme.scss.liquid” file:

ul.shopify-tabs {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
ul.shopify-tabs > li{
    background: none;
    color: #333;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
}
ul.shopify-tabs > li.current{
    background: #f0f0f0;
    color: #333;
}
.shopify-tab-content{
    display: none;
    background: #f0f0f0;
    padding: 15px;
}
.shopify-tab-content.current{
    display: block;
}
Add the code

2. Open the “product.liquid” file in the “Templates” folder and add this code:

<script type="text/javascript">
  $(document).ready(function(){
    $('ul.shopify-tabs > li').click(function(){
      var tab_id = $(this).attr('data-tab');
      $(this).parent().find('li').removeClass('current');
      $('.shopify-tab-content').removeClass('current');
      $(this).addClass('current');
      $("#"+tab_id).addClass('current');
    })
  })
</script>
Add the code

3. Go back to your dashboard and open the product page you want to customize.

Go back to your dashboard and open the product page you want to customize

4. Switch from the rich text editor to the HTML editor.

Switch from the rich text editor to the HTML editor

5. Add the code below. Keep in mind that you can edit this code according to your needs - it’s just a starting point.

<ul class="shopify-tabs">
  <li class="current" data-tab="tab-description">Description</li>
  <li data-tab="tab-specs">Product Specs</li>
  <li data-tab="tab-delivery">Delivery</li>
  <li data-tab="tab-returns">Returns</li>
</ul>
<div id="tab-description" class="shopify-tab-content current">
  Description tab content
</div>
<div id="tab-specs" class="shopify-tab-content">
  Specs tab content
</div>
<div id="tab-delivery" class="shopify-tab-content">
  Delivery tab content
</div>
<div id="tab-returns" class="shopify-tab-content">
  Returns tab content
</div>

Add the code

6. After you save your changes, the front end will look like this:

Tabs front end

Resize Buttons and Other Elements

Perhaps the most useful application of Shopify custom CSS is for when there are tiny tweaks you want to make to the layout of your theme. Some problems are just too small and specific for anyone to make an app for - that’s when you’ll need to edit code manually. 

For example, in Debut’s blog post layout, you might prefer for the social media sharing buttons to be one-and-a-half times larger than they are by default:

1. Right-click on the button you want to customize and select “Inspect Element”. 

Right-click on the button you want to customize and select “Inspect Element”

2. A split screen window will pop up that displays the HTML code and CSS code of the page. If you hover your cursor over different parts of the code, you’ll see the elements that the code applies to highlighted on the page. 

We can use this method to determine that the social media sharing buttons belong to the “btn--small” class in the Shopify source code (this information will be useful a couple steps later in this process). 

A split screen window will pop up that displays the HTML code and CSS code of the page

3. The “Padding” section describes the amount of space (in pixels) between the text inside the button and the border of the button. The first number is the amount of space above and below the text, and the second number is the amount of space to either side of the text. 

We can change “8px 10px” to “12px 15px” to see what the buttons look like at one-and-a-half times its size.

You may want to double the size of the text as well to keep the button proportional. This can be done by editing the “font-size”:

Padding section

4. That was just a preview. To finalize these changes, open the “theme.scss.liquid” file and search for “btn--small”. Change the padding and font size to the same values you added in the preview.

Finalize changes

5. Save your changes to the code to publish your customized buttons. 

Save your changes to the code to publish your customized buttons

You can use this method of inspecting elements to identify and then edit almost everything on a page.

Shogun Offers Another Way to Customize Your Theme

Before you crack open the code of your theme, you might want to make sure that you can’t get what you’re looking for from an app. 

For example, the Shogun page builder app offers endless ways to stylize your site.

Here’s how it works: Shogun has a drag-and-drop interface and a library of elements. These elements include simple text and image blocks as well as advanced features like countdown timers and real-world maps. The arrangement of elements and design of each element is highly customizable, so you can quickly build whatever kind of page you want

Use Custom CSS Code to Improve Brand Recognition

According to one estimate, there are between 2 million to 3 million eCommerce companies in the world, with over 1 million in North America alone. 

That’s a lot of competition. When you have nearly too many competitors to count, what can you do to stand out?

With tools like Shopify custom CSS and the Shogun page builder, you'll be able to make your store truly one-of-a-kind and set yourself apart from the competition.

Share

Build Shopify pages that convert.

Create professional-quality pages for your ecommerce store with a powerful drag and drop page builder for Shopify designed with ecommerce teams and agencies in mind.

Adam Ritchie

Adam Ritchie is a writer based in Silver Spring, Maryland. He writes about ecommerce trends and best practices for Shogun. His previous clients include Groupon, Clutch and New Theory.