# Theme settings

> Settings that apply to the whole store – logo, typography, layout, shapes, product cards, animations, search, social links and a few extras.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/theme-settings/

Open **Online Store › Themes › Customize** and select the brush icon to see **Theme settings**. Colors and the cart have pages of their own: [Colors and dark mode](https://themelab.page/tally/docs/colors.md) and [Cart](https://themelab.page/tally/docs/cart.md).

Each group below starts with what you will use most, followed by a table with every setting in the group, its options and its default value in the Tally preset. The Poster and Petal presets start with different values for some of them.

## Help and documentation

The first group in Theme settings links to these docs, the FAQ, the launch checklist and support, so help is one click away while you edit.

## Logo and favicon

- **Logo:** upload your logo and set its width separately for desktop and mobile. Without a logo image, the store name shows as a **text logo**; set its size and whether it is lowercase.
- **Logo in dark mode:** used instead of the logo while shoppers browse in dark mode. Leave it empty if your logo works on dark backgrounds.
- **Small text next to the logo:** a small superscript after the text logo – the number of products in your store, your own text (for example "Since 1998") or nothing.
- **Favicon:** the small icon in the browser tab. A square image of at least 32 × 32 px works best.
- **Image for sharing:** shown when a page without its own image is shared on social media or in messages. Use 1200 × 628 px.

> **Tip**
>
> The Header section has its own **Logo** setting. Leave it empty to use the logo from Theme settings, which also shows on the password page.

**Theme settings: Logo and favicon** (10 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Logo** | Image | – |
| **Logo in dark mode** – Used while shoppers browse in dark mode. Leave empty to keep the logo above. | Image | – |
| **Logo width on desktop** | 20–300px (step 5) | 100px |
| **Logo width on mobile** | 20–200px (step 5) | 80px |

*Text logo*

| Setting | Options | Default |
| --- | --- | --- |
| **Text logo size** | 16–48px (step 1) | 24px |
| **Lowercase text logo** | Checkbox | On |
| **Small text next to the logo** | None · Number of products · Custom text | None |
| **Custom text** | Text | Sample text |

*Favicon*

| Setting | Options | Default |
| --- | --- | --- |
| **Favicon** – Will be scaled down to 32 x 32px | Image | – |
| **Image for sharing** – Shown when a page without its own image is shared on social media or in messages. 1200 × 628 px works best. | Image | – |

## Typography

- **Heading font** and **Body font** come from the Shopify font library. Fonts from the library are served by Shopify and load fast; you cannot upload your own font files in the editor.
- **Heading size**, **Heading letter spacing** and **Heading line height** shape every heading in the store. Letter spacing is in thousandths of an em: −45 is the tight Tally look, 0 is the font's own spacing.
- **Heading size on mobile** scales headings on phones on top of the heading size, so long headings fit small screens.
- **Use an accent font** adds a third font for labels, small headings above titles, badges and product card subtitles, optionally in uppercase.
- **Use even-width numbers** keeps prices and counts aligned in lists and tables.
- **Button font** uses the body or heading font for buttons, optionally in uppercase.

**Theme settings: Typography** (14 settings, in editor order)

*Headings*

| Setting | Options | Default |
| --- | --- | --- |
| **Heading font** | Font | Instrument Sans Medium |
| **Heading size** | 70–150% (step 5) | 100% |
| **Heading letter spacing** – In thousandths of an em. | -60–40em (step 5) | -45em |
| **Heading line height** | 80–130% (step 2) | 100% |
| **Uppercase headings** | Checkbox | Off |

*Body*

| Setting | Options | Default |
| --- | --- | --- |
| **Body font** | Font | Instrument Sans |
| **Body size** | 80–130% (step 5) | 100% |

*Accent font*

| Setting | Options | Default |
| --- | --- | --- |
| **Use an accent font** – For labels, small headings above titles, badges and product subtitles. | Checkbox | Off |
| **Accent font** | Font | Courier New |
| **Uppercase accent text** | Checkbox | On |
| **Heading size on mobile** – On top of the heading size above. | 70–120% (step 5) | 100% |
| **Use even-width numbers** – Keeps prices and counts aligned in lists. | Checkbox | On |

*Buttons*

| Setting | Options | Default |
| --- | --- | --- |
| **Button font** | Body · Heading | Body |
| **Uppercase buttons** | Checkbox | Off |

## Layout

**Page width** sets the widest the content gets on large screens. **Side spacing** is the space between the content and the screen edge. **Column spacing** and **Row spacing** are the default gaps in product grids and other grids.

Grid sections (Featured collection, Collection list, Multicolumn, Blog posts and others) use these values unless you turn on **Use custom spacing** in the section.

**Theme settings: Layout** (6 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Page width** | 1000–1800px (step 20) | 1420px |
| **Side spacing on desktop** | 12–64px (step 4) | 32px |
| **Side spacing on mobile** | 8–32px (step 2) | 16px |
| **Column spacing on desktop** | 4–48px (step 2) | 20px |
| **Row spacing on desktop** | 8–80px (step 4) | 20px |
| **Column spacing on mobile** | 4–32px (step 2) | 12px |

## Shapes

- **Button and chip corner radius**, **Input and search corner radius**, **Image corner radius** and **Tile and panel corner radius** round the corners of each kind of element. 0 is square; 40 makes buttons fully rounded pills.
- **Image shape in editorial sections:** *Arch* rounds the top of the images in Image with text, Collection list and Multicolumn. Portrait images show the arch best.
- **Line thickness** sets the width of lines and outlines (1–3 px).
- **Icon line weight** makes the theme's built-in line icons thinner or bolder.
- **Soft shadow under dropdowns and popovers** adds a gentle shadow under floating panels. Turn it off for a completely flat look.

**Theme settings: Shapes** (8 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Button and chip corner radius** – 40 makes fully rounded pills. | 0–40px (step 2) | 40px |
| **Input and search corner radius** | 0–40px (step 2) | 40px |
| **Image corner radius** | 0–32px (step 1) | 4px |
| **Image shape in editorial sections** – Arch rounds the top of the images in image with text, collection list and multicolumn sections. | Corner radius · Arch | Corner radius |
| **Tile and panel corner radius** | 0–32px (step 1) | 12px |
| **Line thickness** | 1–3px (step 1) | 1px |
| **Icon line weight** – For the theme's line icons in menus, buttons and sections. | 1–2.4 (step 0.2) | 1.6 |
| **Soft shadow under dropdowns and popovers** | Checkbox | On |

## Product cards

Product cards appear in every product grid and carousel: collections, search, featured collections, recommendations, recently viewed and the cart add-ons.

- **Card style:** *Minimal* (photo and text), *Framed with a line* (a border around the card and a line above the title) or *Tile on a soft background* (a rounded tile in the color scheme's surface color with centered text). The list view on collection pages keeps its rows in every style.
- **Image ratio** and **Image fit:** crop every photo to the same shape (square, portrait or landscape) or keep each photo's own shape with *Adapt to image*. *Fit inside* shows the whole product on the image background.
- **Browse photos on the card:** for products with several photos, shoppers get arrows on hover, can swipe on touch screens and see dots for the current photo. This replaces the second image on hover.
- **Play the product video on hover:** plays the product's first video, muted, over the first photo while the pointer is on the card. The video only loads on hover; touch screens and shoppers who reduce motion see the photos.
- **Quick add button:** show it on hover, always, or hide it.
- **Products with options:** show a **Details** button that leads to the product page (default), or open a quick add window where shoppers pick a size and color. Products with a single variant are always added straight from the card.
- **Show product type:** shows the product type under the title, or the `custom.subtitle` metafield when the product has one. See [Metafields](https://themelab.page/tally/docs/metafields.md).
- **Show product rating:** needs a reviews app that fills the standard rating metafield.
- **Show color dots** and **Show number of colors:** small swatches for the product's colors and a "3 colors" label. See [Color swatches](https://themelab.page/tally/docs/product-page.md#color-swatches).

### Compare

With **Let customers compare products** on, every card gets a quiet **Compare** checkbox (it also works from the keyboard with Space or Enter). Up to four products collect in a tray at the bottom of the screen and open side by side in a table with their vendor, type, availability, rating, options and weight. "Show differences only" hides the rows where all products are the same.

To add your own rows (material, size, capacity…), create a product metafield of type *Multi-line text*, fill it with one `Label: value` pair per line and enter its `namespace.key` in **Specifications metafield**. The Specifications block on the product page reads the same metafield. See [Specifications](https://themelab.page/tally/docs/product-page.md#specifications).

### Tags

Cards show small tags on the photo: **Sale** (as text, percent off or amount off), **Sold out** and **New** (for products published in the last 1–90 days). Add your own tag text with the product metafield `custom.badge`, or with a product tag that starts with `badge:` – for example `badge:Bestseller`.

**Theme settings: Product cards** (23 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Card style** | Minimal · Framed with a line · Tile on a soft background | Minimal |
| **Image ratio** | Square · Portrait · Landscape · Adapt to image | Square |
| **Image fit** | Fill · Fit inside | Fill |
| **Show image background** – Uses the image background color of the color scheme. | Checkbox | On |
| **Browse photos on the card** – For products with more photos: arrows on hover, swipe on touch screens and dots for the current photo. Replaces the second image on hover. | Checkbox | On |
| **Photos per card** | 2–8 (step 1) | 5 |
| **Show second image on hover** | Checkbox | On |
| **Play the product video on hover** – For products with a video. It plays muted over the first photo while the pointer is on the card. Not on touch screens or with reduced motion. | Checkbox | Off |
| **Quick add button** | Show on hover · Always show · Hidden | Show on hover |
| **Products with options** – Products with a single variant are always added to the cart from the card. | Pick options in a quick add window · Go to the product page with a Details button | Go to the product page with a Details button |
| **Title and price** | Same row · Stacked | Same row |
| **Show vendor** | Checkbox | Off |
| **Show product type** – Uses the custom.subtitle metafield when it exists. | Checkbox | Off |
| **Show product rating** – Needs a reviews app that fills the standard rating metafield. | Checkbox | Off |
| **Show color dots** | Checkbox | On |
| **Show number of colors** | Checkbox | On |

*Compare*

| Setting | Options | Default |
| --- | --- | --- |
| **Let customers compare products** – Adds a Compare checkbox to product cards. Up to 4 products are compared side by side in a table. | Checkbox | On |
| **Specifications metafield** – Product metafield (namespace.key) of type multi-line text with one Label: value pair per line. Each label becomes a row in the table. | Text | Sample text |

*Tags*

| Setting | Options | Default |
| --- | --- | --- |
| **Show sale tag** | Checkbox | On |
| **Sale tag text** | Sale · Percent off · Amount off | Sale |
| **Show sold out tag** | Checkbox | On |
| **Show new tag** | Checkbox | On |
| **Products count as new for** | 1–90d (step 1) | 21d |

Custom tag text comes from the product metafield custom.badge, or from a product tag that starts with badge: (for example badge:Bestseller).

## Animations

- **Reveal sections on scroll** fades (or fades and lifts) sections in as they come into view. Each section also has an **Animate on scroll** setting under Advanced.
- **Animation speed** makes every animation in the theme slower or faster.
- **Zoom images slightly on hover** gives images with a link a gentle zoom.
- **Page transitions:** *Fade* or *Fade and slide* between pages, in browsers that support view transitions (Chrome, Edge, Safari 18.2 and newer). The header stays in place while the page changes. With **Grow product photos into the product page**, the photo of the clicked product card grows into the product gallery.
- **Instant navigation:** when a shopper hovers over a link or touches it, the browser loads that page in advance, so it opens almost at once. *Instant* prepares the whole page, *Fast* only downloads it. Cart, checkout, account, app and policy pages are never loaded in advance. Works in Chrome and Edge; analytics and apps keep working because every page is still a normal page load.
- **Add to cart animation:** the cart count flashes, the product photo flies to the cart, or nothing moves.
- **Intro animation:** shows the store name (or your own text) on a full-screen color for a moment when a shopper arrives – once per visit, only on the home page, or on every page.

> **Note:** Reduced motion
>
> Shoppers who turn on *reduce motion* in their device settings get no reveal animations, page transitions, video previews or intro. Everything still works; it just does not move.

**Theme settings: Animations** (13 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Reveal sections on scroll** | Checkbox | On |
| **Reveal style** | Fade · Rise | Fade |
| **Animation speed** – Higher is slower. | 50–200% (step 10) | 100% |
| **Zoom images slightly on hover** | Checkbox | On |
| **Page transitions** – Smooth changes between pages in browsers that support view transitions. Others change pages as usual. | None · Fade · Fade and slide | Fade |
| **Grow product photos into the product page** | Checkbox | On |
| **Instant navigation** – Loads a page while the shopper hovers or touches its link, so it opens almost at once (Chrome and Edge). Instant prepares the whole page in the background; Fast only downloads it. Cart, checkout, account and app pages are never preloaded. | Off · Fast · Instant | Instant |
| **Add to cart animation** | Cart count flashes · Product flies to cart · None | Cart count flashes |

*Intro*

| Setting | Options | Default |
| --- | --- | --- |
| **Show intro animation** | Checkbox | Off |
| **Show intro** | Once per visit · On home page only · On every page | Once per visit |
| **Intro text** – Leave empty to show the store name. | Text | – |
| **Intro color scheme** | Color scheme | Scheme 1 |
| **Intro duration** – In tenths of a second. | 4–30ds (step 1) | 10ds |

## Search settings

These settings control the search suggestions that open from the header search bar or icon. The search bar itself (bar or icon, width, the `/` key hint) is set in the [Header section](https://themelab.page/tally/docs/header-and-footer.md#search-bar), and the search results page in [Collections and search](https://themelab.page/tally/docs/collections-and-search.md#search-results).

- **Show suggestions while typing:** products, collections, pages and articles appear under the search field as shoppers type, with the matching words highlighted.
- **Popular searches:** a comma-separated list of searches shown as chips before the shopper types, for example `Mug, Linen napkins, Desk lamp`.
- **Products shown before typing:** the first four products of a collection you pick, shown when the search opens.

**Theme settings: Search** (5 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Show suggestions while typing** | Checkbox | On |
| **Show vendor in suggestions** | Checkbox | Off |
| **Show price in suggestions** | Checkbox | On |
| **Popular searches** – Comma separated, shown before typing. | Text | Sample text |
| **Products shown before typing** – Optional. Shows the first four products of this collection when the search opens. | Collection | – |

## Social media

Enter the full address of each profile, for example `https://instagram.com/yourstore`. The icons appear in the footer's **Logo and text** block when "Show social links" is on, and in the mobile menu.

**Theme settings: Social media** (7 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Instagram** – https://instagram.com/yourstore | Text | – |
| **TikTok** – https://tiktok.com/@yourstore | Text | – |
| **Facebook** | Text | – |
| **Pinterest** | Text | – |
| **YouTube** | Text | – |
| **X** | Text | – |
| **Threads** | Text | – |

## Currency and extras

- **Show currency codes** adds the currency code after prices (for example *€25.00 EUR*). Useful when you sell in several currencies.
- **Show back to top button** adds a small button that appears after scrolling down a long page.
- **Show added to cart message** shows a short confirmation when the cart drawer is set not to open after adding a product.

**Theme settings: Currency and extras** (3 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Show currency codes** | Checkbox | Off |
| **Show back to top button** | Checkbox | On |
| **Show added to cart message** – Used when the drawer does not open after adding. | Checkbox | On |

## Custom CSS

Shopify adds a **Custom CSS** field at the bottom of Theme settings and of every section. Use it for small visual tweaks only, and read [Customizing code](https://themelab.page/tally/docs/customizing-code.md) first.