The Custom Code feature lets you inject HTML, CSS, or JavaScript into the <head> or <body> of your Storefront's customer-facing pages. It's the mechanism you'd use to add tools like Google Analytics, a live chat widget, custom fonts, or SEO meta tags, and it's also how you can apply CSS to fine-tune your Storefront's appearance beyond what the built-in branding settings offer.
Header vs. footer — what goes where
Custom Code gives you two separate injection points, and choosing the right one matters.
Header (<head> section) is the right place for:
- Analytics and tracking scripts (Google Analytics, Google Tag Manager, Meta Pixel)
- Custom SEO meta tags
- CSS styles and custom fonts — putting these in the header ensures they apply before the page renders, preventing a flash of unstyled content
- Any code that needs to be available before the page is visible to the customer
Footer (just before </body>) is the right place for:
- Live chat widgets and support tools (Intercom, Zendesk, Tidio, etc.)
- Any script that should load after the page content — which is most scripts, since loading them last keeps your store fast for customers
When in doubt, use the footer for scripts. Scripts in the footer don't block page rendering, which means customers see your store faster. CSS, however, belongs in the header.
Before you start
Test in the PTE environment first. Custom code runs live on your store the moment you enable it. Paste and test your code in the Storefront test environment before touching your production store, this lets you catch errors without your customers seeing a broken page.
Start with the built-in branding settings. Before reaching for custom CSS, check what's already available under Settings > General. You can set your brand colour, upload a logo, add a favicon, and configure custom content without writing any code. Custom CSS is best used for adjustments the built-in settings can't make, not as a replacement for them.
Adding custom code
- Log in to Storefront Manager.
- Navigate to Settings → Advanced Settings → Custom Code.
- You'll see two sections: Header Code and Footer Code. Each has its own text field and an independent enable/disable toggle.
- Paste your code into the appropriate field, Header or Footer, based on the guidance above.
- Make sure the toggle for that section is set to Enabled.
- Click Save.
Your code is now live on your Storefront for all visitors.
Enabling and disabling code
Each section, Header and Footer, has its own toggle, so you can control them independently. This is useful in a few scenarios:
- Temporarily disable a script without losing it, for example, while troubleshooting a site issue, or when a third-party service is down.
- Save code but not activate it yet — paste your code, leave the toggle off, and enable it when you're ready.
When you disable a section, the code is preserved in the editor but completely removed from your live store. Re-enabling it makes it active again instantly.
Common use cases and examples
Customizing your Storefront's appearance with CSS
The Header field accepts <style> blocks, which means you can use CSS to change the look of your Storefront beyond what the built-in brand colour setting provides. This is useful if you want your Storefront to more closely match an existing website.
Paste a <style> block into the Header field. Here's an example covering the most common appearance adjustments:
<style>
/* =============================================
STOREFRONT APPEARANCE CUSTOMIZATION
Paste this into: Settings → Advanced Settings → Custom Code → Header
Test in the PTE environment before applying to production.
============================================= */
/* --- Button colour ---
Changes the primary action buttons (Search, Add to Cart, etc.)
Replace #1a56db with your brand's hex colour. */
.btn-primary,
button[type="submit"] {
background-color: #1a56db !important;
border-color: #1a56db !important;
}
.btn-primary:hover,
button[type="submit"]:hover {
background-color: #1648c0 !important;
border-color: #1648c0 !important;
}
/* --- Link colour ---
Changes hyperlink colours throughout the store. */
a {
color: #1a56db !important;
}
a:hover {
color: #1648c0 !important;
}
/* --- Custom font ---
First, add the Google Fonts <link> tag in a separate block above this one,
then reference the font family here. */
body {
font-family: 'Inter', sans-serif !important;
}
/* --- Background colour ---
Changes the page background from the default white. */
body {
background-color: #f9fafb !important;
}
/* --- Domain search bar ---
Targets the main search input on the storefront homepage. */
.domain-search-input {
border-radius: 8px !important;
border-color: #1a56db !important;
}
</style>Not a developer? Claude can write this for you. If CSS feels unfamiliar, Claude — Anthropic's AI assistant — is well-suited to generating custom CSS from plain English. Describe what you want in simple terms, for example, "OpenSRS Storefront supports a Custom Code feature. Write CSS for me that makes my Storefront look like my website." Claude will generate a ready-to-paste <style> block. You can paste it directly into the Header field, then test it in your PTE environment before going live. You don't need any coding knowledge to use it.
A few things to know about custom CSS:
- Use browser developer tools (F12 > Inspector) to identify the exact CSS class names you want to target on your live storefront. Class names may change between Storefront releases, so check after updates.
- !important is needed for most overrides because Storefront's own styles will otherwise take precedence.
- Small changes, such as a different button colour or font, are low risk. Larger layout changes can have unexpected side effects. Always test thoroughly in PTE first.
- CSS applied here affects the public-facing pages of your Storefront (search, checkout). The logged-in customer portal uses the standard Storefront interface and is styled separately.
Loading a custom font
To use a custom font from Google Fonts, add two things to the Header field: the font <link> tag and a <style> block referencing it.
<!-- Step 1: Load the font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
<!-- Step 2: Apply it -->
<style>
body {
font-family: 'Inter', sans-serif !important;
}
</style>Replace Inter with the name of any Google Font. Visit fonts.google.com to browse options and generate your <link> tag.
Google Analytics 4
Paste the GA4 script tag from your Google Analytics property into the Header field:
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>Replace G-XXXXXXXXXX with your actual Measurement ID from Google Analytics.
Google Tag Manager
Paste the GTM <script> snippet into the Header field. If GTM also provides a <noscript> snippet, paste that into the Footer field.
Live chat widget
Most chat tools (Intercom, Tidio, Zendesk, etc.) provide a JavaScript snippet. Paste it into the Footer field — these tools are designed to load after the page content and don't need to be in the header.
Important warnings
Errors in your code can break your Storefront. Unclosed tags, missing semicolons, or JavaScript errors can cause your store to display incorrectly or fail to load entirely. Always:
- Test in the PTE environment before enabling on production
- Validate your code before pasting — browser developer tools (F12) can catch syntax errors
- If your store breaks after adding custom code, disable the affected section immediately using the toggle, then fix your code before re-enabling
Only use code from trusted sources. Custom code runs with full access to your Storefront's pages. A malicious or compromised third-party script could affect your customers' experience. Only paste code from services you trust and have verified.
Custom code does not apply inside the logged-in customer area. The custom header is shown on public-facing pages of your Storefront (search, domain listings, checkout). Once a customer is logged in to their domain management portal, the standard Storefront interface is used — your custom header won't appear there. The custom footer code does apply in the logged-in area.
There is no hard character limit, but very large scripts may hit backend limits. If you need to load a large library, host it externally and reference it with a <script src="..."> tag rather than pasting the entire library inline.
Troubleshooting
My store looks broken after adding code
Disable the affected section (Header or Footer) using the toggle and save. This will immediately remove the custom code from your live store. Review and fix your code in the PTE environment before re-enabling.
My CSS changes aren't taking effect
Make sure your <style> block is in the Header field (not footer), the toggle is enabled, and you've saved. If it's still not working, open browser developer tools (F12 > Inspector), find the element you're trying to style, and check whether another rule is overriding yours — you may need to add !important to your CSS property.
My code is saved but not doing anything
Check that the toggle for the relevant section is set to Enabled and that you've clicked Save. If it's enabled and saved, check your browser's developer console (F12 > Console tab) for JavaScript errors that may be preventing the script from running.
I'm not sure if my analytics code is working
Use the browser Network tab (F12 > Network) to check whether the analytics request is being fired on page load. Most analytics tools also have their own debugging extensions (e.g. Google Tag Assistant for GA4) that make this easier.
Questions? Contact OpenSRS Support.
Was this article helpful? If not please submit a request here
How helpful was this article?
Thanks for your feedback!