Branding & Customization
Make every team store look like it belongs to the client — not to your shop. TeamIQ gives you full control over the storefront's visual identity.
What Gets Customized
Each store has independent branding settings. Changing the branding on one store has no effect on any other store. You can run stores for a basketball team, a church, and a school simultaneously — each with completely different logos and colors.
Logo
The logo appears in the storefront header above the product grid.
Options:
- Paste URL — Enter a public image URL (e.g. from your CDN or an external host).
- Upload Image — Drag and drop an image or click to browse. Supported formats: JPG, PNG, WebP, SVG. Max file size: 5 MB. Uploaded logos are stored in Cloudflare R2 and served at a persistent public URL.
Recommended specs:
- Transparent or white background SVG or PNG works best
- Avoid very wide logos — the header constrains the height to ~80px
If no logo is set, the store name is displayed as text in the header instead.
Colors
Three independent color settings control the storefront palette:
| Setting | Where it's used |
|---|---|
| Primary Color | Buttons, headings, active states, borders |
| Secondary Color | Accents, hover highlights, badges |
| Background Color | Page background |
Each color has a color picker and a hex input field. Click the color swatch to open the picker, or type a hex value directly (e.g. #1a1a2e).
Match the client's brand
Ask your client for their brand guide or pull their colors from their website or social media using a browser color picker extension. Exact hex matching makes the store feel genuinely branded.
Font
Choose from 7 Google Fonts that load automatically on the storefront:
| Font | Character |
|---|---|
| Inter | Clean, modern, neutral |
| Roboto | Friendly and readable |
| Outfit | Contemporary, geometric |
| Poppins | Bold, rounded, energetic |
| Montserrat | Professional, classic |
| Open Sans | Highly readable, neutral |
| Lato | Elegant, thin strokes |
The font applies to all text across the storefront — headings, product names, prices, and navigation.
Header Text / Tagline
An optional line of smaller text displayed below the store name in the header. Use it for:
- Event context:
2026 Spring Collection - A deadline reminder:
Order by March 15th - A welcome message:
Welcome, Wildcats!
Leave blank to show only the store name in the header.
Announcement Banner
Enable a persistent banner across the top of the storefront to communicate time-sensitive information.
- Check Show store banner.
- Type the banner message (e.g. "Orders close March 15th — delivery by March 28th").
- Save.
The banner appears at the very top of the storefront page, above the header. It uses the store's primary color as the background.
Use banners for:
- Order deadlines
- Event reminders
- Holiday hours
- Pickup/delivery info
Banners are always visible
The banner cannot be dismissed by customers. Keep the message short and actionable — one or two sentences is ideal.
Previewing Your Changes
Branding changes go live immediately when you click Save — there is no separate "staging" environment.
To preview the storefront after saving:
- Click the Preview button in the top action bar (next to Save). This opens the live storefront in a new tab.
- Use this to visually confirm your logo, colors, and font look correct before sharing the link with your group.
Keep the storefront URL handy
You can also bookmark the storefront URL directly and reload it after each save to check your changes:
https://your-store.myshopify.com/apps/teamiq/your-slug