# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/storefront/customization/html-blocks-and-code-sections.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.