---
title: Add custom HTML and code to your site
shortDescription: Add custom HTML, CSS, or Liquid code to individual pages or your entire Fourthwall site for advanced personalization.
articleType: Tutorial
primaryTopic: add-custom-html-and-code-to-your-site
categories:
  - Store Design
  - Developer Tools
tags:
  - custom-html
  - custom-css
  - site-customization
  - embed-code
  - page-sections
  - header-footer-code
  - cookie-compliance
  - code-injection
  - custom-liquid
  - code-editor
tasks:
  - Add custom HTML to a specific page
  - Add custom CSS to a page section
  - Add custom code to your entire site
  - Enable header or footer code
  - Use Custom Liquid code in custom code sections
  - Manage cookie policy compliance for custom code
  - Verify your site with an external platform using header code
terms:
  - add custom html
  - embed code fourthwall
  - custom css site
  - edit html code
  - add spotify embed
  - site code injection
  - custom page section
  - header footer code
  - cookie policy custom code
  - custom liquid code
  - pinterest claim website
  - verification meta tag
  - google search console verify
labels:
  - code
  - html
  - edit-code
  - css
  - custom-code
  - liquid
contextString: Available on all plans. Accessible from Site design in the dashboard.
breadcrumbPath: "Getting started > Design my storefront > Add Custom HTML and Code to Your Site"
relatedModules:
  - name: memberships-custom-emoji
    route: /admin/dashboard/memberships/settings/custom-emoji
  - name: theme-editor-layout-home
    route: /admin/dashboard/store-design/layout/index
  - name: theme-editor-layout-checkout
    route: /admin/dashboard/store-design/layout/checkout
  - name: theme-editor-layout-coming-soon
    route: /admin/dashboard/store-design/layout/password
  - name: settings-domain
    route: /admin/dashboard/settings/domain/
path: getting-started/design-my-storefront/add-custom-html-and-code-to-your-site
last_updated: '2026-05-19'
---

# Add custom HTML and code to your site

You can add custom HTML, CSS, or Custom Liquid code to your Fourthwall site to personalize it beyond built-in theme options. For example, you might embed a Spotify player, a Twitter/X feed, a Google Maps location, or display dynamic product and collection data using Liquid objects.

There are two ways to add custom code: to a specific page on your site, or to your entire site.

## Add custom HTML or CSS to a specific page

To add a custom code section to one page, use the Layout editor in Site design.

1. Go to [**Site design** > **Layout**](https://my-shop.fourthwall.com/admin/dashboard/store-design/layout/index/?redirect) in your Fourthwall dashboard.
2. Choose a page from the drop-down menu (for example: **Home**, **Product pages**, or **Custom pages**).

[Image: Select a site page from the drop-down menu]

3. Scroll down and click **Add page section**.

[Image: Click on +Add page section]

4. Select **Custom HTML** to open the Code Editor.

[Image: Click on Custom HTML under Layout]

5. Enter your HTML or Custom Liquid code in the Code Editor. Optionally check the option to make the section full-width.

[Image: Enter code and make section full width optionally]

6. To style the section, check **Add custom CSS code** and enter your CSS.
7. After adding the section, drag and drop it to place it above or below other sections on the page.

## Custom Liquid code

Custom code sections in Site Designer support Custom Liquid, a templating language that renders server-side before the page reaches supporters. This lets you pull in live data from your shop and display it dynamically without client-side processing.

With Custom Liquid, you can access these dynamic objects:

- **products**. Display product details like titles, prices, images, and availability directly in your custom sections.
- **collections**. Show groups of products from your collections, including collection names and product lists.
- **memberships**. Reference membership tier names, perks, and other membership data in your custom code.

The Code Editor links to inline documentation listing all available Liquid objects and their properties.

## Code Editor features

The Code Editor in Site Designer includes several tools for writing and managing custom code:

- **Syntax validation**. The editor checks your code for errors before you publish, so you can catch mistakes before they go live.
- **Full-screen mode**. Expand the editor to fill your screen for a better view when working with longer code blocks.
- **Auto-closing tags and improved indentation**. Opening tags are automatically closed and code is indented properly as you type, keeping your markup clean and readable.
- **Inline documentation**. The editor links to documentation showing available Liquid objects and their properties, so you can reference them without leaving the editor.

## Add custom code to your entire site

To add code that applies to every page (such as site-wide CSS, header scripts, or footer scripts), use the Style editor.

1. Go to **Site design** > **Style** and scroll down, then click [**Edit HTML code**](https://my-shop.fourthwall.com/admin/dashboard/store-design/general/?active=advanced&redirect).

[Image: Scroll and click Edit HTML Code]

2. In the editor, you can:
   - Enable **header** or **footer code**
   - Add custom CSS that applies to your whole site

[Image: Enable header or footer code]

Only add custom code from trusted sources. Untrusted code may open you to security risks.

## Example: Display an animated logo in your header

The default header logo slot (see [Upload and edit your logo](/getting-started/design-my-storefront/upload-and-edit-logo)) processes uploaded images through Fourthwall's CDN, which converts every image to a static format. That conversion strips animation from GIFs, so an animated logo uploaded through the standard logo field will display as a still frame.

To show an animated logo, bypass the logo slot and render the GIF directly with header code:

1. Upload your animated GIF somewhere it can be served from a public URL (for example, a CDN, an image host, or an existing asset on your site).
2. Go to **Site design** > **Style** and scroll down, then click [**Edit HTML code**](https://my-shop.fourthwall.com/admin/dashboard/store-design/general/?active=advanced&redirect).
3. Enable **header code**.
4. Paste an `<img>` tag pointing to your GIF's direct URL, along with any CSS needed to position and size it.
5. Click **Save**.

Because the `<img>` tag loads the GIF directly, it skips the CDN pipeline that converts images to a static format and the animation plays as expected. You can hide or replace the default logo by adjusting your theme's header layout, covered in [Edit your store's header](/getting-started/design-my-storefront/edit-header).

## Verify your site with external platforms

Many platforms require you to add a verification meta tag to your site's `<head>` section to prove ownership. You can do this using header code.

Common platforms that use meta tag verification:

- **Pinterest** (to claim your website for Rich Pins and analytics)
- **Google Search Console** (to verify site ownership for search performance data)
- **Bing Webmaster Tools**
- **Other social platforms** that require HTML tag verification

To add a verification meta tag:

1. Copy the meta tag provided by the platform (for example, Pinterest gives you a tag like `<meta name="p:domain_verify" content="..." />`).
2. Go to **Site design** > **Style** and scroll down, then click [**Edit HTML code**](https://my-shop.fourthwall.com/admin/dashboard/store-design/general/?active=advanced&redirect).
3. Enable **header code** and paste the meta tag into the header code field.
4. Click **Save**.
5. Return to the platform and complete the verification process.

Each platform provides its own unique meta tag. Follow the platform's instructions to generate your specific tag before pasting it into your header code.

## Cookie policy compliance

If your custom code uses cookies, Fourthwall's cookie policy banner does NOT cover it. You are responsible for handling consent for any cookies your custom code sets.

To stay compliant:

- Update your custom code to respect the visitor's consent (stored in the `cc_cookie` value), or
- Remove the code and use Fourthwall's built-in **Apps** or the **Analytics** section instead.

For more details, see the [cookie policy help article](/manage-my-shop/shop-settings/cookie-policy-banner-cookie-settings).