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 the store carries magazine-style numbers.
| 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. |
| Show editorial numbering | On or off. Default: off. | Adds magazine-style numbers across the store: section labels such as No. 03 beside the eyebrow text, and 01, 02, 03 on product cards, collection cards, lists and chapters. Off by default. Numbers that match a hotspot to its product always show, because customers need them. |
Editorial numbering
Show editorial numbering is one switch for every number the theme can add: the No. 03 label beside a section's eyebrow text, and the 01, 02, 03 on product cards, collection cards, lists and lookbook chapters. It is off by default, for a plainer look. Turn it on for the full magazine feel.
With it on, you can still leave the number off one section: select its Heading block and turn off Show section number.
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. |
| Buttons on images | ||
| Button | Color. Default: #FFFFFF. | The fill of the first button where buttons sit over a photo or video: in the Image banner, the Slideshow and the Cover hero. |
| Button label | Color. Default: #1B1A17. | The label on that button. Pick a color that contrasts with Button. |
| Outline button border | Color. Default: #FFFFFF. | The outline of the second button over a photo or video. Keep it bright enough to show on your images. |
| Outline button label | Color. Default: #FFFFFF. | The label of the second button over a photo or video. |
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. |
| 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. |
| Sizes on hover | ||
| Show sizes on hover | On or off. Default: off. | On desktop, hovering over a card, or moving keyboard focus to it, lists the product's sizes, with sold out sizes crossed out. The list takes the place of the quick add button. Touch screens have no hover, so phones and tablets keep the quick add button. |
| Option name | Text. | The name of the product option to list, as you typed it on your products, for example Size. Capital letters do not matter. Products without this option keep the quick add button. |
| Quick add from sizes | On or off. Default: off. | Selecting a size on the card adds that size to the cart. Products with a second option, such as color, open the quick view instead, so the customer can choose it. When off, the sizes are shown for information only. |
| 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. |
Sizes on hover
With Show sizes on hover on, a card lists the product's sizes when a customer hovers over it on desktop, so they can see at a glance whether their size is available. Sold out sizes are crossed out.
- In theme settings, open Product cards and turn on Show sizes on hover.
- In Option name, type the name of your size option exactly as it is on your products, for example Size.
- To let customers add a size to the cart straight from the card, turn on Quick add from sizes.
The sizes take the place of the quick add button on desktop. Phones and tablets, which have no hover, keep the quick add button.
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, including the free shipping bar and the products suggested in the drawer. Cart walks through both.
| 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. |
| Free shipping bar | ||
| Show free shipping bar | On or off. Default: off. | Shows a progress bar in the cart drawer and on the cart page: how much more to spend for free shipping, then a message once the amount is reached. Off by default. Turn it on only if you really offer free shipping from the amount below. |
| Free shipping from | Number. Default: 100. | The order value at which shipping becomes free, in your store's main currency, as a number without a symbol. For customers paying in another currency, the theme converts it at the current rate. See the note on currencies under the table. |
| Recommendations in the cart drawer | ||
| Show recommended products | On or off. Default: on. | Suggests products that go with the item added last, at the bottom of the cart drawer. They load only after the drawer opens, so they never slow the page. |
| Heading | Text. | The heading above the suggested products. |
| Products to show | 2 to 4. Default: 3. | The most products to suggest. |
Free shipping and other currencies
Free shipping from is set once, in your store's main currency. A customer paying in another currency sees the amount converted at the current exchange rate.
If you use Shopify Markets with price rounding, your real free shipping rate in that market may be a rounded figure, so the bar and the checkout can differ by a small amount. If you sell in several currencies, check the bar in each one against your shipping rates before you turn it on.
Search behavior
Controls the search panel that opens from the header: the suggestions shown while a customer types, and the links shown before they do.
| 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. |
| Show product prices | On or off. Default: on. | Shows each suggested product's price, with the compare-at price when it is on sale. |
| Show vendor | On or off. Default: off. | Shows each suggested product's vendor above its name. |
| Suggested links | Menu. | A menu whose links are shown in the search panel before the customer types, for example popular searches or your main collections. Leave it empty to show none. |
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 wherever you add a Social media icons block: in the footer and in the Contact info section. 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. |