Branding & Settings

Your store's visual identity is crucial for building recognition and trust. This section lets you configure your logo, color scheme, footer, and other brand elements that appear throughout your store.

Why Branding Matters

Strong, consistent branding:

Builds trust: Professional appearance increases confidence
Creates recognition: Customers remember your store
Stands out: Differentiation from competitors
Increases conversions: Branded stores see 20-30% higher conversion rates

Even small branding touches—a logo, consistent colors, social media links—significantly impact customer perception and trust.

Accessing Branding Settings

Navigate to Customize Store in the admin dashboard and select the Other Settings tab.

Store Logo

Your logo appears in the header of all your store pages and is a key brand identifier.

Upload Your Logo

Logo Requirements:

Format: JPG, PNG (PNG with transparent background recommended), or WebP
Recommended size: 150px × 65px (or similar proportions)
Maximum file size: 3MB
Aspect ratio: Horizontal rectangle or square works best

PNG with transparency is ideal as it displays cleanly over any background color. Avoid logos with white backgrounds unless your store uses a white header.

Click Upload New Logo

Click the Upload new logo button and select your logo file from your computer.

Preview Your Logo

After uploading, your logo will display in the card. Click the Preview button (external link icon) to see how it looks live on your store.

Logo Best Practices

Design tips:

Keep it simple: Complex logos don't scale well at small sizes
High contrast: Ensure visibility on various backgrounds
Clear at small sizes: Test how it looks when scaled down
Consistent with brand: Match your other marketing materials
Professional quality: Blurry or pixelated logos hurt credibility

Don't have a logo yet? You can create one using free tools like Canva, LogoMakr, or Figma. Or start with just your store name in a nice font.

Additional Settings

Configure how your logo and store name display.

Show Store Name

Toggle Show store name to display your store name alongside your logo at the top of all pages.

Enable Store Name Display

Toggle the switch to ON to show your store name next to your logo.

When to Enable

Enable if:

Your logo is just an icon (not text-based)
You want extra brand reinforcement
Your logo is small or minimal
You're building name recognition

Disable if:

Your logo already contains your store name
You prefer a cleaner, minimalist header
Your store name is very long

Save Changes

Click Save Changes to apply the setting.

If your logo is text-based (includes your store name), you probably don't need to enable this. If your logo is just an icon or symbol, enabling it helps with brand recognition.

Toggle Show navbar overlay to add a semi-transparent background behind your navigation bar.

Toggle the switch to ON to add an overlay beneath the navbar.

When to Use Overlay

Enable if:

Your homepage hero images have complex backgrounds
Navigation links are hard to read over images
You want to emphasize the navigation bar
Your brand colors require background contrast

Disable if:

You prefer a clean, transparent navigation
Your hero images have simple backgrounds
You want a modern, minimalist look
Navigation text is already clearly visible

Save Changes

Click Save Changes to apply the navbar overlay setting.

Color Customization

Customize four key colors that define your store's visual identity.

Primary Text Colour

The main color for text content and links throughout your store.

Select Primary Text Colour

Click the color input field to open the color picker.

Color picker features:

