Branding your store

Use ChatCart

Branding your store

Each store has its own brand. Changes show on the next page load, with no rebuild. Select the store in the store switcher first.

1

Store name

Settings, General, Store name. It appears in the header (when there is no logo), in page titles and in the WhatsApp message.

2

Color, corner radius, logo and favicon

Open Appearance.

The Appearance page with the Theme card (primary color and corner radius), the Brand assets card (logo and favicon), and the start of the Homepage sections card. Theme and brand settings on the Appearance page 1 2 3 4 5
Admin, Appearance.
  1. Primary color: pick a color or type a hex code like #0EA371. Buttons, links, badges and focus rings use it. Text on it turns white or dark by itself, so it stays readable.
  2. Corner radius: from square (0) to very round (1.5 rem). Every rounded corner of the storefront follows it.
  3. Logo: click Upload. A wide PNG or WebP with a transparent background works best. It replaces the store name in the header.
  4. Favicon: the small icon in the browser tab. Use a square PNG, at least 64 x 64 pixels. SVG is not accepted (for security).
  5. Homepage sections: simple on and off switches for the home page. For full control, use the Home page builder below it.

Click Save at the bottom of the page. The admin keeps its own neutral look; only the storefront changes.

3

Banners

Further down on Appearance, Banners holds the images of the hero and the banner sections. Each banner has a title, a subtitle, a link (like /category/dresses) and a button label. Click Add banner image to add one.

The Banners card with two banners, each with an image, title, subtitle, link and button label.
The Banners card on the Appearance page.
4

Announcement bar

Open Content. Type a short message in Announcement bar (up to 160 characters), such as "Free delivery on orders over $75", and click Save announcement. It shows across the top of every storefront page. Leave it empty to hide it.

The Content page with the announcement bar text and a list of static pages: FAQ, Policies, About Us.
Admin, Content: the announcement bar, and pages like About, FAQ and Policies.
5

SEO and social sharing

Settings, General, SEO: the Meta title and Meta description that search engines show, and a Social share image URL (about 1200 x 630 pixels) for links shared on WhatsApp, Facebook and others. Set APP_URL in .env.local to your real address, so the sitemap uses the right links. The Google Analytics and Meta Pixel IDs are on the same page.

6

Fonts

Fonts are not an admin setting. The storefront uses Inter for text and Instrument Serif for headings. To change them, a developer edits app/layout.tsx, components/storefront/chrome/storefront-shell.tsx and app/globals.css, then runs npm run build.