Add custom CSS and edit template code

A few notes before you begin

Modifying themes using the Template Editor requires some basic knowledge of CSS, HTML and Liquid so be sure you’re comfortable with those areas before attempting any.

Before you begin editing template code, make sure you have a backup of your theme file so you can revert files if needed.

Add custom CSS

An easy way to make basic styling adjustments to your store is via CSS. These types of changes are best if you need to adjust the color, font, size, spacing or placement of elements that aren’t controllable by the Theme Settings panel.

Each theme contains a custom_styles.liquid file in your snippets folder. All your CSS edits should be added into this file. This makes it easier to track and carry across customizations if you need to update your theme to a newer version.

For any custom CSS, we recommend using comments to describe the edits. This will help you keep a record of what code what added and why. 

Simply add <!– and –> on either side of your comment, like so: 

	<!– This is a comment–>

Example

 "I want to make the Main Menu lowercase (remove caps)"

1. Identify the selector and declaration using the an Chrome's Inspector (or Firebug for Firefox, or similar). 

2.  Locate the Snippets > custom_styles.liquid file and add your custom CSS in between the <style> tags and save. 

If your version doesn't have a  custom_styles.liquid file, add change to the assets > style.css.liquid:

Advanced Customizations

If you're wanting to make more complex customizations, you can consider hiring a Shopify Expert or a third party developer. Our recommended partners for theme tweaks are Carson -  get in touch with them here.

Shopify Forums are also a great resource for advice from other storeowners on a wide range of topics.  

Still need help? Contact Us Contact Us