Editing the theme files

Split has a lot of built-in settings in the Theme editor. However, there are times when these settings simply aren't enough. Then, if you know your way around HTML/CSS/Liquid, you can modify the theme on yourself, by editing your theme code to make changes.

Viewing the Edit HTML/CSS page

The  Edit HTML/CSS page lets you edit the code files that make up your theme.

  1. From your Shopify admin, click Online Store, and then click Themes.
  2. In the left sidebar, click the drop-down menu, then click Edit code:Click edit html css
  3. On the Edit HTML/CSS page, you can edit the existing files, and add new ones. The page shows a directory of theme files and an online code editor: Edit html css page example
  4. When you click a file in the list, it opens in the code editor. You can open and edit multiple files at once. 

Themes have several file categories:

  • Layout
    These files control the layout of your theme.
  • Templates
    These files control layouts for specific parts of your theme such as product or blog pages.
  • Snippets
    These files contain chunks of code that are used by other files in your theme.
  • Assets
    These files are images, fonts, scripts, and stylesheets.
  • Config
    These files contain settings and configuration data for your theme.
  • Locales
    These files contain language-specific pieces of text for your theme.
  • Sections
    These files control the layouts of sections in your theme.