> ## Documentation Index
> Fetch the complete documentation index at: https://varaahi.vritservicespro.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Branding

> Set your logo lockup, favicon and social share image so VARAHI looks like your brand everywhere.

# Branding

Three assets define your visual identity outside the page itself: the logo lockup, the
favicon, and the social share image. All three are merchant settings — no code.

![Logo lockup](https://mintlify.s3.us-west-1.amazonaws.com/vr-it-services-pro-c6bfa2fc/images/placeholder/logo-lockup.png)

Header logo lockup — mark, wordmark and sub-label

***

## The logo lockup

VARAHI's header has two logo modes, chosen automatically.

### Image logo

Upload a `logo_image` in **Header → Logo**. The theme renders it at your configured
`logo_width`, scaled proportionally.

| Setting | Default | Notes |
| - | - | - |
| Logo width | 160px | Height is derived — never set it |
| Logo height | 40px | Read-only; used to reserve layout space |

> [!TIP]
>
> Use an SVG or a transparent PNG with generous padding. Because the height is
> derived from your width, a logo with a lot of vertical padding will appear smaller
> than you expect.

### Text lockup

If no image is set, VARAHI builds a lockup from three fields:

```text theme={"system"}
+------+  VARAHI
|  V   |  ACOUSTIC LABS
+------+
```

| Setting | Default | Notes |
| - | - | - |
| Logo text | `VARAHI` | Rendered uppercase with wide tracking |
| Logo sub-text | `ACOUSTIC LABS` | Optional. Hidden below 400px on mobile |
| Logo mark | First letter | The gradient "V" tile, auto-generated from the text |

The mark is a rounded square with a cyan-to-violet gradient and a soft glow, and the
letter is taken from the first character of your logo text.

> [!NOTE]
>
> The sub-text is hidden below 400px because the header cannot fit all three elements
> on a narrow phone. The wordmark and mark always remain.

***

## Favicon

**Theme settings → Favicon → Favicon Icon**. Upload a square image, ideally 512×512.

If you leave it blank, VARAHI falls back to a built-in `assets/favicon.svg` — a dark rounded square with a cyan "V" — so there is never a 404 in your console and never a
default browser globe in a bookmark.

> [!NOTE]
>
> Your favicon is served with a `cache` header from Shopify's CDN. If you replace it,
> give it a new filename so browsers pick up the change immediately.

***

## Social share image

**Theme settings → Social Media — Social Sharing Image**. This is the image shown
when someone shares a link to your store on X, LinkedIn, Slack, or iMessage.

| Aspect | Recommended size |
| - | - |
| Landscape | 1200 — 630 px |
| Format | PNG or JPG, under 1 MB |

When this is set, VARAHI outputs it as the `og:image` meta tag. When it is blank, the
theme falls back to your favicon, which is almost never the right choice — a 32×32 icon scaled up to a 1200–630 share card looks broken.

***

## Checklist before you publish

**Logo reads clearly at 160px wide**

Most logo legibility problems only appear at small sizes.

**Wordmark does not push the cart button off-screen**

On narrow phones the header tightens but a very long wordmark can still crowd
the cart button. Shorten it or switch to an image logo.

**Favicon is square and legible at 16px**

Detail is invisible at favicon size — use a bold mark.

**Social image has the product in it**

A share card is an ad. Show the product.

**Logo mark and favicon agree**

They are the same asset viewed at two sizes.

***

> **[Header & navigation](https://varaahi.vritservicespro.com/settings/header-navigation.md)**
>
> Where the logo actually lives, and the menu system.

> **[Color system](https://varaahi.vritservicespro.com/settings/colors.md)**
>
> Match the logo colours to your tokens.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.