Custom CSS and JavaScript

The Advanced category in the editor has two fields — Custom CSS and Custom JavaScript — that inject code into your published page.

It exists on Simple and Duo only. The five Pro templates have no Advanced category, so custom code means building on one of those two.

Premium featureCustom code is available on the Premium plan. Merchants on the grandfathered Legacy plan also have it, because they had it before tiered pricing existed.

Custom CSS

Anything you put here loads after the template’s own stylesheet, so your rules win where they are equally specific.

Common uses:

/* Tighten the heading on mobile */
@media (max-width: 640px) {
  h1 { font-size: 2rem; letter-spacing: -0.02em; }
}

/* Hide an element the template has no setting for */
.social-links { display: none; }

/* Nudge the signup form */
#contact_email { max-width: 22rem; }

To find the class or ID of something, open your page at https://your-store.myshopify.com/apps/coming-soon and inspect it in your browser’s developer tools.

Template updates can move thingsCustom CSS targets the markup as it exists today. When a template is updated, class names and structure can change, and a rule that pointed at something specific may stop matching. If your page looks wrong after an update, custom CSS is the first thing to check.

Custom JavaScript

Runs on your page after it loads. Use it for third-party snippets the built-in fields do not cover — session recording, a chat widget, an extra pixel, a consent banner.

// Example: fire an event when someone submits the signup form
document.getElementById('email_submit')?.addEventListener('click', function () {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({ event: 'prelaunch_signup' });
});

Facebook Pixel and Google Analytics have dedicated fields — use those rather than pasting their scripts here.

Elements you can hook onto

These IDs are stable across every template, because the app’s own code depends on them:

Element	ID
Email input	`contact_email`
Email submit button	`email_submit`
Password input	`storefront_password`
Password submit button	`storefront_password_submit`

What not to do

Do not rewrite the signup or password handlers. They talk to the app through specific endpoints. Replacing them with your own fetch breaks signup capture, conversion tracking, and A/B attribution. If you want signups going somewhere else, use third-party email instead.
Do not load a heavy framework. The page’s whole job is to load fast for someone who may never come back.
Do not put secrets here. Anything in these fields is visible to every visitor.

Custom code and A/B tests

Custom code is stored per template, so the two sides of an A/B test can have different code. If you are testing and getting inconsistent behaviour, check whether one side has code the other does not.

If something breaks

Clear both fields and save. That restores the template’s own behaviour immediately, and tells you whether your code was the cause.