How to set up a Styles and Javascript Experience

A Styles & JavaScript experience injects your own CSS and JavaScript for a chosen group of visitors, so you can find out whether a change lifts conversion before you commit it to your theme.

CSS lets you hide buttons or text, change layouts and spacing, swap backgrounds, or change your color palette and fonts. JavaScript lets you pop up messages, change button behavior, send information elsewhere, and a good deal more. Nothing you do here touches your live theme, and nothing needs a developer to deploy it.

You build the change once, then choose how it runs.

You don't always need a Styles & JavaScript experience to write CSS. Every experience carries the same Styles & JavaScript editor, whichever type you picked. Restyling the price block during a Pricing experience, or the shipping row during a Shipping experience, belongs inside that experience rather than in a second one running alongside it. Build a Styles & JavaScript experience when the code is the change you're testing.

1. Pick the experience type

On the Content page, click New Content Experience and choose Styles & JavaScript.

2. Choose how it runs

Intelligems asks how you want to run the experience.

Choice	What happens
Run a Test	Visitors are split between groups, each group gets its own code, and results show which version lifts conversion and profit per visitor.
Create a Personalization	Your code shows to everyone who matches your targeting, with no group held back for comparison.

If you're not sure, start with a test. You can roll the winner out later.

3. Name it, if you want to

Intelligems names the experience for you from the type and the date, like Styles & JavaScript Test · Aug 6. You don't have to change it.

It's worth changing anyway. The name is internal, and tests can stay live for weeks, so a name that says what the code does saves your future self the guesswork.

1. Hover the experience name at the top of the page.

2. Click the pencil.

3. Enter a Name, and a Description if it helps.

4. Click Confirm.

4. Set up your test groups

Running a Personalization? Skip groups entirely. You're writing one set of code for your targeted audience.

For a test, the Test Groups tab starts you with a Control Group and one variant, split 50/50. The Control Group gets no injected code, so it sees your site as it is today.

• Click + to add another group, one per version of the code you want to compare.

• Click the pencil next to a group name to rename it.

• Drag the slider to change how traffic divides.

The more groups you add, the longer the test takes to reach statistical significance.

5. Write your CSS and JavaScript

Open the Modifications tab.

In a test, the Styles & JavaScript section is at the bottom. Use the dropdown at the top to pick which test group you're editing. Each group gets its own code.

In a personalization, click + Add modification, choose Styles & JavaScript, then Add modification again. There's no group dropdown, because everyone who matches your targeting gets the same code.

CSS Styles

Start on the CSS Styles tab. To style an element you need its classname, which you can find with your browser's inspector.

Not comfortable writing CSS? Click Generate with AI, describe the change you want in plain English, and Intelligems writes it for you. You can edit whatever it produces.

For larger changes across a page, the Visual Builder lets you click an element instead of hunting for its selector, and it can edit CSS, JavaScript, and HTML in the same session.

JavaScript

Switch to the JavaScript tab and enter the code you want injected for the selected group.

JavaScript Injection Timing controls when your code runs. New experiences default to Immediately.

• Immediately: injected as soon as possible, loading at the same time as the rest of your content. Ideal for critical code that needs to run without delay.

• After Page Load: injects once the page's content has fully loaded and is ready to use, after the DOM is loaded. Great for scripts that rely on the page's structure.

• Delay: holds injection for a set time. A delay of 1 to 2 seconds is worth choosing for non-essential scripts, because it keeps them from competing with the rest of the page for load time.

6. Add targeting, if you need it

By default your code runs for every visitor in the group, on every page where the selectors match. The Targeting tab narrows that by device, new or returning visitor, traffic source, country, currency, page, or product.

Page Targeting is the one to reach for most often here. Scoping a PDP-only style change to product pages keeps it from firing on your collection and cart pages, where the same classname may appear on something you didn't mean to touch.

7. Configure analytics

On the Configure Analytics tab, choose up to seven Key Metrics for the front page of your results and mark one as Primary. Revenue per Visitor is the default. Profit per Visitor is the better primary metric if you've uploaded COGS, since it accounts for margin rather than top-line revenue.

Custom metrics have to be added before you start, and they can't be backfilled once traffic is running. This matters more here than on other types: if your JavaScript adds a button or a module, a click event on it is often the only way to tell whether anyone used the thing you built.

At the bottom of the tab, choose how orders count toward your results: all orders, or only orders containing certain products. You can change this later.

8. Preview, then start

Use the Preview tab to check each group on your live site before a visitor sees the code. Injected CSS and JavaScript is the one modification type where a small mistake can break a page for a whole group, so check the pages your selectors reach and not only the one you were editing.

When it looks right, click Start for a test, or Enable for a personalization. The Content Experience QA Checklist covers what else to check.

For more on writing effective CSS and JavaScript for Intelligems, including further examples:

CSS Styles and JavaScript Injection