Editing theme code

Featured links

1. Shopify Partner Directory
2. Shopify documentation on theme structure and extending themes
3. Shopify developer documentation on Liquid
4. Shopify documentation on duplicating themes
5. Shopify documentation on theme support
6. Shopify documentation on uploading theme images
7. Shopify admin Themes
8. Shopify documentation on theme versions
9. Shopify documentation on customizing themes
10. Shopify documentation on finding theme support

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Edit Align theme code

Editing code lets you make detailed changes to your Align storefront on Shopify. Theme files can contain Liquid, HTML, CSS, JSON, and JavaScript.

Only edit code when you are comfortable with HTML and CSS and have a basic understanding of Liquid. Use the Align theme editor when it can achieve the change you need.

Caution

Theme updates can remove code changes that are incompatible with the updated copy. Keep a backup before you begin.

For help with Align-specific questions, start with Company XYZ support. If you need a custom feature and do not have experience with HTML, CSS, and JavaScript, Company XYZ support can help you identify the appropriate next step.

Before you customize Align

Complete these steps before making code changes:

1. Duplicate your theme to create a backup.

   You can discard changes and start again from this copy if needed.

2. Review the level of support available for your theme.

3. Learn the requirements and best practices for uploading images

Edit your theme code

1. From your Shopify admin, go to Online Store > Themes

2. Find the Align theme copy you want to change, click … > Edit code.

3. Select a file from the directory on the left to open it in the editor.

4. Make your changes. You can open and edit multiple files at once.

   Modified files display a dot next to their name, helping you track where you have made changes.

Roll back an older theme version

If you need to revert a change, you can roll back individual .liquid files to an earlier saved version.

Files in the Assets folder, including theme.scss.liquid and theme.js, do not keep previous edited versions. Keep a separate copy of changes to these files if you may need to recover them.

1. From your Shopify admin, go to Online Store > Themes

2. Find the Align theme copy you want to edit, click … to open the actions menu, and then select Edit code.

3. Under Templates, select a recently edited .liquid file.

4. Select Current version below the file name.

5. Use the drop-down menu to choose an earlier version.

   Selecting a datestamp restores that saved version.

6. Optional: Select Preview store to confirm that the issue is fixed.

Use Theme Check

Theme Check provides immediate feedback while you write code, so you can identify issues before they affect your live Align storefront.

It can identify issues such as:

• Parser-blocking scripts that can slow down a storefront.
• Translation-file inconsistencies, including missing translation keys or translations that do not match a locale file.
• Missing templates.

A red line appears beneath code with an identified error. Hover over the highlighted line to view its details.

Find theme customization tutorials

Theme code customization tutorials can guide you through changes to specific pages or features. Choose tutorials that match your theme architecture version; learn how to identify your theme architecture version

1. Online Store 2.0 theme customization

Get help with customizations

For Align-specific guidance, contact Company XYZ support. Company XYZ supports Align and can help you understand theme-related options before you make changes.

Shopify support resources also describe where to find support for your theme and additional resources for theme support. Use Shopify support for Shopify-admin, account, billing, or other platform-owned concerns.

Usage notes

1. Work from a backup. Duplicate your Align theme before every code customization session.
2. Use the right tool. Prefer the theme editor when it can provide the result without code changes.
3. Verify changes. Preview the store after editing or restoring a file to confirm the expected result.
4. Treat asset edits carefully. Keep your own copy of changes to files in Assets, since earlier edited versions are not available there.