Editing theme code

Most of what merchants want to change in this theme is a setting. Before you open any code, check Theme settings, the colour schemes, and the section's own page under Components — the change you have in mind is very often a toggle somebody already built.

When it genuinely is code, one rule comes first.

Duplicate your theme before you edit any code.

Never edit the theme that is serving your storefront. Duplicate it, edit the copy, preview the copy, and publish the copy only when you are happy with it. Customers keep seeing the working store the whole time, and a mistake costs you nothing but the copy.

How to duplicate your theme

1. In your Shopify admin, go to Online Store › Themes.
2. Find your live theme under Current theme.
3. Open the … menu and choose Duplicate. Shopify makes a full copy, including every setting.
4. The copy appears under Theme library, named Copy of …. Rename it to something you will recognise in a month — Uisce — rounded buttons, not Copy of Copy of Uisce.
5. Edit the copy. Use Preview to check it, on a phone as well as a desktop.
6. When it is right, use Publish on the copy. The previous theme stays in your library, so publishing it again is your undo.

TIP

A duplicate is also the cheapest way to try something. If it does not work out, delete the copy — your live store never saw it.

The three places code can go

They are not equally risky, and it is worth knowing which one you are in.

Where	What it is	Survives a theme update?
Custom CSS setting	A CSS box in theme settings, and one on every section. Styling only. See Custom CSS.	Yes — it is a setting, so an update carries it across. The class names it targets can change, so re-check it after an update.
Custom Liquid section	A section whose content is Liquid or HTML you write. See Custom Liquid.	Yes — same reason. An error here breaks the page it sits on, so preview before publishing.
Edit code	Shopify's theme code editor (Online Store › Themes › … › Edit code) — the theme's own Liquid, CSS and JavaScript files.	No. Updating the theme replaces those files and your edits go with them.

The order above is also the order to try them in. Reach for the code editor only when the first two genuinely cannot do the job.

What stays supported after you edit

We support the theme as it ships, and every setting in it — that support does not lapse because you added some CSS.

You did this	Supported?
Changed settings, added sections, wrote Custom CSS	Yes. Ask us anything, including whether a setting can do what you want.
Added Custom Liquid or edited theme files	The theme is. Your code is not — we cannot debug, maintain, or update code we did not write.
Edited theme files and something broke	Yes, to a point. We will help you get back to a working theme. That answer is usually "publish your unedited copy".
Want a customization built	Not something we build to order — hire a Shopify Partner.

The tutorials in these docs are written against the theme as shipped. If you have edited theme files, a tutorial may no longer match what you see, and that is not a defect.

Hire a Shopify Partner

If you are not comfortable writing code — or you are, but you would rather the work were somebody's job than your evening — we suggest you hire a Shopify Partner. Partners are independent agencies and freelancers who build and customize Shopify storefronts for a living, and a small theme customization is routine work for them.

• Browse the Shopify Partner Directory and filter by Store customization or Theme development.
• Tell them which theme you run — Uisce, Gaoth, Talamh, Tine or Neart — and send them a link to the relevant page in these docs. Written docs shorten a quote considerably.
• Ask them to work on a duplicate and hand you back a published theme plus the copy, so you keep the same undo you would have had yourself.

A Partner is also the right answer for anything that is not really a theme question: a custom app, a data migration, a checkout extension, or an integration with a system you already run.

Before you publish an edited theme

Whatever you changed, walk this list on the duplicate before publishing:

• A product page, a collection page, the cart and search. These four cover most of what a customer touches.
• A phone. Use the theme editor's device preview, or open the preview link on your own phone.
• Dark mode, if you have it enabled — see Dark mode.
• Your other language, if you sell in more than one — see Translations.
• Keyboard only. Tab through the header, a product page and the cart. If focus disappears, something you added is hiding it.

If something goes wrong

1. Publish your unedited theme again. It is still in Theme library. This is why you duplicated.
2. Work out what broke on the copy, at your own pace, with the store safely back on the original.
3. If you are stuck, send us a support request. Tell us what you changed and attach a screenshot — there is a file upload on the form.