# Getting started

This page walks through the theme settings, the options that apply to your whole store. To open them:

1. In your Shopify admin, go to **Online Store > Themes** and select **Customize**.
2. In the theme editor, open **Theme settings** (the paintbrush or gear icon in the left rail).

Settings are grouped into the headings below. Changes show in the preview right away, and apply to your store when you select **Save**.

Settings that belong to one section (such as the padding of a banner) are not here. Those are described in [Sections](https://lintelagency.com/support/transom/sections.md).

## Logo and favicon

| Setting | What it does |
|---|---|
| **Logo** | Your store logo, shown in the header. If you leave it empty, the header shows your store name as text. |
| **Logo width** | Width of the logo in pixels, from 40 to 300. The default is 120. The height follows the shape of your image, so wide and tall logos both work. |
| **Favicon** | The small icon in the browser tab. Upload a square PNG, 32 x 32 pixels recommended. |

Tip: Use a PNG or SVG-based image with a transparent background, so the logo looks right on both light and dark headers.

## Typography

| Setting | What it does |
|---|---|
| **Heading font** | The font for headlines. |
| **Body font** | The font for paragraphs, buttons, and menus. |
| **Heading size** | Scales every heading up or down, from 80 to 130 percent. 100 is the preset's standard size. |
| **Heading letter case** | **Default** keeps the text as you typed it. **Uppercase** shows all headings in capital letters. |
| **Label case** | The same choice for buttons, menu links, subheadings and badges. Uppercase labels with wider letter spacing give a more editorial look. |

Fonts come from Shopify's font library, so they are licensed for your store and load quickly. To use a font that is not in the library, you can ask a developer to add it. See the [FAQ](https://lintelagency.com/support/transom/faq.md#how-do-i-change-fonts).

The theme preloads your heading and body fonts so the text appears without a flash of a different font.

## Colors

Colors are organized into **color schemes**. A color scheme is a named set of colors. Each section has its own **Color scheme** setting, so you can make one section light and the next dark.

Every preset includes four schemes:

- **Paper:** the main light background.
- **Ink:** a dark background with light text.
- **White:** a clean white background.
- **Signal:** a bold, accent-colored background that works well for scrolling text and calls to action.

Each scheme has these colors:

| Color | Used for |
|---|---|
| **Background** | The section background. |
| **Background gradient** | Used instead of the background color when set. |
| **Surface** | Cards and panels that sit on top of the background. |
| **Text** | Headlines and body text. |
| **Muted text** | Secondary text such as captions and notes. |
| **Accent** | Links, active states and highlights. Keep 4.5:1 contrast with the background. |
| **Button** | The fill of the main button. |
| **Button label** | The text on the main button. |
| **Border** | Lines, outlines, and dividers. |

To edit a scheme, open **Colors** in theme settings, choose the scheme, and change its colors. To add a scheme, use the add option in the same panel. To use a scheme, open any section and pick it in the **Color scheme** list.

Tip: Pick text and background colors with strong contrast. Aim for a ratio of at least 4.5 to 1. Low contrast is hard to read and can cost you sales. The theme cannot fix a low-contrast pair for you.

## Layout

| Setting | What it does |
|---|---|
| **Page width** | The widest the page content gets on large screens. Choose **Narrow**, **Standard**, or **Wide**. Standard is the default. |
| **Page margin** | The space between the page content and the screen edge, from 12 to 64 pixels. The default is 20. |
| **Show breadcrumbs** | Shows a trail such as Home / Living / Oak stool above product, collection, blog and page content. Off by default. |
| **Show back-to-top button** | A small button in the corner that appears after a screen of scrolling and returns to the top. On by default. |

Stores in Arabic, Hebrew, Persian or Urdu switch to a right-to-left layout automatically.

## Shape

These settings control how rounded the corners are across the store. Setting everything to 0 gives a sharp, architectural look. Higher numbers feel softer.

| Setting | Range | What it controls |
|---|---|---|
| **Button corner radius** | 0 to 40 px | Buttons. |
| **Input corner radius** | 0 to 20 px | Text fields, selects, and quantity boxes. |
| **Card corner radius** | 0 to 32 px | Product cards and other card-style blocks. |
| **Border thickness** | 0 to 3 px | The thickness of outlines and dividers. Set to 0 to remove them. |
| **Accent line thickness** | 1 to 8 px | The bold rules under section headings, above cards and along timelines. Transom uses 4 px, Plinth 1 px, Mullion 2 px. |

## Product cards

These settings apply to product cards across the store: collections, search, recommendations and the cart. Sections that have their own image ratio setting, such as **Featured collection**, use that instead.

| Setting | What it does |
|---|---|
| **Image ratio** | **Square**, **Portrait** (4:5) or **Tall** (3:4). Use the ratio most of your product photos already have. |
| **Alignment** | Puts the title, rating and price on the left or in the center. |
| **Show second image on hover** | Swaps to the product's second image when a shopper hovers over the card. |
| **Show color swatches** | Shows the colors of the product's first swatch option under the price. |
| **Show product rating** | Shows stars and the review count under the title. Uses the product rating metafield that review apps write (`reviews.rating`), so it appears only on products that have reviews. |

## Swatches

Color options can show as swatches on product pages, in the bundle builder and on product cards.

1. **Shopify swatches first.** If you set a color or image on an option value in Shopify admin (Products > the product > the option), the theme uses it.
2. **Option names shown as swatches:** Which options become swatches when Shopify has no swatch for them, for example `Color, Colour, Finish`. Separate names with commas.
3. **Swatch style:** **Color** draws the color from your custom list. **Variant image** shows each variant's own photo, which suits clothing.
4. **Swatch shape:** **Circle** or **Square**.
5. **Custom colors:** One color per line, as `Name: #hex`, for example `Ink blue: #1F3A5F`. Names match option values without regard to capital letters.

A value the theme can't draw stays a normal labelled button.

## Motion

| Setting | What it does |
|---|---|
| **Set content in place on scroll** | Content rises into place as visitors scroll. It is turned off automatically for visitors whose device is set to reduce motion. It is on by default. |

## Cart

These settings control the cart experience. They are the foundation of most [selling tools](https://lintelagency.com/support/transom/sell-more.md).

### Cart type and notes

| Setting | What it does |
|---|---|
| **Cart type** | **Drawer** slides in from the side. **Popup** opens as a centered window. **Page** sends shoppers to a full cart page after they add a product. |
| **Enable order notes** | Shows an "Add a note to your order" field in the cart. The note is saved with the order. |

When a shopper is already on the cart page, adding items refreshes that page instead of opening the drawer or popup.

### Cart goals

Shows customers how close they are to a reward. Amounts are in your store currency. Each reward must match a real automatic discount or shipping rate you set up in Shopify admin, or customers won't receive it.

| Setting | What it does |
|---|---|
| **Show cart goals** | Turns the progress bar on or off. |
| **Goal 1 amount** and **Goal 1 reward** | The first threshold and the text shown at it, such as 50 and "Free shipping". |
| **Goal 2 amount** and **Goal 2 reward** | The second threshold and reward. |
| **Goal 3 amount** and **Goal 3 reward** | An optional third threshold and reward. |

A goal shows only when it has both an amount above zero and reward text. See [Cart goals](https://lintelagency.com/support/transom/sell-more.md#cart-goals) for how to set up the matching discounts.

### Cart recommendations

| Setting | What it does |
|---|---|
| **Show product recommendations in cart** | Shows a short product list in the cart. |
| **Product source** | **Automatic recommendations** uses Shopify's suggestions based on the first item in the cart. **Collection** shows products from one collection you choose. |
| **Collection** | The collection to use when the source is **Collection**. |
| **Heading** | The title above the list. |

### Gift wrapping

| Setting | What it does |
|---|---|
| **Gift wrapping product** | Create a gift wrapping product and select it. Customers add it to their cart with one click. |

The gift wrap is a real product, so it has a real price and can track stock. It does not appear if the product is sold out or not selected.

## Social media

Add the full web address (URL) of each account you use. Accounts you leave empty are not shown. The links appear in the footer's **Social media** block.

Available networks: **Facebook**, **Instagram**, **TikTok**, **X (Twitter)**, **Threads**, **YouTube**, **Pinterest**, **Snapchat**, **Tumblr**, and **Vimeo**.

## Things set outside theme settings

Some store-wide items are not in theme settings:

- **Menus:** Edit under **Content > Menus**. The header uses the menu named "Main menu" and the footer uses "Footer" by default. You can choose other menus in the header and footer sections.
- **Languages:** Add under **Settings > Languages**. See the [FAQ](https://lintelagency.com/support/transom/faq.md#which-languages-does-transom-support).
- **Countries and currencies:** Set under **Settings > Markets**. The header and footer can show selectors for both.
- **Filters on collection pages:** Set up in the free Shopify Search and Discovery app.
- **Checkout:** Customized under **Settings > Checkout**. Theme settings do not change the checkout page.