Shopify · May 22, 2023
How to Edit Shopify Theme Code (Liquid Basics)
Editing Shopify theme code means working safely in the theme editor's code view, understanding Liquid's tags, objects, and filters, and testing changes on a duplicate theme before going live. Here is a practical walkthrough for merchants and designers who need to make real edits without breaking the storefront.
By Polo Themes
Editing Shopify theme code comes down to three habits: always duplicate your theme before touching anything, edit inside the Liquid files under Edit Code rather than guessing at the visual editor's limits, and understand the handful of Liquid building blocks — objects, tags, and filters — well enough to read what a section is actually doing. Once those habits are in place, most storefront customizations are a short, safe edit rather than a risky gamble on your live store.
This guide walks through what Liquid is, where theme code actually lives, and how to make and test small edits confidently — whether you are adjusting a theme you bought, like our Optics or Wosa Shopify themes, or customizing Shopify's own free themes. It is written for merchants who are comfortable poking around settings but have not necessarily written Liquid before, and for designers who need a fast refresher on Shopify's specific conventions.
What Liquid Actually Is
Liquid is the templating language Shopify uses to turn theme files into the HTML your storefront actually renders. It was built by Shopify specifically for this purpose, and it is intentionally simpler than a general-purpose programming language — there is no arbitrary code execution, no database access, and no way to reach outside the store's own data. That constraint is a feature: it is part of why Shopify themes stay fast and secure even when merchants edit them directly.
A Liquid file is mostly plain HTML with three kinds of Liquid syntax mixed in:
- Objects, written as `{{ product.title }}`, output a piece of data — a product's title, a variant's price, a page's content.
- Tags, written as `{% if %}`, `{% for %}`, `{% assign %}`, control logic — conditionals, loops, and variables — and produce no visible output themselves.
- Filters, written after a pipe like `{{ product.price | money }}`, transform an object's output — formatting a price, upper-casing text, truncating a string.
If you can recognize those three shapes on sight, you can already read most of a theme's section and snippet files, even before you have memorized Shopify's specific object and filter names.
Where Theme Code Actually Lives
From your Shopify admin, go to Online Store > Themes, find the theme you want to edit, and choose Edit code from its menu (not Customize, which opens the drag-and-drop theme editor). Edit code opens a file browser with several folders, and knowing what each one does saves a lot of guessing:
- layout/ holds `theme.liquid`, the outer wrapper every page renders inside — header, footer, and the `<head>` tag live here or are included from here.
- templates/ defines what renders on each page type — product, collection, cart, page, and so on — usually by referencing sections rather than containing raw markup.
- sections/ holds the reusable, often merchant-customizable blocks (a hero banner, a featured collection grid, a product gallery) that templates assemble.
- snippets/ holds small, reusable pieces of Liquid meant to be included from templates or sections with `{% render %}`, similar to a function or partial.
- assets/ holds CSS, JavaScript, images, and fonts referenced by the theme.
- config/ holds `settings_schema.json`, which defines the options merchants see in the theme editor's sidebar, and `settings_data.json`, which stores the values currently chosen.
- locales/ holds translation strings for multi-language themes.
Most day-to-day edits — changing a label, adjusting spacing, tweaking how a price displays — happen in a single section or snippet file. You rarely need to touch `theme.liquid` itself unless you are changing something global, like adding a script to every page.
Step 1: Duplicate the Theme Before You Touch Anything
Before opening Edit Code, duplicate the theme from the Themes list — Shopify's menu option is literally called Duplicate. This gives you an unpublished copy you can edit freely, preview privately, and only publish once you are happy with it. If something breaks, your live storefront is untouched, and you can compare the broken file against the original published theme to see exactly what changed.
This single habit prevents the overwhelming majority of "I edited the live theme and now the site is broken" situations. It costs nothing and takes ten seconds, so treat it as a non-negotiable first step, not an optional precaution.
Step 2: Find the Right File
Once you are in the duplicate, the fastest way to find the right file is usually to view the live page, use your browser's inspector to identify a distinctive class name or piece of text near the element you want to change, and then search for that text across the theme's files using the search box at the top of the code editor's file list. Section names are also a strong hint — a file named `sections/main-product.liquid` is almost certainly what renders the product page's central content.
If you are working in a theme built around clearly named, single-purpose sections — as our Electronix and Medical themes are — this search usually takes seconds, because each section does one visible job and its file name reflects that. Themes with vague or deeply nested section names make this step slower, which is one reason section naming quality matters when choosing a theme in the first place.
Step 3: Read Before You Edit
Before changing anything, read the surrounding Liquid to understand what it is doing. A few patterns show up constantly and are worth recognizing on sight:
- `{% if product.available %}...{% endif %}` — conditional logic; the enclosed markup only renders when the condition is true.
- `{% for block in section.blocks %}...{% endfor %}` — a loop; this is how sections render a variable number of merchant-added blocks (like testimonials or FAQ items).
- `{% assign my_var = product.title | upcase %}` — creating a variable, here transformed with the `upcase` filter.
- `{% render 'snippet-name' %}` — including a snippet file inline, often passing it parameters.
- `{{ 'price' | t }}` — pulling a translated string from the theme's locale files rather than hardcoding text, common in themes built for multiple languages.
Making a small edit inside an `{% if %}` block versus editing the condition itself are very different changes — one alters what displays, the other alters when it displays. Confirming which one you actually want to change before editing avoids a common class of mistake where the edit looks fine in isolation but silently changes behavior somewhere else on the page.
Step 4: Make a Small, Isolated Edit
Change one thing at a time. If you want to adjust text, spacing, and a conditional all in the same file, make and preview each change separately rather than batching them — it is much faster to spot which specific line caused a problem when you have only changed one thing since the last working preview.
A few habits that keep edits safe:
- Keep an unedited copy of the file's content in a text editor before you start, so you can paste back a known-good version if needed.
- Match existing indentation and quote style rather than introducing a different formatting convention mid-file.
- When adding a new Liquid tag, always close it — an unclosed `{% if %}` or `{% for %}` will visibly break the rest of the page's rendering, often in a confusing way that looks unrelated to your edit.
- Prefer editing existing section settings over hardcoding values, when a setting already exists for what you want to change — it keeps the change compatible with the theme editor and with future updates.
Step 5: Preview and Test Before Publishing
Use the Preview option on your duplicate theme to view it as a real visitor would, on both desktop and mobile widths. Check the specific page you edited, but also check a couple of adjacent pages — a change to a shared snippet or to `theme.liquid` can affect templates you did not intend to touch. Test any interactive element you changed (an accordion, a variant picker, a filter) by actually clicking through it rather than just checking that it looks right statically, since Liquid changes can sometimes interact unexpectedly with the theme's JavaScript.
Only publish the duplicate once you are satisfied. Shopify keeps a theme version history you can view from a published theme's menu, which lets you compare or roll back to an earlier saved state if an issue surfaces after publishing — worth knowing about, though it should not be a substitute for testing on a duplicate first.
Common Beginner Mistakes to Avoid
- Editing the live theme directly. Always work on a duplicate; publish only when confident.
- Deleting a closing tag by accident. A missing `{% endif %}` or `{% endfor %}` can cascade into rendering errors across the whole page.
- Hardcoding values that already have a theme setting. This makes future customization through the theme editor confusing, since the setting will no longer reflect what actually displays.
- Ignoring mobile. A change that looks fine on a wide desktop preview can overflow or overlap on a small screen — always check both.
- Skipping a theme update because you edited core files. If you have modified section or template files directly, updating the theme later can overwrite your changes; note what you changed so you can reapply it after an update, or make targeted edits in a way that is easy to redo.
When to Stop Editing and Reach for a Different Theme
Small Liquid edits are a reasonable, low-risk way to adjust spacing, copy, and minor logic. But if you find yourself repeatedly fighting a theme's structure — restructuring how variants display, rebuilding a gallery, or rewriting large sections just to get baseline behavior you need — that is usually a signal the theme was not built for your category, not a signal that you need to write more Liquid. In that case it is often faster and more reliable to start from a theme built around your store's actual needs. Browsing our full Shopify themes catalog is a reasonable next step if you are finding that every customization requires a workaround.
Frequently Asked Questions
Do I need to know how to code to edit Shopify theme code?
Basic familiarity with HTML and CSS helps a lot, and understanding Liquid's core patterns — objects, tags, and filters — covers most of what you will encounter. You do not need general programming experience; Liquid is deliberately narrower and more predictable than a full language.
Will editing theme code void my Shopify support or break future updates?
Shopify support does not restrict direct code edits, but if you edit core section or template files and later apply a theme update, that update can overwrite your changes. Keep notes on what you changed so you can reapply edits, or make changes through theme settings where possible so they survive updates cleanly.
What is the difference between the Customize editor and Edit Code?
Customize opens the visual, drag-and-drop editor for arranging sections and adjusting settings the theme's developer exposed. Edit Code opens the raw Liquid, HTML, CSS, and JSON files directly, letting you change anything in the theme, including things with no corresponding setting in Customize.
Is it safe to edit a paid theme's code, like one from Polo Themes?
Yes — once purchased, the theme files are yours to edit like any other Shopify theme. Duplicate it first so you always have an unmodified copy to fall back on, and keep in mind that a future theme update from the developer may not automatically merge with files you have changed directly.