WEBVTT

00:00:00.250 --> 00:00:05.811
Welcome to the AgenticEcom Astro Admin guide to theme & brand colours. We're

00:00:05.869 --> 00:00:10.606
using the Sync Comms storefront to show the current controls. We'll review the workflow with

00:00:10.653 --> 00:00:13.903
previews, without saving changes to this live store.

00:00:14.953 --> 00:00:20.340
Open Theme and Appearance. Apply a Theme Preset shows the supplied colour schemes and the

00:00:20.386 --> 00:00:25.901
currently active choice. Theme controls colours, while Style controls shape and

00:00:25.971 --> 00:00:31.335
Structure controls layout. Applying a theme is a site-wide change, so review the

00:00:31.381 --> 00:00:34.365
palette before using Apply on your own store.

00:00:35.415 --> 00:00:40.790
Switch to Custom Theme to work with your own brand colours. The editor shows a reminder that the

00:00:40.848 --> 00:00:46.027
changes need to be saved as a preset and applied. Primary, Secondary and

00:00:46.143 --> 00:00:51.669
Accent provide the starting colours for Auto colour. We are reviewing an unsaved editor

00:00:51.739 --> 00:00:52.366
here.

00:00:53.416 --> 00:00:58.710
Auto colour, light and dark, derives a coordinated palette from your brand colours.

00:00:59.105 --> 00:01:04.666
Review both display modes, including the header, body, buttons and text contrast.

00:01:05.281 --> 00:01:10.959
Automatic colour adjustment is a useful starting point; still check your actual content, focus

00:01:11.017 --> 00:01:13.942
states and images for readability before publishing.

00:01:14.992 --> 00:01:20.379
Save as Custom Preset opens a naming dialog. On your store, give the theme a

00:01:20.437 --> 00:01:25.696
descriptive name and save it as a separate preset. We are only opening the dialog

00:01:25.766 --> 00:01:30.921
here. A saved custom theme needs to be applied before you build pages with it;

00:01:31.374 --> 00:01:34.729
opening or editing the theme does not itself publish it.

00:01:35.779 --> 00:01:41.166
Return to Apply a Theme Preset and find your saved theme. Apply it when ready, then

00:01:41.236 --> 00:01:46.890
prebuild the relevant pages. Check desktop and mobile in light and dark modes, including

00:01:46.936 --> 00:01:52.532
the header, product price, forms and checkout. Use Discard when you want to

00:01:52.602 --> 00:01:55.191
leave unsaved editor changes behind.

00:01:56.241 --> 00:02:01.570
To put this into practice, review brand colours in both modes, save and apply the

00:02:01.628 --> 00:02:07.073
intended theme, build and inspect readability on real pages. Test the

00:02:07.120 --> 00:02:12.751
complete result on your own staging storefront before publishing. You can follow the written Astro

00:02:12.843 --> 00:02:16.768
Admin guides at user guides dot AgenticEcom dot net.