All articles

pulsar

How to install Pulsar in your Shopify store (60-second guide)

How to install Pulsar in your Shopify store in under a minute. Install from the App Store, enable the theme embed, verify the beacon, ship your first effect.

The Pulsar team6 min read
The Pulsar app embed toggle inside the Shopify theme editor, ready to be enabled.

Pulsar takes about 60 seconds to install end-to-end: install from the App Store, flip one toggle in the theme editor, write your first tag. There's no theme code to touch, no snippet to paste, no waiting for an account manager. This guide walks the install in order, shows you exactly what each screen looks like, and covers the three things that occasionally go wrong on the first try.

Pulsar Elements running on a live Shopify storefront with an animated highlight under a headline word.
What you'll have at the end of this guide — an inline-styled headline live on your store.

TL;DR

  • Install Pulsar from the Shopify App Store — one click.
  • Online Store → Themes → Customize → App embeds, toggle Pulsar Inline on, hit Save.
  • Open your app's Settings tab in the admin to confirm the embed is active.
  • Edit any section that supports text. Wrap a word in @{purple-pink}word@. Save. Done.

Step 1 — Install from the Shopify App Store

Open the Pulsar listing and click Install. Shopify will ask you to approve a single scope — read_themes — which is what lets Pulsar's Settings page detect whether the embed is enabled. Approve and you'll land inside the embedded admin.

The Install button on the Pulsar listing in the Shopify App Store.
The App Store install screen. One click, one scope, no waiting.

First time in, Pulsar drops you into a four-step onboarding wizard: Welcome, Enable, Verify, Try. The next two sections of this guide walk through Enable and Verify in detail — if you ever exit the wizard early, you can re-run it any time from the Home tab.

Step 2 — Open the theme editor

From Shopify admin, go to Online Store → Themes. Find your live theme (or the one you want to install Pulsar on) and click Customize. This opens the theme editor — the same one you use for normal section work.

Step 3 — Enable the Pulsar Inline app embed

In the theme editor's left sidebar, click the App embeds icon (it looks like a puzzle piece, near the bottom). You'll see a list of every app embed available on your store — anything you've installed that ships a storefront component shows up here.

The App embeds panel in the Shopify theme editor with a list of available embeds.
The App embeds panel. Pulsar Inline lives here after install.

Find Pulsar Inline in the list and toggle it on. You'll see one optional setting — the CSS selector scope. The default is h1, h2, h3, p, which covers basically every headline and body block in a normal theme. Leave it alone unless you have a specific reason to narrow it.

The Pulsar Inline app embed toggled on inside the Shopify theme editor.
Toggle on, scope left at default. This is the entire configuration.

Step 4 — Verify in the Settings page

Back in the Pulsar admin, click Settings in the left nav. Pulsar's settings page makes a request against your theme's settings_data.json (that's what the read_themes scope is for) and tells you whether the embed is currently enabled on your live theme.

The Pulsar Settings page showing the app embed status as Enabled on the live theme.
Green check, embed enabled. If this shows red, jump to the troubleshooting section below.

While you're here, this is also where you'd upgrade to Pulsar Pro if you want the animated effects (circle, highlight, custom-attribute spans). Free covers all the color and gradient tags — which is everything you need to ship your first headline.

Step 5 — Write your first tag

The fastest way to confirm everything works is to write a tag into a section you can edit from the theme editor. Go back to Customize, pick any section with a heading or rich text input — your homepage hero, an Image Banner, a Rich Text block — and edit the heading. Wrap a word in Pulsar syntax.

Your first Pulsar tag — you type
Welcome to my @{purple-pink}store@
Shoppers see
Welcome to my store

Save the section, then Preview the storefront (or just visit it in another tab). The word should render as a purple-to-pink gradient. If it does — you're done. Everything else in Pulsar is variations on this same pattern.

A Shopify storefront homepage hero rendering a gradient word inside the H1 via Pulsar.
First tag, first render. From here, the syntax cheatsheet covers everything else.

For the full tag reference — solid colors, gradients, animated circles, highlight underlines — see the Pulsar syntax cheatsheet. If you want a longer worked example with a real headline, the gradient text guide walks one through end-to-end.

Troubleshooting

The Pulsar Inline embed doesn't appear in the App embeds panel

This happens occasionally right after install — Shopify's theme editor caches the list of available embeds and doesn't always pick up a newly-installed extension on the first load. Two fixes, in order of how annoying they are:

  1. Hard-refresh the theme editor (Cmd+Shift+R / Ctrl+Shift+R). 90% of the time this is enough.
  2. Close the editor entirely, go back to Online Store → Themes, and re-open Customize. This forces a fresh load of the embeds list.
  3. If it still doesn't appear, uninstall and reinstall Pulsar from the App Store. The extension UUID gets re-registered on install and stale registrations are the most common cause.

I wrote a tag but it renders as literal @{...} on the storefront

This means the Pulsar script isn't running on that element. Three things to check:

  • Is the embed actually saved on the live theme? Open the Pulsar Settings page. If it says the embed is not enabled, go back and re-save in the theme editor — easy to forget.
  • Is the tag inside one of the scoped selectors? The default scope is h1, h2, h3, p. If your tag is inside a <div> or a <span> that isn't one of those, Pulsar won't touch it. Either move the text into a headline element, or widen the selector scope in the embed settings.
  • Is your theme using a custom element for headlines? Some custom-built themes wrap headings in non-standard tags. Add that tag to the selector scope (comma-separated) in the embed settings.

Will Pulsar slow down my store?

The Pulsar Inline script is around 4 KB minified, loaded with defer, and runs once on DOMContentLoaded. It does no network requests on render — the only network call is a single beacon to /apps/plsr on first load to check your plan status. In Lighthouse, install impact is consistently in the single-millisecond range. If you're seeing a real performance hit after install, it's almost always something else that changed around the same time (a new app, a theme update). The no-code customization guide covers how to audit storefront app weight if you want to dig in.

Will it work on my theme?

Pulsar works on every Online Store 2.0 theme — that's Dawn, Sense, Refresh, Craft, Studio, Colorblock, Origin, Publisher, Crave, Taste, plus every paid theme on the Shopify Theme Store. If you're on an older 1.0 theme (no app embeds support), you'll need to upgrade the theme first — that's a Shopify-wide constraint, not a Pulsar limitation.

What to do next

Once Pulsar is installed and your first tag is live, three things are worth doing in order:

  1. Skim the syntax cheatsheet — it's a one-page reference for every tag.
  2. If you're on Dawn specifically, the Dawn-theme integration guide covers the section templates worth styling first.
  3. Style your product page H1. It's the single highest-leverage edit you can make — and the one merchants forget because the homepage gets all the attention.

About the author

The Pulsar team

Shopify text styling

Pulsar is the easiest way to stylize headlines in your Shopify store — colors, gradients, animated highlights and circles, no theme code required.

Install Pulsar — Free