Skip to main content
The Mini POS System allows you to customize various branding elements to match your business identity. This guide covers how to modify logos, app names, colors, and theme settings.

​
App Name and Title

​
Changing the App Name

The app name appears in multiple locations throughout the application. You’ll need to update these files:
1

Update manifest.json

Edit the PWA manifest file at manifest.json:
manifest.json
{
  "name": "Your Store Name",
  "short_name": "Store POS",
  "description": "Your custom description"
}
  • name: Full app name (shown during installation)
  • short_name: Short name (shown on home screen)
  • description: Brief description of your app
2

Update HTML title

Edit index.html line 11:
index.html
<title>Dashboard - Your Store POS</title>
Repeat this for all HTML files: products.html, pos.html, reports.html
3

Update header text

Edit the header in each HTML file around line 23:
index.html
<h1 class="text-2xl font-bold text-indigo-600">Your Store Name</h1>

​
Logo Customization

The app uses two logo locations: 
<img src="images/pos.svg" alt="Your Store Logo" class="w-10 h-10 rounded-full"/>
1

Prepare your logo

  • Header logo: 40×40 pixels (SVG or PNG)
  • Footer logo: 48×48 pixels (SVG or PNG)
  • Save files in the images/ directory
2

Update image paths

Replace src="images/pos.svg" with your logo path:
<img src="images/your-logo.svg" alt="Your Store Logo" class="w-10 h-10 rounded-full"/>
3

Update all pages

Make the same changes in:
  • index.html
  • products.html
  • pos.html
  • reports.html
The rounded-full class makes logos circular. Remove it for square logos.

​
Theme Colors

​
Primary Brand Color

The default theme uses Indigo (#4f46e5). To change it:
1

Update manifest.json

manifest.json
{
  "theme_color": "#4f46e5",
  "background_color": "#ffffff"
}
Change theme_color to your brand color (hex format).
2

Update HTML meta tag

Edit line 6 in all HTML files:
<meta name="theme-color" content="#4f46e5" />
3

Update Tailwind colors (Advanced)

For comprehensive color changes, edit tailwind.config.js or src/input.css to customize Tailwind’s color palette.The app uses these color classes:
  • text-indigo-600 - Primary text color
  • bg-indigo-600 - Primary button background
  • border-indigo-600 - Primary borders
  • hover:bg-indigo-700 - Hover states
Search and replace these classes across all HTML files.
Changing Tailwind color classes requires updating multiple files. Test thoroughly on all pages.

​
Color Palette Reference

The current color scheme from css/style.css:
css/style.css
--color-indigo-50: oklch(96.2% 0.018 272.314);
--color-indigo-100: oklch(93% 0.034 272.788);
--color-indigo-500: oklch(58.5% 0.233 277.117);
--color-indigo-600: oklch(51.1% 0.262 276.966);
--color-indigo-700: oklch(45.7% 0.24 277.023);
Other accent colors used:
  • Green: Success states, sales
  • Blue: Reports, analytics
  • Orange: Products
  • Purple: Transactions
  • Red: Delete actions, errors

​
Updating Footer Text

Edit the footer section (around line 150-156 in HTML files): 
<p class="text-gray-600">&copy; 2025 Codecraft by Syed</p>
Update the link URL: 
<a href="https://your-website.com" target="_blank" rel="noopener noreferrer" title="Your Business">
  <img src="images/logo.svg" alt="Your Logo" class="w-12 h-12 rounded-full hover:opacity-90"/>
</a>

​
Quick Customization Checklist

1

Essential files to update

  • manifest.json - App name and theme color
  • All HTML files - Titles, headers, footers
  • images/ - Replace logo files
  • css/style.css - Advanced color customization
2

Test all pages

After making changes:
  • Dashboard (index.html)
  • Products page
  • POS page
  • Reports page
  • PWA installation flow
3

Clear cache

Update the cache version in sw.js line 2:
sw.js
const CACHE = 'mini-pos-v3'; // Increment version
This forces browsers to reload your changes.
Use browser DevTools (F12) to inspect elements and test color changes before committing to code.

​
Example: Complete Rebrand

Here’s a complete example of rebranding to “QuickStore POS”:
manifest.json
{
  "name": "QuickStore POS System",
  "short_name": "QuickStore",
  "theme_color": "#059669",
  "background_color": "#ffffff",
  "description": "Fast and Reliable Point of Sale"
}
index.html
<meta name="theme-color" content="#059669" />
<title>Dashboard - QuickStore POS</title>

<!-- Header -->
<img src="images/quickstore-logo.svg" alt="QuickStore Logo" class="w-10 h-10 rounded-full"/>
<h1 class="text-2xl font-bold text-green-600">QuickStore POS</h1>

<!-- Footer -->
<p class="text-gray-600">&copy; 2025 QuickStore Inc.</p>
Remember to update the cache version in sw.js after making branding changes.

Build docs developers (and LLMs) love

Get started for freeTalk to us