Editing theme code

Easily customize your store’s design by editing code for layouts, styles, and templates, but always back up your theme and use best practices to keep your site secure and running smoothly.

Last updated 4 months ago

Helpful links

Overview

With Editing theme code, you can make detailed changes to your store and unlock a truly tailored design. Our modern themes use Liquid — a flexible templating language — in combination with HTML, CSS, JSON, and JavaScript. You should be comfortable with these languages before making adjustments to your theme’s code.

🚧 Caution: If your changes are not compatible with theme updates, your modifications may be removed when updates are applied. Only edit your theme code if you cannot accomplish your goals using the theme editor or apps.

💡 Tip: If you want to add advanced features but do not have experience with HTML, CSS, or JavaScript, consider working with a professional developer.

Prepare before customizing your theme

Getting prepared before you start editing helps protect your store and prevents accidental data loss. Always approach theme editing with care.

Duplicate your theme to create a backup.
- A backup ensures you can easily restore your previous setup if necessary.
Review the support options available for your theme.
- Knowing your options can save time if you need expert help.
Learn about image requirements and best practices.
- Following image guidelines ensures your store always appears professional and visually appealing.

How to edit your theme code

The code editor allows you to modify your theme’s layout, styles, templates, and scripts directly. This unlocks a new level of flexibility for your storefront.

In your admin, go to Online Store and select Themes.
Click the ... button next to your chosen theme and select Edit code.

Your theme files will be listed on the left, with a code editing workspace on the right. You can open and work on multiple files at once. Any file you edit will display a dot next to its name.

Revert to a previous version

If you make a mistake, you can restore earlier versions of .liquid files and undo unwanted changes.

📝 Note: Files in the Assets section, such as theme.scss.liquid and theme.js, do not have version history. For those, you may need to reach out for theme support or consult a developer.

To revert changes:

Go to Online Store > Themes in your admin.
Find your theme, click ..., and choose Edit code.
In the Templates section, select the .liquid file you want to restore.
Click Current version at the top of the editor.
Use the dropdown to select a previous version by date and time, then click to restore it.
Optional: Click Preview store to check if your issue is resolved.

Using Theme Check

The code editor includes Theme Check — a tool that provides instant feedback and helps you avoid common errors as you edit.

Theme Check highlights issues like:

Scripts that could slow down your storefront.
Problems with translation files, such as missing keys or inconsistencies.
Missing templates.

Problematic code will have a red underline. Hover over the issue to get more information.

Getting support for customizations

If you encounter challenges or need expert advice, our support team is here to help.

⚠️ Important: Code customizations can affect your store’s performance and appearance. Always create a theme backup before making any major edits. If in doubt, reach out to support or consult a developer for assistance.