Custom code

Masthead is designed to be set up entirely in the theme editor, and most stores never need to touch its code. If you do want to change something the settings don't offer, this page explains the safe ways to do it, in order from least to most risky, and what theme support does and doesn't cover.

Before you change any code

1. Duplicate your theme. In your Shopify admin, go to Online Store, open the … menu beside Masthead and choose Duplicate. Make your changes on the copy, never on the live theme.
2. Check whether a setting already does it. Search these docs first. Colors, fonts, spacing, corner shapes, layouts and the wording of the theme can all be changed without code.
3. Keep a list of what you change, and where. You will need it when you update the theme.
4. Preview the copy on desktop and mobile, then publish it. If something goes wrong later, your original theme is still in your draft themes and can be published again in one click.

When to hire a Shopify Partner

Hire a professional for anything more than a small styling change: new features, changes to how the cart or product page work, integrations, or anything you could not undo yourself. Shopify Partners are developers and agencies who work with Shopify themes every day. You can find one, with reviews and price ranges, in the Shopify Partner Directory.

Give them the link to these docs, and ask them to keep their changes in as few files as possible and to document them. That keeps updates manageable.

Small style changes with custom CSS

Not covered by support. Safe to try: it can be removed at any time and does not change the theme's files.

Shopify's theme editor has a Custom CSS field on every section, and one for the whole theme in theme settings. CSS added there is stored with your settings, not in the theme's code, so it is carried over when you update the theme.

1. In the theme editor, select the section you want to change.
2. Scroll to the bottom of its settings and open Custom CSS.
3. Add your CSS and save. It applies to that section only.

For example, to give one section's heading extra space underneath:

h2 {
  margin-bottom: 2rem;
}

Before reaching for CSS to change a color or size, check the theme's own tools: every color comes from a color scheme, and heading and text blocks have a Use a custom size setting.

Adding a snippet with Custom Liquid

Not covered by support. Safe to try: remove the section or block and the page returns to normal.

When an app or service gives you a snippet of code to paste, put it in a Custom Liquid section, or a Custom Liquid block on the product page. The code lives in your template, not in the theme's files, so it is kept when you update. See Custom Liquid.

If an app offers an app block or an app embed, use that instead. It needs no code at all.

Changing wording without code

Covered by support: this is a setting, not code.

To change the theme's own wording, such as "Add to cart", go to Online Store, open the … menu beside Masthead and choose Edit default theme content. Your wording is kept when you update the theme.

Editing the theme's files

Not covered by support. Risky: a mistake can break a page, and changes can conflict with theme updates.

The theme's files are under Online Store > … > Edit code. If you or your developer edit them:

• Work on a duplicate, as described above.
• Change as little as possible, and prefer adding a new file to editing an existing one.
• Use the code editor's version history to undo a change to a file: open the file and choose an older version.
• Expect to check your changes at every theme update. Shopify carries code edits over where they don't conflict with the update; where they do, they have to be applied again by hand. See Updating the theme.

If something breaks after a code change and you can't find the cause, publish your untouched copy of the theme. That gets your store back to a working state while the problem is investigated.

What support can and can't do

• We can tell you whether a setting already does what you want, and how to use it.
• We can investigate a problem on an unmodified copy of the theme, and fix it if it is a bug in Masthead.
• We can't write custom code, or review or repair code that has been changed.
• If your theme has code changes, we may ask you to reproduce the problem on a fresh copy of Masthead first.

The full list is in Support policy.