# 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

{% hint style="info" %}

#### 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.
  {% endhint %}