Using Pulsar with Dawn, Sense, Refresh and other Shopify themes

Pulsar is a theme app extension, which means it runs on any Shopify 2.0 theme without touching theme code. In practice, any has caveats — each free theme hides the app embed toggle in a slightly different place, exposes headlines through slightly different tags, and ships slightly different inherited CSS that can override styled spans. This guide walks through Dawn first (since it's the default and the one we test against), then covers Sense, Refresh, Spotlight, Studio, Craft, Origin, and Crave, and ends with the universal rule for every other theme — including paid premium ones.

TL;DR

• Pulsar works on every Shopify 2.0 theme — the entire free theme catalog included.
• Enable it in Theme editor → App embeds → Pulsar Inline (one toggle, same path on every theme).
• Default selectors h1, h2, p cover the headline in every free theme we've tested.
• Only Craft and a few premium themes need a selector tweak — usually adding .banner__heading or a custom class.
• If your theme is vintage (1.0), the app embed toggle won't appear. Upgrade to a 2.0 theme or use the legacy install path described at the bottom.

The universal rule: any Online Store 2.0 theme works

Pulsar ships as a theme app extension — specifically, an app embed block called Pulsar Inline. Shopify added support for app embeds in Online Store 2.0 (October 2021), and every theme published in the official Shopify Theme Store since then exposes the embed toggle in the same place: Theme editor → App embeds (the puzzle-piece icon in the left sidebar).

That means the install steps for Dawn are the install steps for Sense, Refresh, Spotlight, Studio, Craft, Origin, Crave, and roughly 95% of premium themes you'll buy on the Theme Store. If you're new to app embeds entirely, the theme app extensions explainer covers why they exist and why they're safer than the old code-injection model.

Dawn — the reference theme

Dawn is Shopify's flagship free theme and the one every new store starts on. It's also the theme we develop Pulsar against, so the install path here is the canonical one — everything else is a variation of this.

Where to enable the app embed in Dawn

1. In Shopify Admin, go to Online Store → Themes.
2. Click Customize on your live theme.
3. In the theme editor's left sidebar, click the app embeds icon (looks like a puzzle piece, bottom of the sidebar).
4. Find Pulsar Inline in the list and toggle it on.
5. Click Save in the top-right.

Where Pulsar finds headlines in Dawn

Dawn renders section headings through the following sections, all of which use real semantic tags that Pulsar's default selectors (h1, h2, p) catch:

• Image banner (sections/image-banner.liquid) — <h2> for the heading, <p> for the subheading.
• Rich text (sections/rich-text.liquid) — uses <h2> and <p> blocks.
• Multicolumn (sections/multicolumn.liquid) — <h3> per column. Add `h3` to your Pulsar selectors if you want to style these.
• Collection list / Featured collection — <h3> per card, plus <h2> for the section title.
• Main product (sections/main-product.liquid) — <h1> for the product title.

Dawn-specific gotchas

• The Hero section uses `<h2>`, not `<h1>`. Dawn deliberately reserves <h1> for product/page titles. If you wrap your hero text in Pulsar syntax and nothing happens, check that you have h2 in your selectors (it's a default).
• Dawn 14+ added `font-family` overrides on `.banner__heading` that can briefly flash before Pulsar's spans inherit them. Usually invisible, but if you see a font flicker, it's that.
• Rich Text blocks support inline HTML via the <> button in the editor toolbar. Pulsar syntax goes in the plain text view — don't wrap it in <span> tags yourself, the runtime does that.

Sense — the wellness theme

Sense is the second-most-installed free theme after Dawn. It's built for health, beauty, and wellness brands, with softer typography and a more editorial layout. The good news: it's a vanilla 2.0 theme that uses the same semantic tags as Dawn.

• Embed location: identical to Dawn — App embeds → Pulsar Inline → toggle on → Save.
• Headline tags: <h2> in banners, <h1> for product titles, <p> for subheads. Default Pulsar selectors cover all of them.
• Gotcha: Sense ships a letter-spacing: -0.02em on .h0 and .h1 classes, which can make tightly-kerned headlines clip the edge of a Pulsar circle effect. Bump your circle's padding or use $h{...} (highlight) instead of $c{...} (circle) for very tight typography.

Refresh — the playful theme

Refresh is built for food, drink, and lifestyle stores. It has the most aggressive typography defaults of the free themes — large, bold, often colored headlines — and that makes it one of the most fun themes to use Pulsar on.

• Embed location: App embeds → Pulsar Inline. Same path.
• Headline tags: Refresh uses <h2> extensively for section headings, including the homepage hero. <h1> on product pages.
• Selector tip: Refresh's testimonial section uses <blockquote> for quotes. If you want to style quoted text, add blockquote to your Pulsar selectors.
• Gotcha: Refresh's color schemes apply background-color to the heading wrapper, not the text itself. Pulsar's highlight effect ($h{...}) layers cleanly on top. Gradients (@{...}) work fine but lose some contrast against the color-scheme background — pick gradient stops with that in mind.

Spotlight — the editorial theme

Spotlight is the closest of the free themes to a magazine layout. Big imagery, big type, lots of whitespace. Pulsar's circle and highlight effects shine here precisely because the headlines are already large enough to host them.

• Embed location: App embeds → Pulsar Inline.
• Headline tags: standard <h1>/<h2>/<p>.
• Gotcha: Spotlight's "Slideshow" section autoplays and re-renders the DOM on every slide change. Pulsar's MutationObserver catches the re-render, but you may see a 50–100ms flash of unstyled syntax on slow connections. If that bothers you, switch the slideshow to manual advance, or use a static Image Banner section.

Studio — the portfolio theme

Studio is aimed at creators, designers, and service businesses — gallery-heavy, project-oriented. It uses the smallest body type of any free theme, which makes Pulsar's underline highlight ($h{...}) a particularly good fit for inline emphasis without shouting.

• Embed location: App embeds → Pulsar Inline.
• Headline tags: Studio is one of the only free themes that uses <h3> heavily for project card titles. Add `h3` to your selectors if you want gradient project titles in a gallery.
• Gotcha: Studio uses CSS mix-blend-mode: difference on some hover states. Pulsar-styled text behaves correctly under blend modes, but the underlying text color of your gradient stops will be inverted on hover. If that looks wrong, switch the affected section's color scheme to solid white/black.

Craft — the small-batch theme

Craft is built for artisanal and handmade brands — serif-first typography, generous spacing, a focus on storytelling. It's the only free theme where Pulsar needs a small selector tweak out of the gate.

• Embed location: App embeds → Pulsar Inline.
• Headline tags: Craft wraps its main banner heading in a <div class="banner__heading"> rather than a semantic <h2> in some templates. Default Pulsar selectors miss those.
• Recommended selectors: h1, h2, h3, p, .banner__heading. You can paste that into the Pulsar Inline embed settings in the theme editor.
• Gotcha: Craft's hero uses a parallax background image. Pulsar styles render correctly, but the SVG circle/highlight effects can occasionally appear behind the text if Craft's z-index is fighting yours. Add position: relative to the parent section in Craft's custom CSS field if you see this.

Origin — the multi-product theme

Origin is the newest of the free themes, designed for stores with large catalogs and category-heavy navigation. Its layout is dense, with smaller per-section headlines.

• Embed location: App embeds → Pulsar Inline.
• Headline tags: standard <h1>/<h2>/<p>, plus <h3> on collection card titles.
• Gotcha: Origin's mega-menu uses <a> text directly without heading tags. If you want Pulsar in your nav (rare, but some brands do), add nav a to your selectors. We don't recommend this for performance reasons — the MutationObserver will fire on every menu hover.

Crave — the bold theme

Crave is built for food and beverage brands that want loud, brand-forward storefronts. Big type, saturated colors, intentional asymmetry. Pulsar's animated effects (Pro: circle, highlight) fit Crave's design language particularly well.

• Embed location: App embeds → Pulsar Inline.
• Headline tags: standard semantic tags.
• Gotcha: Crave applies text-transform: uppercase on most headings. Pulsar's gradient and highlight effects work fine on uppercase text, but the circle effect can look tight around the top of capital letters — bump the circle's padding value if it's clipping.

Full compatibility table

Adding Pulsar to a premium / paid theme

If you bought your theme from the Shopify Theme Store after 2021, it's 2.0 — same install steps as Dawn. The Theme Store rejects vintage submissions now, so anything published recently is fine.

Premium themes worth calling out specifically:

• Impulse, Motion, Symmetry, Streamline, Empire, Prestige (Archetype, Pixel Union, Maestrooo) — all 2.0, all work with default selectors.
• Broadcast, Warehouse, Expanse — 2.0, work fine. Warehouse uses .product__title instead of <h1> in some templates; add it to your selectors.
• Booster, Turbo (paid speed-optimized themes) — work, but their aggressive CSS inlining can occasionally override Pulsar gradients on first paint. Force a hard refresh after enabling.
• Highly-customized themes from agencies — usually fine, but if the developer aliased <h1> to <div class="h1"> for layout reasons, add .h1 to your selectors.

If you're on a vintage (1.0) theme

Vintage themes don't support app embeds. You have two options:

1. Upgrade your theme to 2.0. This is what we recommend. Most paid theme vendors release free 2.0 versions to existing customers. Check your theme account or contact the developer.
2. Hand-include the script. Open your theme's layout/theme.liquid, paste {% render 'pulsar-inline' %} just before </body>, and the script will load on every page. The script handles its own initialization. You won't get the app embed toggle, but the runtime behaves identically.

If you go the hand-include route, remember that theme updates can overwrite theme.liquid and you'll need to re-add the line. This is exactly why 2.0 themes and app embeds exist in the first place — see the theme customization without code guide for the longer version.

Verifying it works on your theme

After enabling Pulsar Inline, do a one-minute smoke test:

1. Open your theme editor and edit your hero section's headline. Change it to Welcome to my @{red-blue}store@.
2. Save and view your storefront on a real device (not the theme editor preview — the preview doesn't always load app embed scripts).
3. You should see the word store rendered as a red-to-blue gradient.
4. If you don't, open the browser console. Pulsar logs its scan result on page load. If you see [pulsar] no matches, your theme's headline uses a tag or class outside the default selectors — add it.
5. If you see no Pulsar logs at all, the app embed isn't enabled. Re-check the theme editor.

Full step-by-step install help is in how to install Pulsar. The full syntax list (@{...}, $c{...}, $h{...}, etc.) is in the Pulsar syntax cheatsheet.

FAQ