Branded Tenant Setup

This topic describes how to set up a branded tenant for the Velosity STORE application and configure DNS to redirect from your own domain while preserving the original domain name for the user.

Overview

A branded tenant allows you to provide a seamless shopping experience for your customers under your own domain while leveraging the Velosity STORE platform (https://store.velosity.app).

There are two primary ways to configure this: 1. Subdomain: https://store.mycompany.com 2. Path-based: https://www.mycompany.com/store

Configuration Options

Option 1: Subdomain (store.mycompany.com)

This is the simplest setup if you want a dedicated subdomain for your store.

1. DNS Record

Create a CNAME record in your DNS provider:

Type	Host	Value
CNAME	store	store.velosity.app

2. Reverse Proxy (Optional but Recommended)

While a CNAME points the traffic, a reverse proxy is often used to handle SSL termination or to ensure the Host header is correctly managed if you want to keep store.mycompany.com in the browser address bar.

NGINX Example:

server {
    server_name store.mycompany.com;

    location / {
        proxy_pass https://store.velosity.app/;
        proxy_set_header Host store.velosity.app;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Option 2: Path-based (www.mycompany.com/store)

This is used when you want the store to appear as a section of your existing website. DNS alone cannot handle path-based routing, so a reverse proxy is required.

1. Reverse Proxy Setup

You must configure your existing web server (NGINX, Apache, Cloudflare Workers) to proxy requests starting with /store to Velosity.

NGINX Example:

location /store/ {
    proxy_pass https://store.velosity.app/;
    proxy_set_header Host store.velosity.app;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

Cloudflare Workers Example:

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const url = new URL(request.url)
  if (url.pathname.startsWith('/store')) {
    // Proxy /store/* to store.velosity.app/*
    const targetUrl = 'https://store.velosity.app' + url.pathname.replace('/store', '') + url.search
    let newRequest = new Request(targetUrl, request)
    return fetch(newRequest)
  }
  return fetch(request)
}

Velosity Configuration

Once the DNS or proxy is configured, you must inform Velosity about your branded domain so that links and assets are generated correctly.

1. Log in to the Velosity Admin Panel.
2. Navigate to Settings > Branded Tenants.
3. Add your domain (e.g., store.mycompany.com or www.mycompany.com/store).

Branding and Assets

Branding for your tenant is managed through the Branded Tenants settings in the Velosity Admin Panel.

Logos and Favicons

You can upload specific branding assets for your tenant: * Company Logo: Appears in the navigation bar and on generated PDF documents (quotes, orders). Transparent PNGs are recommended. * Favicon: The small icon displayed in browser tabs. Should be a 32x32 or 16x16 pixel .ico or .png file.

Customizing Colors

Velosity allows you to define a color palette that matches your brand: * Primary Color: Used for the main navigation bar, buttons, and key UI accents. * Accent Color: Used for links, highlights, and secondary interactive elements.

Custom CSS

For more advanced branding, you can provide a URL to a custom CSS file or inject CSS rules directly: * Custom CSS URL: Link to a CSS file hosted on your own servers (ensure it is served over HTTPS). * Inline CSS: Add small overrides directly in the Admin Panel to tweak fonts, margins, or specific component styles.

Asset Hosting

When using a path-based setup (www.mycompany.com/store), ensure that any assets referenced in your custom CSS use absolute URLs or are relative to the store path to avoid 404 errors.

SSL Requirements

• Subdomain: If using a CNAME directly, Velosity may provide SSL via Let's Encrypt, or you can manage it at your proxy.
• Path-based: Your proxy must already have a valid SSL certificate for www.mycompany.com. The connection between your proxy and Velosity is encrypted via Velosity's SSL.