Custom code

Featured links

1. Shopify documentation on extending your theme
2. Shopify documentation on the theme editor
3. Shopify Liquid documentation
4. Shopify Liquid documentation on the shop shipping policy
5. Shopify Liquid setting documentation
6. Shopify documentation on adding custom CSS to your theme
7. Shopify documentation on templates
8. Shopify documentation on theme support
9. Shopify documentation on apps
10. Shopify documentation on app blocks

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Extend Align with custom code

Align includes built-in theme settings for many common changes. When those settings do not meet your needs, you can extend your Align theme with custom HTML or Liquid, custom CSS, an app, or direct code edits.

Start with the Shopify theme editor to understand the settings available in your current Align theme. For platform guidance, see Shopify documentation on the theme editor

Add custom HTML or Liquid

Some themes include settings for adding HTML or Liquid within a template, section, or block. These settings can let you add supported custom content without directly editing theme code, which helps keep your theme eligible for updates.

Check the Align documentation before proceeding to confirm whether your theme includes a custom HTML or Liquid option. You might use a Custom Liquid section to:

1. Insert Liquid variables where they support your business, such as showing your shipping policy on a product page.
2. Add code required to integrate an app with your theme.

Liquid settings provide access to a limited set of Liquid objects and tags. See the Liquid setting documentation for supported options.

Add custom CSS

CSS controls how elements appear across your theme. Use Shopify’s custom CSS feature when you need styling changes beyond the available Align settings.

You can apply custom CSS across the theme or to a specific section within a template. This work requires familiarity with CSS and HTML. Before making changes, review Company XYZ’s Align documentation and support resources at Company XYZ support, as well as Shopify’s guidance on available theme support

Install an app

Apps can integrate with your Align theme in several ways:

1. App blocks

   Add app functionality where you need it, then customize or remove it in the theme editor. App blocks are available only with Online Store 2.0 themes; for vintage themes, check the app listing and documentation for compatibility.

2. App embeds

   Enable, disable, and customize app-provided overlays, floating elements, or background functionality through the theme editor.

3. Apps added to theme code

   Some apps add code directly to the theme. Depending on the app, you may manage it through the app settings or the theme editor. If your theme includes a Custom Liquid section, you may be able to add app code there instead of editing theme code directly.

When you publish a different theme, re-activate your apps in the new theme. They are not active by default.

Edit your theme code

Direct code edits allow detailed changes when the theme editor, custom CSS, Custom Liquid, and apps cannot meet your needs.

Caution

Editing theme code can make your Align theme ineligible for updates. Only use this option when you cannot make the required change through the theme editor.

For editing considerations and safeguards, see Shopify documentation on editing your theme with code

Edit theme code only if you are comfortable working with HTML and CSS and have a basic understanding of Liquid. For Align-specific guidance, start with Company XYZ support. Shopify Support can help with certain code customizations for eligible Shopify-owned free themes; see Shopify’s theme support guidance for that platform policy.

You can edit theme code in two ways:

1. Edit code directly in the Shopify admin
2. Work locally with development tools such as Shopify CLI and the Shopify GitHub integration

Usage notes

1. Start with theme settings. Use built-in Align options before moving to custom code or an app.
2. Use Custom Liquid carefully. Confirm that the required Liquid objects and tags are supported before adding content.
3. Check app compatibility. Review app documentation, especially when using a vintage theme.
4. Plan theme changes. Re-activate apps after publishing a new theme.
5. Protect update eligibility. Use direct code edits only when other customization options cannot achieve the required result.