Custom Code Edits to Your Shopify Themes (CSS) Made Easy

JasonH · ‎08-12-2024

Note: Customizing your CSS requires some familiarity with CSS and HTML. Before you customize your theme, make sure that you understand what level of support is available.

1. Introduction to CSS

Shopify is a powerful and flexible platform for e-commerce, allowing store owners to create visually appealing and functional online stores. While Shopify provides a wide array of themes to choose from, customizing these themes can make your store truly unique.

In this blog post, we’ve collaborated with @StephensWorld to walk you through making custom code edits to your Shopify theme, using CSS code. CSS (Cascading Style Sheets) is the language used to style HTML content. Making CSS changes is often the first step in customizing your Shopify theme, and can be used to change how existing elements are displayed.

2. Identifying What To Edit

The majority of Shopify themes are coded in such a way that you can usually identify either a ‘class’ or ‘id’ to apply code changes to (rather than needing to re-write entire sections from scratch).

To identify the class or id of the element you’re looking to edit, you can take advantage of Google Chrome’s built-

in ‘inspect’ functionality. When you’re on the front-end of your Shopify website (as a customer would see things), right-click on the element and select “inspect”. This will pull up the page’s code on the right-hand side of your page, so that you can dig deeper into what you’re working with.

If you hover over specific lines/blocks of code, it’ll highlight the respective content on the site, so that you know what the code is generating. Once you’ve found the code related to the content that you’re looking to edit, you’ll want to read the code to try and find either a ‘class’ or an ‘id’ value.

For example, you might see something like this:

class="text-center page-width page-width--narrow”

In the above example, each class is separated with a space, so there are actually 3 classes in play here:

text-center
page-width
page-width–narrow

These classes are often used in multiple parts of the site, so depending on how you want to make your code edits (and where you want them to apply to), you’ll want to use your best judgment when picking a class to apply your code changes to.

3. Working with Class or ID Values

Prefix: Depending on if you’re working with a class or id, you’re going to use a different prefix for the code:

Classes are prefixed with a period.
IDs are prefixed with a hashtag.

Use case:

Classes are reusable and can be applied to multiple elements. They are ideal for styling groups of elements with shared characteristics, such as buttons, text blocks, or form fields.
IDs are unique and should be applied to a single element. They are used for elements that need to be distinctly identified and styled, such as a specific header, footer, or a unique section of a page.

Rank: IDs have a higher specificity compared to classes. They will override class styles if both are applied to the same element.

The overall structure of your CSS change is going to require you to enter your class/id (with the respective prefix) and then a set of curly brackets “{}”.

Examples:

.class-name {

  /* code goes here */

}


#id-name {

  /* code goes here */
}

Once you have the structure, then you add the actual code for the changes you’re looking to make. The code follows the structure of ‘identifier’ + colon + ‘value’ + semicolon.

Example:

.class-name {

  identifier: value;

}

Alternatively, if you’re working with text, you can often apply the CSS changes without needing a class or ID, but rather just the type of text you’re working with. You can also apply the CSS to multiple elements, by separating them with commas.

Examples:

p {

  identifier: value;

}

h1, h2, h3 {

  identifier: value;

}

Lastly, you can also apply CSS changes to a specific object type, within a specific element. For example, paragraph text within a specific class:

.class-name p {
 
 identifier: value;

}

4. Common CSS Changes

Here are some common changes you might want to implement:

Changing Colors and Fonts

.class-name {

  background-color: #f1f1f1;

  color: #000000;

}

This code changes the background color of your element to a light gray and sets the font color to black.

Adjusting Padding and Margins

.class-name {

  margin-top: 10px;

  margin-bottom: 20px;

  margin-left: 20px;

  margin-right: 20px;

  padding-top: 10px;

  padding-bottom: 10px;

  padding-left: 10px;

  padding-right: 10px;

}

This snippet adds padding and margin to your element. Padding is used to add more space within the element, whereas margins add more space outside the element.

Customizing Buttons

.btn-class {

  background-color: #ff6600;

  color: #ffffff;

  border-radius: 5px;

  padding: 20px;

}

This code customizes the appearance of buttons, making them stand out with a new background color, text color, border radius, and padding.

Hiding Elements

.class-name {

  visibility: hidden;

}



.class-name {

  display: none;

}

The above is what I’ve seen as the most common code request on the Shopify forums – the ability to hide an element. You have two options for this, as shown in the example above. If you use the ‘visibility’ code, that will hide the element, while keeping the place it used to be empty. If you use the ‘display’ code, that will essentially remove the element, as well as the spacing for where it used to be.

5. Theme Editor vs. Direct Template Edits

When making custom code edits to your Shopify theme, you have two primary options: using the Theme Editor or directly editing the theme’s templates.

Theme Editor

Pros:

Easier to use (and find where to add the code)
Instant preview of changes
Can often be automatically transferred when upgrading theme versions

Cons:

Can only use basic CSS
Limits which classes/ids you can apply the code to

Direct Template Edits

Pros:

Full control over the code
Unlimited customization possibilities

Cons:

Requires code knowledge
Potential risk of breaking the theme if not done correctly
Will need to be re-coded if you upgrade your theme version

