Astra Theme Customization: Your Brand, Set Once, Kept Through Every Update

Three blues, two fonts and a footer nobody remembers editing

Most Astra sites we open were not designed. They accumulated. A starter template set the first palette. A page builder added its own colors on top. Someone pasted CSS into Additional CSS, someone else into a builder's custom CSS box, and a third person edited the parent theme's style.css directly, which works right up until Astra ships an update and overwrites it.

The symptoms are familiar. Headings change size between pages. A color fix on the home page does nothing on the blog. The mobile menu is a different shade from the desktop one. A change saves in the Customizer and refuses to show on the site, a problem we unpack in Astra CSS not updating. None of it is Astra's fault, exactly. Astra gave everyone a place to put things, and everyone used a different place.

Customization or development: which one you are buying

Customization makes Astra look and behave like your brand using the controls and extension points Astra already has. It does not add new kinds of content, new checkout logic or outside integrations. Those are development work, and they live on our Astra developer page.

A home for every change in Astra

The rule we work by is simple: every kind of change has one correct place in Astra, and it goes there and nowhere else. This table is the map we hand clients at the end, so that nobody has to guess next year.

Brainstorm Force publishes a free child theme generator that produces a zip with style.css and functions.php. We use it or write the same two files by hand, then export your Customizer settings before switching so nothing is lost in the move.

The brand pass, in the order we do it

1. 1

   Inventory the drift

   We list every color, font and size actually in use on the live site, and every place custom CSS is stored. The list is usually longer than the brand guide.

2. 2

   Build the child theme on staging

   A private copy gets a child theme, a Customizer export and a record of the current Astra and Astra Pro versions.

3. 3

   Set the palette and type scale

   Your brand colors go into Astra's global palette slots. Headings and body text get one scale. Hard-coded hex values in old CSS are replaced with the palette variables.

4. 4

   Rebuild the header and footer

   Desktop, tablet and mobile rows, logo sizes, menu styles and the off-canvas menu, tested on real phones as well as emulators.

5. 5

   Style the store

   Shop grid, product page, cart and checkout brought into the same palette and type.

6. 6

   Consolidate and document

   Stray CSS moves into the child theme. You receive the map of where every decision lives.

The third option

Athena CMS, with AI agents on staff.

Not a theme and not a blank Next.js repo. The content system we put behind every custom site: plain fields, a real preview, every version kept, and AI agents that handle the chores a plugin only nags you about.

• PPicassoImages
• AApolloSite analysis
• AAresCompetitor watch
• PPrometheusContent holes
• AAtlasPage depth and structure
• DDelphiAI search visibility

ZDAOAand 12 more agents. Two come with Athena; the rest are monthly add-ons.

Meet the agentsTake the Athena tour

PPicassoWeekly · ImagesAApolloWeekly · Site analysis

Headers, menus and the 921-pixel line

Astra's free header builder is better than many owners realize. It gives desktop, tablet and mobile their own layouts, each with above, primary and below rows, plus a transparent header option and a mobile menu that opens as a dropdown, a flyout or a full-screen panel. Astra Pro adds sticky headers, mega menus and extra header elements.

The catch is the breakpoint. At 921px wide and below, Astra switches to the toggle menu. That is fine for most designs and wrong for some: a long menu can wrap untidily at 1,000 pixels, while a short one hides behind a hamburger on a tablet that had room for it. Moving the line takes a PHP filter, so we set it in the child theme and retest every header row at the new width.

We also test on physical phones. One reported Astra issue on wordpress.org describes an off-canvas menu that opens empty on real devices while desktop emulation looks fine. Our Astra mobile menu guide walks through the causes, and Astra fonts not loading covers the other thing that makes a header look wrong on first load.

WooCommerce that looks like your store instead of the demo

A default WooCommerce shop on Astra looks like every other default WooCommerce shop. The free theme already lets us set shop columns, product structure, content width, the sale bubble style and a dropdown cart in the header. That covers a lot of brand work with no code at all.

Astra Pro reaches further: quick view, an off-canvas shop sidebar, vertical or horizontal product galleries, image zoom, quantity buttons, and color and typography options for store elements. If you already own Pro, we use those controls before writing CSS. If you do not, we tell you whether the store features justify the license or whether a few lines of child theme CSS will do. The trade-offs are in our Astra WooCommerce review.

CSS that is still standing after the next update

Custom CSS fails in predictable ways, and each one has a cure.

• It lives in the parent theme. An update replaces the file. Cure: the child theme's style.css.
• It uses hard-coded colors. A rebrand means a find-and-replace across the site. Cure: var(--ast-global-color-0) and its siblings, so the palette drives everything.
• It wins by brute force. Every rule is marked important, so the next fix needs a bigger hammer. Cure: selectors scoped to Astra's own classes, kept as specific as needed and no more.
• It collides with a builder. Astra's ast-article-single class has been reported changing the width of Elementor Loop Grid items. Cure: targeted overrides, tested on the templates where the builder renders.
• It hides in five boxes. Nobody can find the rule that is breaking the footer. Cure: one file, commented by section.

Speed is part of this too. Astra prints its Customizer CSS inline by default, and fonts can be loaded locally from Astra > Settings > Performance. Our Astra speed guide covers both, and Astra layout broken after an update covers what to do when an update moves things anyway.

When a fresh coat of paint will not fix it

We will tell you not to hire us for this if the Customizer already gets you most of the way and you have an afternoon free. Global colors and typography are easy to set yourself, and the Astra review explains where each setting lives.

We will also tell you when customization is lipstick. If the site is slow because of the plugin pile rather than the paint, or the business needs features no theme setting will reach, the problem is the stack, not the brand. That is when we compare it honestly in Astra vs Next.js and show you what moving from Astra to Next.js involves. Custom sites we build are edited in Athena CMS, where brand colors are set once in code and cannot drift. The general version of this service, for any theme, is WordPress theme customization, and every theme guide lives under WordPress themes.

A brand guide is a promise. A global palette is how Astra keeps it.