Theme settings apply to the whole store, unlike section settings, which apply to one section. To open them, go to Online Store in your Shopify admin, click Edit theme for Masthead, then click the Theme settings icon in the theme editor.
The groups below are in the order the editor shows them. The three presets start with different values for some of these settings; see Presets for the differences. Defaults shown here are the Masthead preset's.
Logo
Your logo and favicon. Upload the logo at least twice as wide as you plan to show it, so it stays sharp on high-density screens. A PNG with a transparent background sits cleanly on every color scheme.
| Setting | Options | What it does |
|---|---|---|
| Logo | Image. | Your logo in the header, on the password page and on gift cards. Without one, your store name is shown as text in the heading font. |
| Logo width | 60 px to 260 px. Default: 120 px. | The logo's width in the header bar. With the header's Desktop layout set to Masthead, the large logo above the menu is shown at 2.4 times this width. |
| Favicon | Image. | The small icon in the browser tab. Upload a square image; it is displayed at 32 x 32px. |
Colors
Masthead colors your store with color schemes. A scheme is a set of colors that work together: a background, a text color, an accent, button colors and a sale color. The theme comes with five, and you can edit them or add your own.
You don't color sections one by one. Each section, the header, the footer and the cart drawer has a Color scheme setting, and you pick one of your schemes there. Change a scheme here and every section that uses it follows.
The colors in a scheme
| Setting | Options | What it does |
|---|---|---|
| Background | Color. Default: #F5F2EC. | The section's background. |
| Background gradient | Gradient. | An optional gradient that replaces the background color wherever the background is shown. Check that text stays readable across the whole gradient. |
| Text | Color. Default: #1B1A17. | Headings and body text. Muted text and borders are drawn from this color at reduced strength, and the theme raises that strength by itself when a scheme needs it to stay readable. |
| Accent | Color. Default: #8A4B2F. | Links and highlights. |
| Button | Color. Default: #1B1A17. | The fill of solid buttons. |
| Button label | Color. Default: #F5F2EC. | The label on solid buttons. Pick a color that contrasts with Button. |
| Sale price and badge | Color. Default: #A63A2B. | Sale prices and the sale badge. Choose a color that is easy to read on this scheme's background. |
Check contrast when you edit a scheme. Text should stand out clearly from the background, and the button label from the button. The theme keeps muted text and borders readable for you, but it cannot fix a text color that is too close to its background.
| Setting | Options | What it does |
|---|---|---|
| Status colors | ||
| Success | Color. Default: #2F6B4F. | Confirmation messages, for example after a customer signs up or sends the contact form. |
| Error | Color. Default: #B3261E. | Form errors and the outline of a field that needs correcting. |
Typography
Three typefaces set the tone of the whole store: one for headings, one for body text, and an optional accent face. All three come from Shopify's font library, which also serves them, so there is nothing to upload or host.
| Setting | Options | What it does |
|---|---|---|
| Headings | ||
| Font | Font. Default: Fraunces, light. | The typeface for headings, from Shopify's font library. |
| Size scale | 80% to 140%. Default: 100%. | Makes every heading larger or smaller together. 100% is the theme's designed size. |
| Letter spacing | -4 to 4. Default: -2. | The space between letters in headings, in hundredths of an em. Negative values tighten, which usually suits large serif headings. |
| Case | Default or Uppercase. Default: Default. | Uppercase sets every heading in capitals, whatever case you typed. |
| Body | ||
| Font | Font. Default: Instrument Sans, regular. | The typeface for paragraphs, product details, menus and forms. |
| Size scale | 90% to 120%. Default: 100%. | Makes all body text larger or smaller together. |
| Accent | ||
| Font | Font. Default: Instrument Serif, regular. | A third typeface. It is used by heading and text blocks whose Font is set to Accent, for pull quotes, captions and similar touches. |
Layout
The page's proportions: how wide content runs, how much air sits around it, and whether sections are numbered like the pages of a magazine.
| Setting | Options | What it does |
|---|---|---|
| Page width | Narrow, Standard or Wide. Default: Standard. | The widest your content gets on large screens: Narrow is 1280px, Standard is 1520px and Wide is 1800px. Sections set to full width ignore it. |
| Page margin | 20 px to 80 px. Default: 48 px. | The space between content and the left and right edges of the screen on desktop. It scales down automatically on smaller screens. |
| Space between sections | 32 px to 160 px. Default: 112 px. | The space above and below each section on desktop. It scales down automatically on smaller screens, and each section can reduce or remove it with its own Top spacing and Bottom spacing. |
| Grid spacing | 0 px to 40 px. Default: 24 px. | The space between items in product grids, collection lists and other grids. |
| Number sections | On or off. Default: on. | Labels each section with its place on the page, for example No. 03, beside its eyebrow text. Turn it off for a plainer look; the eyebrow text stays. |
Buttons and corners
One place to decide how sharp or soft the store feels. Square buttons and corners read as editorial and formal; rounded ones read as friendlier.
| Setting | Options | What it does |
|---|---|---|
| Shape | Square, Rounded or Pill. Default: Square. | The corners of every button: Square, Rounded or fully rounded with Pill. |
| Border thickness | 1 px to 3 px. Default: 1 px. | The outline thickness of buttons. |
| Uppercase button labels | On or off. Default: on. | Sets button labels in small, widely spaced capitals. Off, labels keep the case you typed and are set slightly larger. |
| Inputs | ||
| Corner radius | 0 px to 20 px. Default: 0 px. | Rounds the corners of text fields, dropdowns and other form inputs. |
| Images and media | ||
| Corner radius | 0 px to 24 px. Default: 0 px. | Rounds the corners of images and videos across the store. |
Product cards
How products look wherever they appear in a grid or a row: collection pages, search results, featured collections, recommendations and recently viewed products. These settings apply everywhere at once, so cards always match.
| Setting | Options | What it does |
|---|---|---|
| Image ratio | Portrait (4:5), Square (1:1) or Natural. Default: Portrait (4:5). | The shape every product image is cropped to in grids. Natural keeps each image's own shape, so use it only when your product photos share one ratio. |
| Show second image on hover | On or off. Default: on. | On devices with a mouse, shows the product's second image when the card is hovered. Products with one image are unaffected. |
| Number products in grids | On or off. Default: on. | Shows 01, 02, 03 before each product name, like captions in a lookbook. |
| Show vendor | On or off. Default: off. | Shows the product's vendor above its name. |
| Show color swatches | On or off. Default: on. | Shows the product's color swatches under its name. The swatches come from your product options in Shopify. When some values of an option have no swatch, that option is shown as text labels instead. |
| Show quick add button | On or off. Default: on. | Adds a quick add button to each card. Products with one variant go straight to the cart; others open a quick view to choose options. |
| Badges | ||
| Show sale badge | On or off. Default: on. | Shows a sale badge on products with a compare-at price. |
| Show sold out badge | On or off. Default: on. | Shows a sold out badge on products that are out of stock. It takes the place of the sale badge. |
Add your own badge
Besides the sale and sold out badges, a product can carry a badge with your own words, such as "New" or "Limited".
- In your Shopify admin, go to Settings > Metafields and metaobjects > Products, and click Add definition.
- Name it Badge. Check that the namespace and key read
custom.badge. - Choose the type Single line text, then save.
- Open a product, scroll to its metafields, and type the badge text in Badge.
The badge appears on that product's card. Products with an empty field show no custom badge.
Product options
Tells the theme which product options should be shown as a row of buttons, such as sizes, instead of a dropdown.
| Setting | Options | What it does |
|---|---|---|
| Option names shown as buttons | Text. | A comma-separated list of option names, for example: Size, Length. Matching options appear as buttons in collection filters, and in the variant picker when its Style is set to Automatic. |
Cart
Whether the cart opens as a drawer or a page, and what it shows.
| Setting | Options | What it does |
|---|---|---|
| Cart type | Drawer or Page. Default: Drawer. | Drawer opens the cart in a panel at the side of the page, so customers keep their place. Page uses the full cart page instead. |
| Drawer color scheme | Color scheme. | The color scheme of the cart drawer. The filter drawer, the size chart drawer, the quick view and the gift card page use it too. |
| Show order note field | On or off. Default: on. | Lets customers add a note to their order in the cart. |
| Show vendor | On or off. Default: off. | Shows each product's vendor in the cart. |
Search behavior
Controls the suggestions shown while a customer types in the header search.
| Setting | Options | What it does |
|---|---|---|
| Show search suggestions | On or off. Default: on. | Suggests products, collections, pages and articles under the header search field as customers type. |
Currency format
How prices are written across the store.
| Setting | Options | What it does |
|---|---|---|
| Show currency codes | On or off. Default: off. | Adds the currency code after every price, for example $10.00 USD. Useful when you sell in more than one currency. |
Social media
Links to your social profiles. Each one you fill in appears as an icon in the footer, when the footer's Show social media icons setting is on. Leave a field empty to hide that icon.
| Setting | Options | What it does |
|---|---|---|
| Link. | Your Instagram profile link. | |
| TikTok | Link. | Your TikTok profile link. |
| Link. | Your Pinterest profile link. | |
| Link. | Your Facebook page link. | |
| YouTube | Link. | Your YouTube channel link. |
| X | Link. | Your X profile link. |
Animations
The scroll animations that give the theme its editorial feel.
| Setting | Options | What it does |
|---|---|---|
| Reveal content on scroll | On or off. Default: on. | Headings rise into place and images are uncovered as customers scroll. Customers who have asked their device to reduce motion never see these animations. |