Color wheel for visual selection
Hex code input (e.g., #067bc2)
Pre-defined color swatches for quick selection
Real-time preview

Choose Your Color

Best practices:

High contrast: Ensure text is readable on your background
Brand alignment: Match your brand colors
Accessibility: Maintain 4.5:1 contrast ratio minimum
Test readability: View on actual devices

Color psychology:

Blue: Trust, professionalism (most common for e-commerce)
Black/Gray: Sophisticated, minimal
Green: Nature, eco-friendly
Purple: Creative, luxury

Accessibility matters: Ensure sufficient contrast between text and background. Use tools like WebAIM Contrast Checker to verify.

Save Color Selection

Click Save Changes to apply your primary text color throughout the store.

Where primary text color appears:

Body text
Product descriptions
Navigation links (default state)
General content areas

Primary Highlight Colour

The color for highlighted elements, hover states, and active links.

Select Primary Highlight Colour

Click the color input field to access the color picker.

Choose Highlight Color

Best practices:

Complementary to primary: Should work well with primary text color
Attention-grabbing: Brighter or more saturated than primary
Consistent with brand: Align with brand color palette
Clear indication: Should clearly signal interactivity

Common approaches:

Lighter shade of primary color
Complementary color from color wheel
Your brand's accent color
Slightly more saturated version of primary

Pro tip: Your highlight color should make it obvious when something is clickable or active. Test hover states to ensure clear visual feedback.

Save Highlight Color

Click Save Changes to apply your highlight color.

Where primary highlight color appears:

Link hover states
Active navigation items
Interactive element highlights
Call-to-action emphasis

Secondary Text Colour

Color used for secondary text elements and hover states.

Select Secondary Text Colour

Click the color input field to open the color picker.

Choose Secondary Color

Best practices:

Subtle differentiation: Different from primary but harmonious
Clear hierarchy: Indicates less important text
Readable: Still maintains good contrast
Brand cohesion: Works within your overall color scheme

Use cases:

Subheadings and captions
Metadata and timestamps
Secondary navigation elements
Supporting text

Save Secondary Color

Click Save Changes to apply your secondary text color.

Carousel Text Colour

Specific color for text within carousel/hero sections (homepage).

Select Carousel Text Colour

Click the color input field to open the color picker.

Choose Carousel Color

Critical considerations:

Contrast with images: Must be readable over your carousel images
Visibility: Consider using white or black for maximum visibility
Drop shadow: Darker carousel text benefits from light shadows
Test thoroughly: View with all your carousel images

Common choices:

White (#FFFFFF): Clean, works on dark images
Black (#000000): Works on light images
Bright colors: Yellow, cyan (ensure sufficient contrast)
Brand color: If it contrasts well with your images

Important: Test this color with all your carousel images. If text isn't clearly readable, adjust either the color or your carousel images.

Save Carousel Color

Click Save Changes to apply your carousel text color.

Color Swatches

The color picker includes pre-defined swatches for quick selection:

#067bc2 - Blue (professional, trust)
#84bcda - Light Blue (highlights, accents)
#80e377 - Green (nature, growth)
#ecc30b - Yellow (attention, energy)
#f37748 - Orange (friendly, affordable)
#d56062 - Red (urgency, passion)

Using swatches:

Click any swatch to instantly apply that color
Great for testing different looks quickly
Provides color harmony starting points

Configure footer content that appears at the bottom of all store pages.

Footer Text

Add custom text to your store footer (typically copyright or tagline).

Enter Footer Text

Type your footer text in the Footer Text field.

Common footer text examples:

Copyright notice:

© 2024 Your Store Name. All rights reserved.

Tagline:

Handmade with love in Portland, Oregon

Copyright + Tagline:

© 2024 Your Store Name | Crafting quality since 2020

Location-based:

Proudly serving customers worldwide from Portland, OR

Footer Text Best Practices

Keep it short: 1-2 lines maximum
Include year: Use current year for copyright
Add personality: Reflect your brand voice
Consider SEO: Mention location if relevant
Update annually: Change copyright year each January

Save Footer Text

After entering your footer text, continue to social media links before saving.

Add social media links to your store footer so customers can follow and connect with you.

Enter URLs for each social platform you use:

Available platforms:

Instagram
Facebook
Twitter/X
YouTube
LinkedIn
Pinterest

URL format:

https://www.instagram.com/yourusername
https://www.facebook.com/yourpage
https://twitter.com/yourusername
https://www.youtube.com/@yourchannel
https://www.linkedin.com/company/yourcompany
https://www.pinterest.com/yourusername

Include full URLs: Start with https:// for all links. Only fill in platforms you actively use—empty fields won't display icons.

Which platforms to use:

Instagram: Visual products (fashion, food, art, home decor)
Facebook: Broader audiences, established businesses
Pinterest: DIY, crafts, home decor, recipes
Twitter/X: Tech, news, trending topics
YouTube: Product demos, tutorials, behind-the-scenes
LinkedIn: B2B, professional services

Best practices:

Only link to accounts you actively maintain
Post regularly (at least weekly) on linked platforms
Use consistent branding across all platforms
Engage with followers who comment/message
Cross-promote your store on social media

Don't link to empty accounts: Only link platforms where you have content and engage regularly. Empty or inactive accounts hurt credibility.

After entering footer text and social links, click Save Changes to update your footer.

Your footer displays:

[Footer Text]

[Instagram Icon] [Facebook Icon] [Twitter Icon] 
[YouTube Icon] [LinkedIn Icon] [Pinterest Icon]

[Additional footer navigation links]

Only platforms with entered URLs will display icons.

Brand Consistency Checklist

Ensure consistent branding across all elements:

Logo uploaded and displays correctly
Store name toggle configured appropriately
Primary text color aligns with brand
Highlight color provides clear interaction feedback
Secondary text color creates visual hierarchy
Carousel text is readable on all carousel images
Colors tested for accessibility (contrast ratios)
Footer text includes copyright and/or tagline
Social media links added (for active accounts only)
All colors harmonize with each other
Branding consistent with other marketing materials
Tested on desktop and mobile devices

Consistency is key: Use the same logo, colors, and messaging across your store, social media, packaging, and communications.

Testing Your Branding

Contrast Testing

Use accessibility tools to verify color contrast:

Tools:

WebAIM Contrast Checker
Coolors Contrast Checker
Chrome DevTools (Lighthouse accessibility audit)

Minimum standards:

Normal text: 4.5:1 contrast ratio
Large text: 3:1 contrast ratio
Interactive elements: 3:1 contrast ratio

Cross-Browser Testing

Test your store in multiple browsers:

Chrome
Safari
Firefox
Edge
Mobile browsers (iOS Safari, Chrome Mobile)

Common Questions

"Should my logo include my store name?"

Text-based logo (includes store name):

Logo alone is fine
Disable "Show store name" toggle
Example: "Joe's Coffee" in a fancy font

Icon/symbol logo (no text):

Enable "Show store name" toggle
Logo + name displays together
Example: Apple logo (apple symbol + "Apple" text)

"What if I don't have a logo?"

Start simple:

Use your store name in a nice font
Add later when you're ready to invest in design
Many successful stores begin without custom logos

"How do I choose brand colors?"

Start with your products:

What colors represent what you sell?
Look at product photography for inspiration

Consider your audience:

Professional/corporate → Blues, grays
Eco-friendly → Greens, earth tones
Luxury → Black, gold, deep colors
Youthful → Bright, vibrant colors

Use color tools:

Coolors.co - Generate color schemes
Adobe Color - Color wheel tool
Paletton - Color scheme designer

"How often should I update my branding?"

Update when:

Rebranding your business
Logo redesign
Seasonal promotions (optional)
Major business changes

Don't update:

Just for the sake of change
Too frequently (confuses customers)
Without careful planning

Consistency builds recognition: Stick with your branding once established.

Troubleshooting

Logo Won't Upload

Check file size (under 3MB)
Verify format (JPG, PNG, or WebP)
Try a different browser
Reduce image dimensions if very large
Ensure file isn't corrupted

Logo Looks Blurry

Upload higher resolution image
Use PNG format (not JPG if possible)
Don't upscale small images
Start with logo at least 300px wide
Export at 2x size (300px → upload 600px)

Colors Not Changing

Click "Save Changes" after selecting colors
Clear browser cache (Ctrl/Cmd + Shift + R)
Wait a few minutes for changes to propagate
Try incognito/private browsing mode

Carousel Text Not Visible

Choose higher contrast color
Test against all carousel images
Consider white or black for universal visibility
Add semi-transparent overlay to carousel images

Verify full URL is entered (include https://)
Ensure URL is valid (test in browser)
Click "Save Changes" after entering
Check that platform icons display (only filled fields show)

What's Next?

With your branding configured:

Customize your homepage to match your brand
Set up shop page banners with consistent styling
Create your About Us page to tell your story
Add products to start selling

Your brand is your promise to customers—make it memorable and consistent!

Branding & Settings

On this page