Editing theme code

Most changes to Alpha Start don’t need code: sections, blocks and theme settings cover layouts, colors, fonts and content. If you still need something the settings don’t offer, read this page first.

Before you edit the code

• Changes to the theme code are not covered by support.
• Code changes are not carried over when you update the theme. A theme update adds the new version as a separate theme with your settings and content, but without your code edits. See Install the theme.

Duplicate the theme first

Always work on a copy, so your live store stays unchanged and you can go back.

1. In your Shopify admin, open Online Store → Themes.
2. Click … next to Alpha Start and choose Duplicate.
3. Click … next to the copy and choose Edit code.
4. When you’re done, preview the copy and publish it.

Keep a note of what you changed and in which files. You’ll need it to repeat the changes after a theme update.

Use Custom Liquid instead of editing files

Alpha Start has a Custom Liquid section and Custom Liquid blocks. They take Liquid, HTML or code snippets from apps and other services, and they are saved with your theme editor settings instead of in the theme files.

• Custom Liquid section: in the theme editor, click Add section → Custom Liquid on any page. Paste the code into Liquid code. The section also has Color scheme, Top padding and Bottom padding settings.
• Custom Liquid block: available in the Product, Featured product, Cart, Collection products, Search and Page sections. Click Add block → Custom Liquid in the section.

Info in the editor: “Add app snippets or other Liquid code to create advanced customizations”.

For features that apps provide, such as reviews or wishlists, use the app’s own blocks and embeds. See Apps.

Add custom CSS

Shopify’s theme editor has two Custom CSS fields for small style changes. They work in every theme and don’t change the theme files.

• For the whole store: in the theme editor, open Theme settings → Custom CSS. Up to 1,500 characters.
• For one section: click the section and scroll to the bottom of its settings to Custom CSS. The rules apply only to that section. Up to 500 characters.

Shopify limits what these fields accept. For example, @import is not allowed. See Shopify’s guide to custom CSS.

Note

Custom CSS relies on the class names in the theme code. A theme update can change them, so check your custom styles after you update.

Hire a developer

For larger changes, such as a new section or a change to how a page works, hire a developer who knows Shopify themes. You can find one in the Shopify Partner Directory.