Skip to main content

Open in AthenaHQ

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: 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.