My personal preference/recommendation is to do the code edits within the theme editor, whenever possible. I typically only make code edits within the direct template files if I’m unable to achieve things within the theme editor.

Making code changes within the theme editor

Customizing your CSS requires some familiarity with CSS and HTML. Before you customize your theme, make sure that you understand what level of support is available.

Click into the section’s settings where the content you’re looking to change is located. At the bottom of the section’s settings, there should be a section for “Custom CSS” which you can add your code to.

Adding custom CSS to the theme as a whole:

Most themes allow this if you want to make the changes apply site-wide, instead of just to a specific section. Click into the theme’s settings (from the left-hand menu – the same area where you would edit the theme’s colors & typography settings), and you’ll find another CSS section there.

Making code changes directly to the template files:

We strongly recommend proceeding only when you are experienced with HTML and CSS. Always make a copy of your theme before making any changes. This way, if the outcomes are not as expected, you can easily revert to the duplicate copy.

To make your code changes directly to the template files, log into your Shopify admin > online store > themes > click the 3 dots next to your theme (“…”) > select “edit code” > click into “assets” from the left-hand menu > search for your theme’s main CSS file (usually named “main.css” or “theme.css” or “styles.css”.

Once you’ve found the main CSS file, you can scroll to the very bottom, and add your new CSS code to the bottom. Alternatively, you can search for existing CSS changes within the main theme file, and edit as intended.

6. When to Use Custom Page Templates

Custom page templates are useful when you need a page to have a unique layout or functionality that differs from the rest of your store. Here are some scenarios where custom page templates are beneficial:

Landing Pages for Promotions: Create a template with specific promotional content and design elements.
About Us or Contact Pages: Include unique layouts, maps, or forms that aren’t part of the default theme.
Blog Post Layouts: Use different templates for various types of blog content (e.g., interviews, tutorials, announcements).

Often, you can achieve what would otherwise require complex custom code by simply creating new page templates, which doesn’t require any new code.

You can learn more about creating custom page templates in the official Shopify help doc here: Shopify Help - Templates.

It essentially entails the following steps:

Create a new page template via the theme editor
Apply the template to the specific page/product/collection/blog within the Shopify admin
Assign the new template
Navigate to the page it’s been applied to within the theme editor
Add your sections/blocks (in the same way that you’d do for the homepage).

Anything you create within this custom template will only be used for the pages it’s applied to. This can be very handy if you have content you want to appear in only one place (ie. not for all pages, products, etc.).

7. Hiring Professionals vs. DIY

While many customizations can be done yourself, there are times when hiring a professional is the best option:

Complex Functionalities: If you need advanced features that would normally be provided by an app, but you want to explore all available options.
Design Overhauls: For significant changes to your site’s design that require a deep understanding of UX/UI principles. For example: changing how your navigation menus look/work (where making one change can break something else).
Creating Entirely New Sections/Blocks: When you’re already using something somewhere else on the site, but want a slightly different layout of functionality for another part of the site. For example: if you have a built-in block that only supports 3 columns, but you also want to be able to use it in 4 columns on another part of the site.

If you find yourself looking to make custom code changes that are beyond your skill set, then you can match your request with Shopify Partners on Partner Directory.

8. What’s Possible with Theme Customization

With the right skills and knowledge, almost anything is possible when it comes to customizing your Shopify theme. Some examples of advanced customizations include:

Dynamic Content: Display different content based on user behavior or preferences.
Advanced Filtering: Implement complex product filtering options for a better shopping experience.
Interactive Elements: Add animations, hover effects, or interactive maps to engage users.
Custom Checkout Pages: Tailor the checkout process to match your brand and improve conversions.

So far, we’ve focused on CSS code, as it's the most common type of change a store owner might make. Additionally, there are also HTML, JavaScript, and Liquid code:

HTML: Used for general structure and layout, such as ‘div’ blocks, hyperlinks, fonts, and buttons.
CSS: Styles the HTML, including colors, padding, borders, and visibility.
JavaScript: Adds functionality and interactivity, like animations, pop-ups, and dynamic content.
Liquid: References Shopify admin data with a single line of code, such as product prices and descriptions.

These four types of code work together to create your Shopify theme. HTML and CSS are beginner-friendly and intuitive, while JavaScript and Liquid are more advanced and complex.

There are countless online resources for making basic code changes. For example, searching “CSS font size” on Google will provide helpful guides. For Shopify-specific queries, include “Shopify” and your theme’s name in your search, like “symmetry theme Shopify change header color.” Often, the feature you need is already built into your theme, so check before committing to custom code.

9. Conclusion

Customizing your Shopify theme can make your online store stand out and provide a unique shopping experience for your customers. By starting with easy CSS changes, experimenting with small code snippets, and understanding when to seek professional help, you can enhance your store’s appearance and functionality.

Whether you choose to make edits via the Theme Editor or directly in the templates, the possibilities for customization are nearly endless. Happy coding!

Looking for more insights? Keep your eyes peeled for upcoming posts. Want to exchange thoughts with @StephensWorld? Head over to Stephen’s World and start your collaboration journey.