Skip to content

Add custom CSS or 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.

Check out Shopify's theme code customization tutorials.

Visit W3Schools for a quick CSS tutorial.

Tip — Create a backup

We recommend making your customizations on a unpublished version, to do this, go to Actions > Duplicate. create a backup

Adding 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 beyond what is available in the theme settings.

All overriding CSS styles should be added to your custom_styles.liquid file in your Snippets folder. This makes it easier to track and carry across customizations if you need to update your theme to a newer version.

add 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.

<!– 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.

  3. Add your custom CSS in between the <style> tags and save.

add cutom css example

Need additional help?

If you're wanting to make more complex customizations, you can consider hiring a Shopify Expert or a third party developer.

Read more about our recommendations for theme tweaks and customizations.

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