> For the complete documentation index, see [llms.txt](https://sitesbyseth.gitbook.io/sitesbyseth-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sitesbyseth.gitbook.io/sitesbyseth-docs/skeleton/theme-settings.md).

# Theme settings

Theme settings control the global look and behavior of your whole store — colors, fonts, spacing, product cards, the size finder, and more. Set them once and every page follows.

To open them:

1. Go to **Online Store → Themes → Customize**.
2. Click the **gear icon** at the bottom of the left panel (labeled **Theme settings**).

Below is every group and every setting, in the order they appear.

## Favicon

* **Favicon image** — the tiny icon shown in the browser tab. Upload a square image; Shopify scales it down to 32 × 32 px, so use something bold and simple — a logomark, not your full wordmark.

## Colors

Skeleton runs on five colors. Keep it disciplined — the theme's look comes from restraint.

* **Background** (default `#FFFFFF`) — the page background everywhere. Off-whites like `#FAFAF7` soften the look; true black flips the theme dark (pair it with white text).
* **Text** (default `#000000`) — all body and heading text.
* **Accent** (default `#FF4D00`, safety orange) — the add-to-cart button, checkout button, sale prices, and highlights. This is your brand color slot.
* **Text on accent** (default `#FFFFFF`) — text sitting on accent-colored buttons. If you pick a light accent, change this to black so button labels stay readable.
* **Borders** (default `#E5E5E5`) — the 1px lines around cards, fields, and dividers. Darken it (e.g. `#000000`) for a harder, more brutalist look.

💡 Some sections (cart drawer, banners) have their own color overrides — leave those empty and they inherit these global colors.

## Typography

* **Font style** — two options:

  * **Monospace** (default) — Courier-style type. The signature Skeleton look: raw, technical, streetwear-coded.
  * **Sans-serif** — Helvetica-style type. Cleaner and more conventional; pick this if mono feels too much.

  These are system fonts, so there's nothing to license and nothing slows the page down.
* **Base font size** (12–18 px, default 14) — the size all text scales from. 14 is compact; 16 is friendlier for text-heavy stores.
* **Letter spacing** (0–10%, default 2) — space between letters, as a percent of the letter height. A little tracking is part of the theme's look; set 0 for tight, conventional type.

## Layout

* **Page width** (1000–1600 px, default 1280) — the maximum content width on large screens. Wider shows bigger images on desktop; narrower feels more editorial.
* **Side padding** (12–48 px, default 20) — the gutter between content and the screen edge. Mostly felt on mobile.
* **Section spacing** (24–120 px, default 64) — the default vertical rhythm between sections.
* **Grid gap** (4–40 px, default 16) — the space between product cards in every grid. Tighten to 8 for a dense catalog wall; loosen to 24+ for gallery vibes.

## Product cards

These control every product card in the theme — collection pages, search, featured grids, upsells.

* **Image aspect ratio** — the shape of the card image box: **Square (1:1)** (default), **Landscape (4:3)**, **Portrait (4:5)**, or **Tall (2:3)**. Match it to how your product photos are shot — portrait or tall for on-model photography, square for flat lays.
* **Image fit** — how photos sit inside that box:
  * **Fill the box (crop)** (default) — photos fill the shape edge to edge, cropping the excess. Best when your photos are consistent.
  * **Shrink to fit (no crop)** — the whole photo always shows, with breathing room around it. Best for product-on-transparent or mixed-shape photos, or if cropping keeps cutting off heads and feet.
* **Show border on images** (on by default) — the 1px frame around card images. Part of the theme's signature look.
* **Show second image on hover** (on by default) — desktop hover swaps to the product's second photo. Make photo #2 the back of the garment or an on-model shot.
* **Enable quick view (+) button** (on by default) — the + on each card that opens the quick view modal (photos, price, size pills, size finder link, add to cart) without leaving the page. One of the theme's main conversion features — leave it on.
* **Show sale and sold out badges** (on by default) — "Sale" appears when a product has a compare-at price above its price; "Sold out" when nothing's available.

## Size finder

Powers the "Find your size" modal on product pages and in the quick view modal. Full explanation (including the math) in the [Size finder deep dive](/sitesbyseth-docs/skeleton/size-finder.md).

* **Modal title** (default "Find your size") — the heading of the popup.
* **Default fit (how pieces run)** — how your garments generally fit: **True to size** (default), **Runs small — recommend sizing up**, **Runs large — recommend sizing down**, or **Oversized / relaxed fit**. Individual products can override this on their "Find your size" block.
* **Default garment type** — **Tops / tees / hoodies** (default), **Bottoms / pants**, **Outerwear / jackets**, or **Dresses / one-pieces**. Changes how height vs. weight are weighted in the size calculation. Pick whatever most of your catalog is; override per product where needed.
* **Fit helper text** — the sentence at the top of the modal (default explains that size is calculated from height and weight).
* **Size chart (measurement limits)** — the heart of the feature. One size per line, in the format `Size,MaxHeightCm,MaxWeightKg`:

  ```
  S,170,65
  M,178,80
  L,186,95
  XL,999,999
  ```

  `S,170,65` means size S fits up to 170 cm and 65 kg. Use `999` for the largest size to mean "no upper limit." ⚠️ If this box is empty or formatted wrong, the finder can't recommend anything — customers see "No matching size found."
* **View size chart button label** (default "View size chart") — the button inside the modal that flips to the chart view.
* **Size chart image 1 (all products)** — an optional chart image shown for every product. Images 2 and 3 stack below it (useful for separate cm/inch charts or tops/bottoms charts).
* **Size chart image 2** / **Size chart image 3** — extra stacked chart images.
* **Size chart page** — alternatively, show the content of a store page as the chart. Used only if no image is attached.

💡 Per-product charts: give a product its own chart by adding an image to the product's `custom.size_chart` metafield — it then replaces the global images for that product. Products with no chart at all simply don't show the "View size chart" button. Setup steps in the [deep dive](/sitesbyseth-docs/skeleton/size-finder.md).

## Cart

* The rewards progress bar is the **Milestone progress bar** block on the **Cart drawer** section — add or remove that block to control it (see [Cart drawer](/sitesbyseth-docs/skeleton/sections/cart-drawer.md)).
* **Show order note field** (on by default) — the "add a note" box on the **cart page**. The cart drawer has its own note toggle in the Cart drawer section.
* **Upsell collection** — the default collection the cart drawer's **Cart upsells** block pulls products from (the block can override it with its own collection). Pick a collection of low-cost add-ons: socks, caps, stickers.

💡 Looking for the free gift settings? They live on the **Cart drawer** section as the **Free gift** block, not here — see [Free gift setup](/sitesbyseth-docs/skeleton/size-finder/free-gift.md).

## Social media

Paste full URLs (starting with `https://`). Icons for any filled-in link appear in the footer (when the footer's **Show social icons** is on).

* **Instagram**
* **TikTok**
* **X (Twitter)**
* **YouTube**
* **Facebook**

Leave any of them empty and that icon simply doesn't render.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://sitesbyseth.gitbook.io/sitesbyseth-docs/skeleton/theme-settings.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.