Custom asset

Easily add custom Liquid, HTML, CSS, or JavaScript for advanced features and unique integrations, with clear organization and flexible placement in supported sections to enhance your storefront’s functionality and control.

Last updated About 2 months ago

Overview

The Custom asset block allows users to insert custom code—including Liquid, JavaScript, CSS, or HTML—directly into supported sections of their store. This block delivers exceptional flexibility for those looking to add unique features, complex integrations, or external assets not possible through standard customization options. Advanced users will enjoy total control, while intuitive labeling and organization help keep everything manageable within the theme editor.

⚠️ Important: The Custom asset block is highly versatile. Always ensure the code you add is secure, performant, and tested, as incorrect or unoptimized entries can impact site functionality, accessibility, or security.

Key components and functionality

The Custom asset block is focused on precision customization and effective organization. It includes defined areas for direct code input and for labeling each block, supporting streamlined management even as customizations grow more complex.

Main settings

These settings are where you enter the core content for the Custom asset block and optionally add clarity for future editing.

Code

Adds a custom CSS or JavaScript file into your template, e.g. to implement an external service. Include the full asset tag here, e.g. include the <script> tags for JavaScript or the <link> tags for CSS.

This field is empty by default, leaving you with a blank canvas for tailored solutions.

Available in sections

You can add the Custom asset block to these sections:

  1. Custom code

Usage notes

  1. Validate custom code thoroughly in a test environment before going live to protect the look and function of your store.

  2. Keep your code modular and scoped for easier troubleshooting and to minimize side effects.

  3. Limit custom code blocks per page where possible to ensure strong site performance.

  4. Always prioritize accessibility and clean coding principles—especially with interactive or script-heavy blocks.

The Custom asset block offers advanced flexibility. For the best results, maintain clear documentation, use accessible code practices, and always check for performance implications.