Theme settings
Open the theme editor and select the gear icon (Theme settings). These settings apply to the whole store. Settings that belong to one section live in that section; see Sections and blocks.
Colors
Terrazza uses color schemes. Each section has a Color scheme setting that picks one of them, so a scheme change updates every section that uses it.
The theme ships with four schemes:
| Scheme | Background | Text | Used by default for |
|---|---|---|---|
| Stone | #F8F7F4 stone white | #1A1918 | Most sections |
| Soft | #F0EFEB | #1A1918 | Material story, Newsletter |
| Ink | #1A1918 | #F8F7F4 | Announcement bar, footer newsletter band |
| Accent | #E9E4DA | #1A1918 | Free for your own use |
Each scheme has eight colors:
| Setting | What it colors |
|---|---|
| Background | The section background |
| Text | Headings and body text |
| Muted text | Secondary text: subheadings, labels, prices on cards, captions |
| Hairline | Thin decorative dividers |
| Control border | Outlines of buttons, swatches, size options, filter chips and form fields |
| Soft panel | Panels inside the section, such as the delivery cards |
| Button | The filled primary button |
| Button label | Text on the filled primary button |
Keep text readable. Muted text needs a contrast of at least 4.5:1 against Background, and Control border needs at least 3:1. The default schemes meet both. If you change colors, check them with a contrast checker such as WebAIM's.
Typography
| Setting | Default | Notes |
|---|---|---|
| Headings | Instrument Serif | Any font from Shopify's font library |
| Body | Instrument Sans | Used for body text, buttons, labels and forms |
| Type scale | 100% | 90–120%. Scales every text size together |
Italic text in a heading (select a word and press the I button in a heading field) sets that word in the heading font's italic. Terrazza uses this for accents such as "Where will it live?".
Layout
| Setting | Default | Range | Notes |
|---|---|---|---|
| Page width | 1440 px | 1200–1600 px | Maximum width of the content on large screens |
| Section spacing | 96 px | 48–128 px | Space between sections on desktop. Phones use two thirds |
| Button corner radius | 40 px | 0–40 px | 40 makes a full pill; 0 makes square buttons |
| Card corner radius | 3 px | 0–12 px | Panels and cards |
| Media corner radius | 0 px | 0–24 px | Images and videos |
Product cards
| Setting | Default | Notes |
|---|---|---|
| Image ratio | Portrait | Portrait (4:5), Square, or Natural (each card follows its own image) |
| Show swatches | On | Shows up to four swatches on each card, plus a "+N" count for more |
| Show second image on hover | On | On devices with a mouse, shows the product's second image when the pointer is over the card |
Swatches
| Setting | Default | Notes |
|---|---|---|
| Shape | Circle | Circle, Square or Rounded |
| Size | 46 px | 32–56 px. Sets the color swatches on the product page; the small dots on product cards keep their own size. The tap area never drops below 44 px. |
| Swatch option names | Color, Colour, Finish, Material | Comma-separated product option names shown as swatches. Any option with Shopify swatches set in the admin is shown as swatches too |
| Card tags | New, Handmade | Comma-separated product tags. A product card shows the first of its tags found in this list as a small label on the image |
How a swatch gets its picture, in this order:
- The Shopify swatch of the option value (an image or a color), set in the product's variant options.
- A crop of the variant's photo, centered on the image's focal point. This is what most stores use, because it shows the real material.
- The variant's Swatch color metafield (
terrazza.swatch_color). - A text label with the value name.
See Product metafields for when to use each.
Product
| Setting | Default | Notes |
|---|---|---|
| Preferred option value | M | A product opens on the first available variant with this option value, such as a size. Leave empty to open on the first available variant |
| Dimension units | Imperial first | Imperial first (15.7" / 40 cm), Metric first, Imperial only or Metric only. Used by "Will it fit?", the size buttons and the details accordion. Each Dimensions block can override it |
Cart
| Setting | Default | Notes |
|---|---|---|
| Cart type | Drawer | Drawer opens a slide-out cart after adding to cart. Page goes to the cart page |
| Free shipping threshold | 0 | In cents, for example 25000 for $250. 0 turns the progress bar off. See Cart and free shipping |
Images
| Setting | Default | Notes |
|---|---|---|
| Blend white product photo backgrounds | Off | Multiplies product photos into the page color, so photos shot on pure white blend into the stone-white background. Leave it off for lifestyle photos |
Animations
| Setting | Default | Notes |
|---|---|---|
| Animate sections on scroll | On | Sections fade in gently as they scroll into view. Visitors who ask their device for reduced motion never see animations |
Social media
Enter the full URL of each profile, for example https://www.instagram.com/yourstore. The footer shows an icon for every filled-in link and hides the rest.
| Setting | Example |
|---|---|
| Instagram link | https://www.instagram.com/yourstore |
| Pinterest link | https://www.pinterest.com/yourstore |
| Facebook link | https://www.facebook.com/yourstore |
| TikTok link | https://www.tiktok.com/@yourstore |
| YouTube link | https://www.youtube.com/@yourstore |
| X (Twitter) link | https://x.com/yourstore |
| Threads link | https://www.threads.net/@yourstore |
| Snapchat link | https://www.snapchat.com/add/yourstore |
| Tumblr link | https://yourstore.tumblr.com |
| Vimeo link | https://vimeo.com/yourstore |
Favicon
Upload a square image of at least 32 × 32 px. It appears in browser tabs and bookmarks.
Text that isn't a setting
A few fixed phrases, such as "Will it fit?", "Pairs well with", the returns line in the Delivery & returns accordion and button labels, are theme text rather than settings. Change them in Online Store > Themes > ... > Edit default theme content. Search for the phrase and type your own wording.