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

# Global Settings: Configure Your Store Platform

> Configure store identity, appearance, typography, tracking, and catalog behavior from the Admin → Global Settings panel. Changes take effect immediately across your storefront.

Every platform-wide option lives under **Admin → Global Settings** (`/admin/settings`). Changes you save here take effect immediately across the storefront and admin panel — no server restart or manual cache flush is required.

<Tip>
  Before going live, purge any demo content (sample products, placeholder pages, and test orders) first, then save your production settings. This ensures your real store identity is what every visitor sees from day one.
</Tip>

***

## Site Identity

These fields control what your store is called and how your logo is delivered to visitors.

| Setting              | Description                                                                                                  |
| -------------------- | ------------------------------------------------------------------------------------------------------------ |
| Store Name           | Appears in the top navigation, footer, email subjects, and browser title tags                                |
| Logo Storage Type    | How Site Store Pro sources your logo: **Local Upload**, **S3**, **CDN**, **External URL**, or **Inline SVG** |
| CDN / CloudFront URL | Full URL to your logo on a CDN or CloudFront distribution (used when Logo Storage Type is set to CDN)        |
| Inline SVG Markup    | Paste raw SVG code to render the logo without an image request (used when Logo Storage Type is set to SVG)   |
| Custom S3 Bucket     | Point to your own AWS S3 bucket (used when Logo Storage Type is set to S3)                                   |

<Steps>
  <Step title="Enter your store name">
    Type your brand name into **Store Name**. This value populates the `<title>` tag on every page and the display name in transactional emails.
  </Step>

  <Step title="Choose a logo storage type">
    Select the option that matches how you host your assets. Use **Local Upload** for a straightforward file upload, **CDN** or **S3** for high-availability delivery, or **Inline SVG** to embed vector markup directly.
  </Step>

  <Step title="Save and verify">
    Click **Save Settings**, then reload your storefront in a new tab to confirm the logo and store name render correctly.
  </Step>
</Steps>

***

## Appearance & Dark Mode

Control the visual theme for both the storefront and the admin panel, including your brand color palette and interactive UI elements.

### Dark Mode Toggles

| Setting              | Description                                                 |
| -------------------- | ----------------------------------------------------------- |
| Storefront Dark Mode | Enables a dark theme for all public-facing storefront pages |
| Admin Dark Mode      | Switches the admin panel to a dark slate theme              |

### Brand Color Palette

| Setting                 | Description                                                                                        |
| ----------------------- | -------------------------------------------------------------------------------------------------- |
| Primary Brand Color     | Main brand hex color (e.g. `#ef7025`) — used for buttons, links, and accents                       |
| Brand Hover Color       | Hex color applied when visitors hover over primary interactive elements                            |
| Primary Text Color      | Default hex color for body text across the storefront                                              |
| Button Corner Radius    | Choose between rounded (`0.75rem`), slightly rounded (`0.5rem`), or pill-shaped (`9999px`) buttons |
| Secondary Button Colors | Background and text hex values for secondary call-to-action buttons                                |

### Back-to-Top Button

| Setting            | Description                                    |
| ------------------ | ---------------------------------------------- |
| Button Background  | Hex color for the floating back-to-top button  |
| Button Hover Color | Hex color displayed on mouse-over              |
| Icon Color         | Hex color for the arrow icon inside the button |

***

## Shop Display & Filter Pill Styling

Fine-tune the colors of catalog view toggles, filter pills, and pagination controls so they match your brand precisely.

### Catalog View Mode Buttons

| Setting                | Description                                             |
| ---------------------- | ------------------------------------------------------- |
| Grid View Button Color | Active and inactive hex colors for the grid-view toggle |
| List View Button Color | Active and inactive hex colors for the list-view toggle |

### Filter Pills

| Pill Type                | Configurable Properties                    |
| ------------------------ | ------------------------------------------ |
| Category Filter Pills    | Background, text, border, and hover colors |
| Brand Filter Pills       | Background, text, border, and hover colors |
| Subcategory Filter Pills | Background, text, border, and hover colors |

### Pagination Buttons

| State    | Description                                      |
| -------- | ------------------------------------------------ |
| Active   | Color of the currently selected page button      |
| Inactive | Color of unselected page buttons                 |
| Hover    | Color when a visitor hovers over any page button |

***

## Page Background Media

Site Store Pro supports four background modes for the storefront. Select your preferred **Background Mode** and configure the matching fields for your chosen option.

