Custom code

Helpful links

1. https://help.shopify.com/en/manual/online-store/themes/customizing-themes/edit/theme-editor

2. https://help.shopify.com/en/manual/online-store/themes/theme-structure/templates

3. https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks

4. https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks#metafields-and-dynamic-sources

Reference videos

Overview

The Custom code section empowers you to add advanced scripts, styles, and asset markup directly to your storefront. This flexible section is essential for users who want to integrate third-party tools, apply custom design changes, or introduce unique site features using modular code blocks. Keeping your customizations organized in separate blocks makes ongoing updates and troubleshooting significantly easier.

⚠️ Important: Always test any code you add through Custom code to ensure a consistent storefront experience. Unchecked code can affect layout, performance, or accessibility.

Key components and functionality

The Custom code section is organized by code type and is structured for flexible, advanced customizations. Every block is specific to one category of code, which helps keep your edits modular, maintainable, and easy to manage.

Section introduction

The Custom code section increases your customization options by supporting advanced storefront edits not possible through default settings. By grouping custom code by code type, you can meet business goals for specialized design, integrations, or functional enhancements more easily and efficiently.

Supported block types

This section provides three distinct block types, each built for a specific kind of code. You can add, rearrange, or duplicate these as needed, based on your customization requirements.

1. Custom asset

   1. Use for embedding advanced HTML, SVG, or third-party asset code that does not belong in CSS or JavaScript blocks.

2. Custom CSS

   1. Use for entering custom CSS to override or supplement the store's visual styles.

3. Custom JavaScript

   1. Use for adding interactive site logic, analytics, or embedding external scripts.

Careful organization by block type helps you efficiently update or troubleshoot customizations in the future.

Custom asset

The Custom asset block is meant for embedding HTML snippets, SVG markup, or any assets that require custom markup but are not strictly styles or scripts. This is perfect for integrating special layouts, custom embeds, or unique on-page features.

1. Code

   1. Enter your custom HTML, SVG, or other asset markup here.

2. Editor title

   1. Assign a clear, descriptive name to easily recognize this block in the editor interface.

   2. Default: Custom asset

Custom CSS

The Custom CSS block provides a dedicated workspace for your own CSS rules. You may add styling for campaign banners, correct theme alignment issues, or apply layout tweaks that do not require direct theme file edits.

1. Code

   1. Input your custom CSS to affect site styles as needed.

2. Editor title

   1. Enter a descriptive title to keep multiple custom CSS blocks organized within the editor.

   2. Default: Custom CSS

Custom JavaScript

The Custom JavaScript block is for scripts that add interactivity, analytics support, or dynamic behaviors beyond the default theme capabilities. Exercise caution and only use script code that is trusted and thoroughly tested.

1. Code

   1. Paste your custom JavaScript here for site enhancements, integrations, or analytics.

2. Editor title

   1. Use a clear title for each JavaScript block to simplify future updates.

   2. Default: Custom JavaScript

Usage notes

🚨 Warning: Saved blocks take effect immediately and can significantly change user experience. Always validate and preview your site after making custom code changes.

1. Test every code block thoroughly before and after publishing changes.

   1. Responsive design should always be maintained using relative units, media queries, and flexible layouts where appropriate.

2. Keep code modular and focused—avoid unused or unnecessary scripts and styles for best performance and faster load times.

   1. Minimal code is easier to debug and manage.

3. Address accessibility concerns by ensuring contrast, keyboard navigation, and compatibility with assistive technologies.

4. Use descriptive Editor titles in all blocks to ensure easy navigation, editing, and troubleshooting later.

   1. Good naming conventions simplify hand-off and future team edits.

💡 Tip: After installing theme updates or making significant site changes, review your custom code blocks for potential compatibility issues or conflicts.