Custom JavaScript

Featured links

1. Shopify documentation on sections and blocks
2. Company XYZ documentation on the custom javascript block

Helpful videos

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use this block when you need to place custom JavaScript at a specific point in the page, such as for an embedded form, widget, or third-party service. It is best suited to small, targeted additions that are easier to manage when kept close to the content they affect. For a broader overview of how blocks work in the theme editor, see Shopify documentation on sections and blocks

Core settings

The code field is where you paste the JavaScript you want this block to run. Paste only the JavaScript itself, without surrounding script tags. For more guidance, see Custom JavaScript.

Enter JavaScript only. If you paste script tags along with the code, the block may not behave as expected.

Use this block only when a built-in feature cannot achieve the same result. Custom scripts can change how the page loads, behaves, or responds on different screen sizes, so test carefully after every update.

Caution

Third-party or untested code can affect page speed, accessibility, layout stability, and customer interactions.

Standard block settings

Editor settings

These settings help you organize the block inside the editor. Use the editor title to give each custom code block a clear internal label, especially if you use more than one on the same template.

A descriptive title makes maintenance easier later. Name the block by its purpose or placement, such as newsletter form, size guide widget, or product page tracking.

Usage notes

1. Keep each block focused. Use one block for one task so it is easier to test, troubleshoot, and remove if needed.
2. Paste code cleanly. Remove any surrounding script tags before saving so the block receives only the JavaScript content.
3. Name blocks clearly. Set an editor title that reflects the script’s purpose or location when multiple custom code blocks are in use.
4. Test on real pages. Check loading, styling, and interaction on desktop and mobile after adding or changing code.
5. Use custom code selectively. Choose this block when you need precise behavior that standard theme settings cannot provide.