Saved Layouts, Custom Presets, CSS & Import

VIDEO WALKTHROUGH

Astro Admin — Saved Layouts, CSS & Imports: setup guide

2:21

Recorded 14 October 2026 · Narrated walkthrough · English captions

Jump to a chapter 7 chapters

1. 0:00Saved Layouts, CSS & Imports
2. 0:15Review saved layouts
3. 0:36Find your custom presets
4. 0:53Use Custom CSS sparingly
5. 1:16Import the correct preset type
6. 1:38Keep a clear recovery path
7. 2:00Your next steps

Read the full video transcript

Astro Admin — Saved Layouts, CSS & Imports 2026-10-14 — Astro Admin setup

00:00:00 — Saved Layouts, CSS & Imports
Welcome to the Agentic Ecom Astro Admin guide to saved layouts, css & imports. 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:15 — Review saved layouts
Open Saved Layouts to find stored page designs and versions. Review the name, page type and status before opening one. Keep a known working version before a major change. Publishing or restoring an older layout is a real change, so confirm the target and prebuild the affected pages afterwards.

00:00:36 — Find your custom presets
Custom Presets groups the site's Structural, Style and Theme entries. Use the relevant tab to find a custom item. Give presets names that explain their purpose and store. Review an item's use before deleting it, and keep an exported copy when you need a portable backup.

00:00:53 — Use Custom CSS sparingly
Custom C S S applies site-wide overrides. Prefer small, specific rules and theme variables so your changes remain compatible with the selected style and colours. Add a comment explaining each override. Save only the changes you intend to keep, then build and check both desktop and mobile. We are not editing or saving this store's C S S.

00:01:16 — Import the correct preset type
Import Preset asks what you are importing. Choose the supported preset type, and for a layout choose the target page type. Give it a clear name and upload the exported JSON file. Review the imported entry under Custom Presets before activating or applying it. Importing a preset is different from making it the live design.

00:01:38 — Keep a clear recovery path
Before replacing a working design, identify the saved version or exported preset you can return to. Test the new design on the relevant page type, including mobile. If a rollback is needed, restore or reassign the known working design and rebuild the affected pages. Avoid deleting the very version you might need for recovery.

00:02:00 — Your next steps
To put this into practice, keep a known working layout, review scoped css and imported preset types, verify activation and recovery before publishing. 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

These four sidebar screens are where you manage the things you’ve created and apply finishing touches.

Saved Layouts

Every time you Save as draft or Publish in the page editor, a version is kept. Saved Layouts lists them so you can:

1. Open a saved layout back in the editor to keep working on it.

2. Publish an older version to roll back to it.

3. Delete versions you no longer need to keep the list tidy.

Tip

Saved Layouts is your safety net. Before a risky change, you already have a checkpoint — just publish the previous version to undo, then Prebuild.

Custom Presets

The Custom Presets screen lists the presets you have created (across structure, style and theme), so they’re separate from the built-ins. The table is filtered to show only your custom entries — built-in presets are managed on their own screens.

Naming your custom presets

Custom presets are grouped and filtered by name. Giving each one a clear, consistent name makes them easy to find here — for example prefix store-specific presets so they sort together.

From here you can re-open, re-apply or delete any preset you made. Remember: applying a preset still needs a Prebuild to go live.

Custom CSS

For fine adjustments the presets don’t cover, Custom CSS lets you add raw CSS that loads site-wide.

1. Open Custom CSS.

2. Add your rules. Prefer the theme/style variables where possible so your CSS stays in step with colour and shape changes.

3. Save, then Prebuild.

Use Custom CSS sparingly

Custom CSS overrides the presets, so heavy use can fight your Style and Theme settings and make later changes confusing. Reach for it for small, specific tweaks — and keep a comment on each rule explaining why it’s there.

Import Preset

Import Preset loads a preset that was exported elsewhere (for example one we sent you, or one you exported from another environment).

1. Open Import Preset.

2. Upload or paste the exported preset.

3. It appears under Custom Presets; activate / apply it when you’re ready, then Prebuild.

Next: Syncing data from Magento The five syncs that feed the storefront.