Part 1 covered the theme editor, which arranges what the theme already has. When you need something the theme does not have, you need its code, and the quickest way in is already in your admin.

Opening the code editor

  1. Duplicate the theme first (Online Store, then ··· and Duplicate). Never practise on the live theme.
  2. On the copy, open the ··· menu and choose Edit code.

You get a file tree on the left and an editor on the right. Saving a file saves it straight to that theme, so the duplicate really matters.

A two-minute tour of the folders

  • layout/: the frame around every page. theme.liquid holds the <head>, the header and footer groups and the main content slot.
  • templates/: one file per page type. Modern themes use JSON templates, which simply list sections and their settings.
  • sections/: the building blocks the theme editor shows. Each one is Liquid plus a {% schema %} that defines its settings.
  • blocks/: reusable theme blocks, in newer themes such as Horizon.
  • snippets/: small pieces of Liquid reused across sections, included with {% render %}.
  • assets/: CSS, JavaScript, images and fonts.
  • config/: settings_schema.json defines the theme settings, settings_data.json stores their values.
  • locales/: translation files, one per language.

Your first section, in five minutes

Say you want a short delivery note that the merchant can place anywhere and edit in the theme editor. Next to the sections folder, use the button to add a new file, name it delivery-note and replace the contents with:

<div class="delivery-note page-width">
  <p>{{ section.settings.text }}</p>
</div>

{% schema %}
{
  "name": "Delivery note",
  "settings": [
    { "type": "text", "id": "text", "label": "Text",
      "default": "Free delivery from CHF 50" }
  ],
  "presets": [ { "name": "Delivery note" } ]
}
{% endschema %}

The page-width class exists in Dawn; use your theme's own container class if it differs.

Save, open the theme editor, click Add section and Delivery note is there, with an editable text field. The presets entry is what makes it appear in that list. That pattern, Liquid for the output and a schema for the settings, is most of what custom theme work is.

Undoing a file you broke

The code editor keeps a short history per file, called the Timeline:

  1. Open the file and look at its Timeline.
  2. Click an entry to compare it with the current version.
  3. Right-click the entry, choose Restore contents, then Restore.

Three limits are worth knowing before you rely on it: it restores one file at a time, it cannot bring back a deleted file, and older versions eventually disappear. For anything bigger than a small fix, that is why the next two parts exist.

When to move on

The code editor is perfect for a small change or a quick fix. It gets uncomfortable when a change touches several files, when two people work on the same theme, or when you want to see the result before saving. That is where working locally with Shopify CLI comes in: part 3.

Further reading