§00 / TANGENT DOCUMENTATION
REF: TG–DOC–00 · REV. 1.7
Set up Tangent and make it yours.
Guides for store owners, plus a reference for developers. Start with the quick start, then work through the settings.
TANGENT 1.7 / SHOPIFY OS 2.0 / UPDATED 2026-10-19
§A / Start here
- 01Quick start →Install, pick a preset, publish.
- 02Theme settings →Logo, colors, type, layout and more.
- 03Presets →Tangent, Selvedge, Muslin, Asphalt or Lumen.
- 04Sections →Every section that ships with Tangent.
- 05Metafields →The product data Tangent reads.
- 06Developers →Web components, event bus, CSS tokens.
§B / Overview
Everything described here is set in the Shopify theme editor. You do not need to edit code.
What's included
| Area | What you get |
|---|---|
| Sections | 51 sections, plus a header group and a footer group. Some sections are used only by the theme itself (for example Quick add, Predictive search and Cart drawer). |
| Theme blocks | Heading, Text, Button, Image, Spacer, Group and Custom Liquid. You can nest them in sections that accept theme blocks. |
| Cart | Drawer or page. Optional free shipping progress, product recommendations, a collection for the empty cart, gift wrap and order notes. |
| Product cards | Image ratio, second image on hover, color swatches, quick add with size buttons, sale, sold out, "New" and tag badges, optional star rating. |
| Presets | Tangent, Selvedge, Muslin, Asphalt and Lumen. |
| Languages | 33 storefront and editor languages. Arabic and Hebrew display right to left. |
Presets
A preset sets fonts, color schemes, layout widths, button and input corners, card ratio and swatch shape. Values below come from the theme's preset data.
| Preset (style) | Heading / body font | Main background / badge color | Card image ratio | Other differences |
|---|---|---|---|---|
| Tangent (Editorial style) | Archivo Narrow / Archivo Narrow | #FFFFFF / #E2B232 | Portrait (4:5) | 1600px page width, uppercase headings |
| Selvedge (Gallery style) | Playfair Display / Raleway | #F1EDE6 / #8C5A3C | Tall (2:3) | Square corners, headings as typed |
| Muslin (Minimal style) | Montserrat / Montserrat | #FAFAF8 / #D9CFC1 | Portrait (4:5) | Outline buttons, 24px button corners, wide heading letter spacing |
| Asphalt (Studio style) | Oswald / Work Sans | #0E0E0E / #E2B232 | Portrait (4:5) | Dark main scheme, full page width, square corners, square swatches |
| Lumen (Maison style) | Playfair Display / Assistant | #FBF6F3 / #E3B5AC | Portrait (4:5) | 24px button corners, Lift card hover, centered card text, star ratings on cards |
Design principles
- Whitespace. Layouts use a page margin and a section spacing setting, so the space between elements is consistent.
- Typography. One heading font and one body font, each chosen from the Shopify font library. Heading size, letter case, letter spacing and line height are global settings.
- Motion. Sections can reveal on scroll, banners can zoom slowly, and pages can use the browser's view transitions. Each can be turned off. Motion is always reduced for shoppers who turn on reduced motion on their device.
- Performance. No front-end framework and no build step. The core script is a deferred module, and feature scripts load only on pages that use them. Images below the fold load lazily with responsive sizes. Fonts load from Shopify with
font-display: swap.
Compatibility
| Item | Support |
|---|---|
| Platform | Shopify Online Store 2.0 with JSON templates. Sections accept app blocks. |
| Theme editor | Sections, blocks, color schemes and presets are all edited in the theme editor. |
| Languages | 33 locale files (locales/.json) with matching editor files (locales/.schema.json). |
| Right to left | The layout switches to right to left for Arabic, Hebrew, Persian and Urdu. Locale files ship for Arabic and Hebrew. |
| Accessibility | Keyboard focus is kept after cart, filter and menu updates. Cart and variant changes are announced to screen readers. Motion respects reduced-motion settings. |
Where to begin
- Setting up a store for the first time: Quick start.
- Colors, fonts, page width and cart options: Theme settings.
- Choosing a look: Presets.
- Section options and image sizes: Section guides.
For developers
Support
Send us a support request
Include your store URL, theme version, what you expected, what happened and screenshots.
[email protected] ↗