<Tabs>
  <Tab title="Default (Tailwind)">
    Uses the standard Tailwind CSS background. No additional configuration required — this is the out-of-the-box appearance.
  </Tab>

  <Tab title="Solid Color">
    Set **Background Mode** to **Solid Color**, then enter a hex value in **Solid Hex Background**. The entire storefront background renders in that color.
  </Tab>

  <Tab title="Background Image">
    Set **Background Mode** to **Image**. Choose a storage type — upload a local file, paste an external URL, or point to an S3 object. Use the glassmorphism overlay controls below to prevent the image from clashing with content.
  </Tab>

  <Tab title="Looping Video">
    Set **Background Mode** to **Video**. Choose a storage type — upload a local MP4 or WebM file, paste an external CDN URL, or use S3. The video loops silently in the background.
  </Tab>
</Tabs>

### Glassmorphism Dark Overlay

Apply a semi-transparent tint over image or video backgrounds to keep text legible.

| Setting            | Description                                                  |
| ------------------ | ------------------------------------------------------------ |
| Overlay Tint Color | Hex color for the overlay (typically a dark shade)           |
| Overlay Opacity    | Integer from `0` to `100` controlling how opaque the tint is |

<Note>
  The per-page background settings in the CMS page editor override these global values. A per-page video background takes the highest priority, followed by a per-page image, and finally the global background. See [Theme & Layouts](/setup/theme-customization) for details.
</Note>

***

## Typography Scale

Paste a Google Fonts CSS import URL once and then assign individual font families, sizes, and colors to each text element across the storefront.

| Setting          | Description                                                                                   |
| ---------------- | --------------------------------------------------------------------------------------------- |
| Google Fonts URL | Full `@import` URL from Google Fonts (e.g. `https://fonts.googleapis.com/css2?family=Inter…`) |
| Body Font        | Font family, size (px/rem), and hex color for general body text                               |
| Paragraph Font   | Font family, size, and color for paragraph elements                                           |
| H1 Heading       | Independent family, size, and color for top-level headings                                    |
| H2 Heading       | Independent family, size, and color for second-level headings                                 |
| H3 Heading       | Independent family, size, and color for third-level headings                                  |

<Tip>
  You can mix font families — for example, use a serif face for headings and a sans-serif for body text — by adding multiple font families to your Google Fonts URL before pasting it here.
</Tip>

***

## Content Cards & Panels

Control the background and border treatment of content containers and product cards across the storefront.

| Setting            | Description                                                                                     |
| ------------------ | ----------------------------------------------------------------------------------------------- |
| Content Background | Hex color for general content panel backgrounds                                                 |
| Card Background    | Hex color for individual product and content cards                                              |
| Card Border Color  | Hex color for card border strokes                                                               |
| Card Shadow        | Choose from subtle (`shadow-sm`), medium (`shadow-md`), or prominent (`shadow-xl`) drop shadows |

***

## Tracking & Custom JavaScript

Add analytics measurement IDs and third-party scripts without touching template files.

| Setting             | Description                                                                                               |
| ------------------- | --------------------------------------------------------------------------------------------------------- |
| Google Analytics ID | Your GA4 Measurement ID in the format `G-XXXXXXXXXX`                                                      |
| Custom JS Loader    | Raw JavaScript injected before `</head>` — use for tracking pixels, chat widgets, or tag manager snippets |

<Warning>
  Scripts entered in **Custom JS Loader** execute on every storefront page. Audit any third-party code for security and performance impact before saving.
</Warning>

***

## System Timezone

| Setting         | Description                            | Example Values                                      |
| --------------- | -------------------------------------- | --------------------------------------------------- |
| Global Timezone | The timezone your business operates in | `America/New_York` · `Europe/London` · `Asia/Tokyo` |

Site Store Pro uses this value for order timestamps, scheduled emails, and report date grouping.

***

## Reviews & CMS Downloads

| Setting                    | Description                                                                                 |
| -------------------------- | ------------------------------------------------------------------------------------------- |
| Product Reviews            | Toggle customer reviews on or off sitewide                                                  |
| Third-Party Review Scripts | Paste embed code from Yotpo, Trustpilot, or similar services                                |
| CMS File Icon Pack         | Choose the icon style for downloadable file listings: **Vivid**, **Classic**, or **Square** |

***

## Shop Catalog Display Controls

These settings govern how the `/shop` catalog presents itself to visitors.

| Setting                   | Description                                                                                               |
| ------------------------- | --------------------------------------------------------------------------------------------------------- |
| Product Image Orientation | Display product thumbnails in **16:9** widescreen or **1:1** square format in the catalog grid            |
| Disable Shop Landing      | When enabled, `/shop` redirects visitors directly to the full catalog instead of showing the landing page |
| Advanced Search Filtering | Enables a slide-out search and filter drawer on the shop catalog page                                     |

<Info>
  The **Advanced Shop Search Filtering Drawer** is ideal for stores with large catalogs. It lets shoppers filter by multiple attributes simultaneously without navigating away from the current page.
</Info>