Style Presets

VIDEO WALKTHROUGH

Astro Admin — Style Presets: setup guide

2:00

Recorded 14 October 2026 · Narrated walkthrough · English captions

Jump to a chapter 6 chapters

1. 0:00Style Presets
2. 0:14Review the active site-wide style
3. 0:34Compare built-in sample cards
4. 0:56Find a preset quickly
5. 1:15Apply deliberately, then verify
6. 1:40Your next steps

Read the full video transcript

Astro Admin — Style Presets 2026-10-14 — Astro Admin setup

00:00:00 — Style Presets
Welcome to the Agentic Ecom Astro Admin guide to style presets. We're using the Sync Comms storefront to show the current controls. We'll review the workflow with previews, without saving changes to this live store.

00:00:14 — Review the active site-wide style
Open Style Presets. The Global Storefront Form and Structure panel shows the current style selection and Apply Style. One style affects the whole storefront, including surfaces, borders, corner shapes, shadows, motion and button appearance. It does not choose the page's block arrangement.

00:00:34 — Compare built-in sample cards
Use Built-in to browse the supplied styles. Each card includes a sample of the style's surface and button treatment, plus its identifying information. Compare a few options with your brand and product images in mind. The sample Primary action buttons demonstrate appearance; they are not the site-wide Apply Style control.

00:00:56 — Find a preset quickly
The search field filters the gallery by preset details. Use a specific name, such as Core, to find a known option. The Custom tab shows styles stored for this site. Export creates a reusable JSON file for moving an existing preset to another environment through Import Preset.

00:01:15 — Apply deliberately, then verify
When you have chosen a style on your store, select it in the top dropdown and click Apply Style. Rebuild the affected storefront pages and inspect product cards, forms, buttons and mobile spacing. For custom style creation, use the editor capabilities available in your deployed version; this current gallery does not display an Edit control on each built-in card.

00:01:40 — Your next steps
To put this into practice, compare style samples, choose the intended global preset, apply then rebuild and check key pages. Test the complete result on your own staging storefront before publishing. You can follow the written Astro Admin guides at user guides dot Agentic Ecom dot net.

Download videoEnglish captionsDownload transcript

A Style preset is the storefront’s shape language — the site-wide decoration tokens: surfaces, corner radii, borders, shadows, motion and typography accents. It’s distinct from Structure (layout) and Theme (colour). One style preset applies to the whole store.

Open it at Style Presets in the sidebar (/admin/style-presets).

Applying a style site-wide

1. At the top, the Global Storefront Form & Structure panel shows the active style preset in a dropdown, with a ● Currently live marker.

2. Pick a preset and click Apply Style.

3. Prebuild so the new style reaches the live store.

The built-in styles

The card grid (with All / Built-in / Custom tabs and search) shows each style with a live “Sample card” preview so you can see the radius, border, shadow and button look before applying. The built-ins include:

Core

Department-store premium baseline. A safe, clean default.

Immersive Glass

Frosted glass over soft theme orbs.

Neo-Brutalist

Sharp edges, thick borders, hard offset shadows, invert-on-hover.

Soft Clay

Rounded, borderless, soft extruded shadows, springy hover.

Each card also shows its id (e.g. style-core, style-glass), a recommended theme palette and a texture (e.g. “Fine Noise”).

Built-ins are read-only

You can’t edit a built-in style directly. Editing one forks it into a custom style stored against your site, which you then edit and apply.

Creating your own style preset

1. You don’t build a style from blank — you fork a built-in. Open the built-in style closest to what you want and click Edit. The style editor opens (/admin/style-presets/<id>). (You can also load a style someone exported via the Import Preset page.)

2. The left side has token groups you can expand:

   • Surfaces · Geometry / Radii · Borders & Dividers · Shadows · Motion · Backdrop / Ambient & Gradients · Typography Accents · Buttons.

   Each token has a value editor and a { raw } toggle that reveals the underlying CSS (values can reference theme variables, so colour stays driven by your Theme).

3. The right side is a live preview — a mini storefront (header, hero, product cards) that re-renders as you change tokens. It has light/dark and Rest/Hover toggles and accent swatches, so you can check interaction states.

4. When you’re happy, click Save as…. In the Save as new style preset dialog, give it a name, description and icon, and pair it with a structural suite. (Built-ins are read-only, so Save as… is how you keep your changes.)

Tip

Your new custom style appears in the Custom tab and the Apply Style dropdown, so you can make it live. New styles can also be brought in from the Import Preset page.

Style vs Theme — which controls what?

It’s easy to mix these up:

Style preset = shape

Radii, borders, shadows, surfaces, motion, button shape, texture.

Theme = colour

The brand colours and every colour derived from them.

A red, sharp-cornered store and a red, soft-cornered store share a theme (red) but use different styles (sharp vs soft). Change colour in Theme; change shape in Style.

Next: Theme & appearance Set the brand colours that drive the whole palette.