Getting started · Transom theme guide

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

In your Shopify admin, go to Online Store > Themes and select Customize.
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.

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.

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.

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.
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.
Swatch style: Color draws the color from your custom list. Variant image shows each variant's own photo, which suits clothing.
Swatch shape: Circle or Square.
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.

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 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.

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.
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.