---
articleType: Reference
breadcrumbPath: Getting started > Design my storefront
categories:
- Store Design
- Integrations
- Developer Tools
contextString: Available on all Fourthwall plans. Accessed via the site designer in
  the creator dashboard.
labels:
- site-design-customizations
- external-integrations
- add-scripts
last_updated: '2025-09-03'
path: getting-started/design-my-storefront/add-custom-html-css-and-third-party-scripts-to-your-fourthwall-site
primaryTopic: custom-site-code
relatedModules:
- name: theme-editor-layout-checkout
  route: /admin/dashboard/store-design/layout/checkout
- name: theme-editor-pages
  route: /admin/dashboard/store-design/pages/
- name: theme-editor-layout-home
  route: /admin/dashboard/store-design/layout/index
- name: theme-editor-layout-memberships-perks
  route: /admin/dashboard/store-design/layout/memberships_perks
- name: theme-editor-layout-coming-soon
  route: /admin/dashboard/store-design/layout/password
shortDescription: Fourthwall supports custom HTML, CSS, and third-party scripts added
  either to individual pages or site-wide via the Style > Edit Code (Advanced) editor.
tags:
- custom-code
- html-editor
- css-styling
- third-party-scripts
- site-customization
- analytics-tracking
- widget-embed
- meta-pixel
- google-analytics
- klaviyo-integration
tasks:
- add custom HTML to a page
- embed third-party widget
- install analytics tracking script
- apply custom CSS
- add site-wide script
terms:
- custom html
- custom css
- add script
- third party scripts
- Google Analytics
- Meta Pixel
- embed code
- chat widget
- Klaviyo
- header footer script
- iframe
- advanced design
title: Add custom HTML, CSS, and third-party scripts to your Fourthwall site
zendeskArticleId: '40576879574683'
---

# Add Custom HTML, CSS, and Third-Party Scripts to your Fourthwall Site

Fourthwall allows you to add custom HTML, CSS, and third-party scripts to your storefront — either on a single page or across your entire site. This is the method for installing analytics tools like Google Analytics or Meta Pixel, embedding chat widgets, adding iframes, and applying advanced CSS beyond the built-in style controls.

## Two ways to add custom code

### Page-specific custom code

Add custom code to a single page using a Custom HTML section in the Layout editor.

- Navigate to **Site design** > **Layout**, select the page you want to edit, and click **Add page section**.
- Choose **Custom HTML** from the section list.
- Paste your HTML, embed code, or `<style>` block into the editor.
- Click **Save**.

This approach is best for page-scoped embeds such as a Spotify player, Google Maps widget, a specific call-to-action block, or CSS that should apply only to that page.

### Site-wide custom code

Add global CSS or scripts that apply to every page on your site via the advanced code editor.

- Navigate to **Site design** > **Style** > **Edit Code (Advanced)**.
- Add `<style>` blocks for CSS or `<script>` blocks for JavaScript in the header or footer sections.
- Click **Save**.

This is the correct location for analytics scripts (Google Analytics, Meta Pixel), live chat widgets (e.g., Intercom, Tidio), and any CSS that should apply globally.

For a step-by-step walkthrough, see [How to Add HTML and Unique Code to Your Site](/getting-started/design-my-storefront/add-custom-html-and-code-to-your-site).

## Supported third-party integrations via custom code

Many popular services provide embed snippets that can be pasted directly into a Custom HTML section or the site-wide header/footer editor:

### Analytics and tracking
- **Google Analytics** — Paste the GA4 global site tag (`gtag.js`) into the site-wide header.
- **Meta Pixel** — Paste the pixel base code into the site-wide header. For a Fourthwall-native setup, see [Setting Up Meta Pixel for Retargeting Ads](/manage-my-shop/apps-features-and-integrations/set-up-meta-pixel).

### Marketing and email tools
- **Klaviyo** — Paste the Klaviyo JavaScript snippet into the site-wide header to enable forms and tracking.
- **Beehiiv / Kit / Mailchimp** — Embed newsletter signup forms via Custom HTML sections on any page.

### Engagement and social
- **YouTube** — Use the standard YouTube iframe embed in a Custom HTML section.
- **Twitter/X** — Paste the Twitter widget script and embed code into a Custom HTML section.

### Support and live chat
- **Chat widgets** (e.g., Intercom, Tidio, Crisp) — Paste the provider's JavaScript snippet into the site-wide footer script area.

Always check the provider's documentation for the exact embed snippet. Most services provide a single code block you paste directly.

## Performance and compliance considerations

- **Performance**. Each additional script increases page load time. Add only the scripts you actively use. Consolidate tag management into a single tool (e.g., Google Tag Manager) where possible.
- **Cookie consent**. The Fourthwall cookie consent banner does NOT automatically control third-party scripts. If your embedded script uses cookies or collects personal data, you are responsible for ensuring it respects visitor consent under applicable regulations (GDPR, CCPA). Review the [Cookie Policy Banner settings](/manage-my-shop/shop-settings/cookie-policy-banner-cookie-settings) for context.
- **Support scope**. Fourthwall Support cannot debug third-party scripts. If an embedded widget fails to load, contact the provider directly.
- **Security**. Only paste code from trusted, official sources. Arbitrary scripts from unknown sources can compromise your site and visitor data.

## Troubleshooting & Common Issues

**Problem:** Script added to the site-wide header is not firing on all pages.
**Solution:** Confirm the script is placed in the global header section under **Style** > **Edit Code (Advanced)**, not in a page-specific Custom HTML section. Page-specific sections only run on that page.

**Problem:** Custom CSS applied in the advanced editor is being overridden by theme styles.
**Solution:** You may need to increase specificity using more precise CSS selectors. Avoid using `!important` broadly, as it can break other theme styles unexpectedly.

**Problem:** Embedded iframe is not displaying on the page.
**Solution:** Some providers block iframe embedding on external domains. Check whether the service requires you to allowlist your domain. Also confirm your Custom HTML section is saved and not hidden.