Custom code

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on the custom code section
3. Company XYZ documentation on the custom asset block
4. Company XYZ documentation on the custom css block
5. Company XYZ documentation on the custom javascript block

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this section to place custom CSS, JavaScript, or full asset embeds directly in a template. It is best for advanced, page-specific changes such as style overrides, embedded services, or scripts that should load only in a particular area.

Custom code can affect layout, performance, accessibility, and interactive behavior. Test carefully on desktop and mobile before publishing changes.

Core settings

This section does not include visual section controls. Instead, you build it with blocks so CSS, JavaScript, and external asset includes can be kept separate and easier to manage. For a broader overview of theme editor structure, see Shopify documentation on sections and blocks

The section help text includes the canonical reference for Custom code. In practice, this section works best when you need template-level custom behavior instead of broader site-wide changes.

Supported block types

1. Custom asset
2. Custom CSS
3. Custom JavaScript

Block reference

Custom asset

Use this block when you need to paste a complete asset include, such as a stylesheet link or external script tag. It is the right choice for third-party services that provide a full embed or asset snippet rather than just raw CSS or JavaScript. For the block reference, see Custom asset block.

1. Use one block per service or file so updates and troubleshooting stay simple.
2. Keep this block for full asset includes rather than standalone CSS rules or JavaScript code.

Editor settings

You can set an editor title for the block to make it easier to identify in the sidebar. This is especially helpful when you add multiple services or files to the same section.

Custom CSS

Use this block to add CSS rules directly into the template without wrapping them in style tags. It is useful for small, targeted visual overrides that should apply only in this template context. For the block reference, see Custom CSS block.

Tip

Keep selectors tightly scoped so the CSS affects only the intended area and is easier to maintain after future theme updates.

1. Paste CSS rules only.
2. Prefer this block for focused overrides instead of large custom stylesheets.

Editor settings

You can rename the block in the editor to reflect its purpose, such as a spacing fix or landing page adjustment. Clear titles make later cleanup much easier.

Custom JavaScript

Use this block to add JavaScript directly into the template without script tags. It works well for embedded widgets, service initialization, or small interactive behaviors tied to the current template. For the block reference, see Custom JavaScript block.

Caution

A JavaScript error can interrupt other page features. If something stops working after a change, disable the newest script block first and retest.

1. Paste JavaScript only.
2. Separate unrelated scripts into different blocks so each change is easier to review or remove.

Editor settings

Use the editor title to label the script by service or purpose. This does not change the front end, but it makes ongoing maintenance much easier.

Standard section settings

This section does not include shared settings for layout, spacing, background, visibility, or width. Its behavior depends entirely on the blocks you add and the code placed inside them.

Usage notes

1. Match the block to the task. Use Custom CSS for style rules, Custom JavaScript for script logic, and Custom asset when you need to paste a full external include.
2. Keep changes modular. Split unrelated customizations into separate blocks so you can isolate problems quickly and remove one change without affecting others.
3. Name blocks clearly. Use descriptive editor titles so repeated snippets remain easy to identify later.
4. Expect block content to drive the result. Adding blocks can replace simple section-level content or extend it with additional embeds and behaviors, so review the finished template after each change.
5. Test key journeys. Check important page actions, responsive layouts, and embedded services after every code change.
6. Limit template-specific code. Add only what this template needs to reduce conflicts, maintenance overhead, and unnecessary page weight.