> ## Documentation Index > Fetch the complete documentation index at: https://docs.athenahq.ai/llms.txt > Use this file to discover all available pages before exploring further. # Shopping Pages – Branding Editor > Lets an admin edit and publish a website's shared brand styling (colors, fonts, logo, header/footer chrome) previewed on a placeholder storefront page. `app.athenahq.ai/shopping-pages/branding` ## Purpose The Branding editor allows website administrators to define and manage the global visual identity of their Shopping Pages. This is the central hub for configuring colors, typography, logos, and header/footer elements. Changes made here act as a universal "theme" for the store. Rather than editing these styles on a page-by-page basis, admins can publish brand updates from this single location, and the new look will automatically cascade to every Shopping Page and template on the site. ## What's on the page **Page header** The top bar displays breadcrumb navigation (`Shopping Pages › Templates`), the `Branding` page title, and the primary `Publish` button to push your styling changes live. **Site branding conflict banner** A yellow warning banner that only appears if the system detects that a teammate has published brand changes while you were editing. It contains a `Load latest` button to sync your screen with the newest live version. **Embedded page editor canvas (Your store)** The large preview area on the right. This shows a live, realistic mockup of a generic storefront using your website's default template. It does not display your actual live products or text; it uses placeholder content so you can focus entirely on how your colors, fonts, and logos look. **Site styles panel** The left sidebar where all branding work happens. It contains expandable sections for Colors, Typography, Logo & Layout, and Header/Footer Links. It also contains the `Generate from site` button, the `Discard` button, and a small text indicator (e.g., "Site changes") letting you know if you have unsaved tweaks. ## What you can do here * **Publish**: Click the **Publish** button in the top-right corner to apply all of your staged branding changes to the live site. (This button is disabled if you haven't made any changes, or if there is an unresolved conflict). * **Generate from site**: Located in the Site styles panel, this opens a dialog titled "Generate branding from your site". You can enter a website URL (or leave it blank to use your current website's domain) and click **Generate**. The system will scan the site and automatically extract colors, typography, and brand voice into a draft theme for you to review. * **Discard**: Click **Discard** in the Site styles panel to throw away any un-published branding tweaks. This prompts a confirmation dialog ("Discard site changes?") and, if accepted, reverts the preview back to your live site's current look. * **Load latest**: If the conflict banner appears, click **Load latest** to refresh the branding editor with the most recent changes saved by your team. * **Navigate back**: Click the **Back** chevron or the **Templates** breadcrumb link to exit the branding editor and return to the Templates tab. ## Data shown * **Brand styling**: The colors, fonts, and logos are loaded from your website's globally stored Shopping Pages theme. * **Preview layout**: The structural layout shown in the canvas is pulled from your website's default template. * **Images**: Any images available for selection (like logos or backgrounds) are drawn from the image assets you've previously uploaded to your Shopping Pages library. ## Common workflows **Edit and publish site branding** 1. Navigate to the Branding editor from the Templates screen. 2. In the Site styles panel, adjust your desired colors, fonts, logo, or header/footer chrome. These edits automatically save as a draft. 3. Review how the changes look in the live-updating placeholder preview canvas. 4. Click **Publish** in the top-right page header. 5. Confirm the "Apply site changes?" dialog to push the new brand look live to every page on the site. **Generate branding from an existing website** 1. In the Site styles panel, click **Generate from site**. 2. Enter a website URL (or leave the box blank to default to the current website's domain). 3. Click **Generate** and wait roughly 30 seconds while the AI analyzes the site. 4. If you already have staged changes, confirm you want to replace them. 5. Review the newly generated draft branding in the canvas, make any manual tweaks, and click **Publish**. **Resolve a branding edit conflict** 1. If you see the "Your site branding changed in another tab or by a teammate" banner appear, your **Publish** button will be disabled. 2. Click **Load latest** in the banner. 3. The editor will rebase and load the newest live branding so you can safely continue editing. ## Linked from / links to * **Linked from**: Users access this page by clicking the **Branding** button on the Shopping Pages **Templates** screen. * **Links to**: The **Back** chevron and the **Templates** breadcrumb link take the user back to the Shopping Pages Templates screen. The **Shopping Pages** breadcrumb link takes the user to the root Shopping Pages list. ## Common support questions **Why don't I see my real products in the preview?** The branding editor intentionally uses a placeholder storefront with generic content. This is designed to help you focus purely on global colors, typography, and logos without being distracted by specific page copy or product grids. **Why is the Publish button disabled?** The Publish button is only active when you have made staged changes to your brand settings that haven't been pushed live yet. It will also disable if the system detects a conflict (i.e., someone else published branding changes while you were editing). **Why did I get a "Site branding changed elsewhere" warning?** This happens if a teammate applies brand changes to the live site while you have the editor open. To prevent you from accidentally overwriting their work, the system pauses your ability to publish. Click "Load latest" to sync up with their changes. **Can I edit my page text or add products on this screen?** No. The branding editor is strictly for global visual identity (colors, fonts, logos, header/footer). To edit specific page layouts, add product grids, or write copy, you need to use the individual page editor or the template editor.