HTML Blocks & Code Sections

HTML Blocks and Code Sections allow you to extend your storefront pages with custom elements, styles, and scripts. These tools are ideal for embedding third-party widgets, custom layouts, or styling overrides directly within your storefront.

HTML Blocks

• Can be added to landing pages and other custom-created pages.

• Can be reordered and positioned anywhere within the page layout.

• Ideal for embedding widgets, forms, banners, or scripts that require precise placement.

Code Sections

• Used specifically on Product Detail and Cart pages.

• Automatically appear at the bottom of these pages and cannot be repositioned.

• Best suited for custom styling, tracking, or scripts that apply to product or cart behavior.

Key Features (Both Types)

• Support HTML, CSS, and JavaScript

• Allow inline code or references to external libraries using <script> or <link> tags

• Updates take effect immediately upon saving

Important Note on Script Timing

HTML Blocks and Code Sections are dynamically injected after the page has loaded. As a result:

• window.onload or similar load-based event handlers will not work within these blocks, because the window load event has already occurred before the block is inserted.

• If you need to run code after the block is rendered, use alternatives like setTimeout, MutationObserver, or custom DOM-ready checks.