§02 / GETTING STARTED
REF: TG–DOC–02 · REV. 1.7
Theme settings
TANGENT 1.7 / SHOPIFY OS 2.0 / UPDATED 2026-10-19
Tangent has 12 settings groups: Logo and favicon, Colors, Typography, Layout, Buttons and inputs, Product cards, Swatches, Cart, Search, Motion, Social media and Currency format.
The defaults below are the theme's built-in defaults. A preset can change them. Where the Tangent preset or another preset differs, this page says so.
Logo and favicon
| Setting | Type | Options and range | Default |
|---|---|---|---|
| Logo | Image | — | None |
| Logo over images | Image | Shown when the header sits on top of a full-width banner. Use a light version of your logo. | None |
| Logo width | Range | 50–300px, step 5px | 120px |
| Favicon | Image | Displayed at 32 × 32px | None |
Colors
Color schemes
Each preset has five color schemes (scheme-1 to scheme-5). You can edit them or add more. Every section has a Color scheme setting that picks one.
Each scheme has these fields. The default is the value for a newly added scheme. The Tangent column shows scheme 1 of the Tangent preset.
| Field | Default | Tangent preset, scheme 1 | Used for |
|---|---|---|---|
| Background | #FFFFFF | #FFFFFF | Section background |
| Background gradient | None | None | Optional gradient instead of the solid background |
| Text | #000000 | #000000 | Text and icons |
| Secondary text | #6B6B6B | #6B6B6B | Muted text |
| Panel background | #F6F6F6 | #F6F6F6 | Panels and surfaces |
| Borders | #E3E3E3 | #E3E3E3 | Borders and dividers |
| Primary button background | #000000 | #000000 | Primary button fill and border |
| Primary button label | #FFFFFF | #FFFFFF | Primary button text |
| Secondary button label | #000000 | #000000 | Secondary button text and border, and links |
| Badge background | #000000 | #E2B232 | Badge fill |
| Badge text | #FFFFFF | #0E0E0E | Badge text |
In the Tangent preset, scheme 3 is the dark scheme (background #0E0E0E, text #F2F2F2).
Product media
| Setting | Type | Options and range | Default |
|---|---|---|---|
| Product image background | Color | Fills the space behind product photos. Match it to your photography backdrop. | #F2F2F2 |
Preset values: Selvedge #E8E2D8, Muslin #F2F2EF, Asphalt #1C1C1C, Lumen #F4EAE5.
Dark mode
| Setting | Type | Options and range | Default |
|---|---|---|---|
| Dark mode | Select | Off; Follow the shopper's device; Follow the device, with a switch in the header | Off |
| Dark scheme | Color scheme | Any color scheme | scheme-3 |
When dark mode is on, light sections switch to the dark scheme. Sections that are already dark or colored stay as they are.
Typography
Headings
| Setting | Type | Options and range | Default |
|---|---|---|---|
| Font | Font picker | Shopify font library | Archivo Narrow Bold (archivo_narrow_n7) |
| Size | Range | 70–140%, step 5% | 100% |
| Letter case | Select | As typed; Uppercase | Uppercase |
| Letter spacing | Range | -5 to 10%, step 1% | 0% |
| Line height | Range | 80–130%, step 2% | 100% |
Body
| Setting | Type | Options and range | Default |
|---|---|---|---|
| Font | Font picker | Shopify font library | Archivo Narrow Regular (archivo_narrow_n4) |
| Size | Range | 13–18px, step 1px | 15px |
Labels
| Setting | Type | Options and range | Default |
|---|---|---|---|
| Letter case | Select | As typed; Uppercase. Applies to small labels such as eyebrows, badges and filters. | Uppercase |
Preset typography
| Preset | Heading font | Body font | Heading size | Heading case | Letter spacing | Line height |
|---|---|---|---|---|---|---|
| Tangent | Archivo Narrow Bold | Archivo Narrow | 100% | Uppercase | 0% | 100% |
| Selvedge | Playfair Display | Raleway | 90% | As typed | -2% | 104% |
| Muslin | Montserrat | Montserrat | 75% | Uppercase | 8% | 110% |
| Asphalt | Oswald Bold | Work Sans | 115% | Uppercase | 0% | 90% |
| Lumen | Playfair Display | Assistant | 90% | As typed | 0% | 106% |
Layout
| Setting | Type | Options and range | Default |
|---|---|---|---|
| Page width | Select | Narrow (1200px); Standard (1440px); Standard (1600px); Full width | 1600px |
| Page margin | Range | 8–64px, step 2px | 48px |
| Space between sections | Range | 50–150%, step 10% | 100% |
| Grid spacing | Range | 0–32px, step 2px | 12px |
| Show back-to-top button | Checkbox | — | On |
| Show style switcher | Checkbox | — | Off |
Two page width options are both labeled "Standard" in the editor: the first is 1440px and the second is 1600px.
On small screens the page margin scales down, with a minimum of 16px.
Preset values: Selvedge, Muslin and Lumen use 1440px and a 32px margin. Asphalt uses Full width and a 32px margin. Grid spacing is 10px (Selvedge), 16px (Muslin, Lumen) and 4px (Asphalt).
Show style switcher adds a floating control on the home page that switches between presets in the shopper's browser. It is meant for demo stores. Leave it off on a live store.
Buttons and inputs
| Setting | Type | Options and range | Default |
|---|---|---|---|
| Primary button style | Select | Solid; Outline | Solid |
| Button corner radius | Range | 0–40px, step 1px | 2px |
| Input corner radius | Range | 0–20px, step 1px | 2px |
| Button letter case | Select | As typed; Uppercase | Uppercase |
Preset values: Selvedge and Asphalt use 0px corners. Muslin and Lumen use 24px buttons and 12px inputs. Muslin uses Outline buttons. Selvedge and Lumen set button text as typed.
Product cards
| Setting | Type | Options and range | Default |
|---|---|---|---|
| Image ratio | Select | Adapt to image; Square; Portrait (4:5); Tall (2:3) | Portrait (4:5) |
| Image fit | Select | Fill; Fit | Fill |
| Show second image on hover | Checkbox | — | On |
| Play product video on hover | Checkbox | Uses the first video uploaded to the product. | Off |
| Show color swatches | Checkbox | — | On |
| Show vendor | Checkbox | — | Off |
| Enable quick add | Checkbox | — | On |
| Quick add style | Select | Size buttons; Button. Size buttons appear on hover for products with a size option. Other products use the button. | Size buttons |
Badges
| Setting | Type | Options and range | Default |
|---|---|---|---|
| Show sale badge | Checkbox | — | On |
| Sale badge text | Select | Sale; Percent off | Sale |
| Show sold out badge | Checkbox | — | On |
| Show "New" badge | Checkbox | Shows on products tagged new. | On |
| Show badges from product tags | Checkbox | Tag a product badge:Limited to show a "Limited" badge. | On |
A card shows at most two tag badges.
Card design
| Setting | Type | Options and range | Default |
|---|---|---|---|
| Hover effect | Select | Zoom; Lift; None | Zoom |
| Text alignment | Select | Left; Center | Left |
| Space between image and text | Range | 8–32px, step 2px | 16px |
| Show compare-at price | Checkbox | — | On |
| Show "From" when variants have different prices | Checkbox | Otherwise cards show the first available variant's price. | On |
| Show star rating | Checkbox | Uses the rating a reviews app stores on the product. | Off |
With Show second image on hover on, cards that have a second image show it instead of zooming.
Preset values: Selvedge uses Tall (2:3). Lumen uses Lift, Center and star ratings on.
Swatches
Swatch colors and images are set on each option value in your product catalog in Shopify admin. If a value has no swatch, Tangent uses the value name as a CSS color (for example Black).
| Setting | Type | Options and range | Default |
|---|---|---|---|
| Shape | Select | Circle; Square | Circle |
| Swatches shown on cards | Range | 2–10, step 1 | 5 |
Asphalt uses square swatches.
Cart
| Setting | Type | Options and range | Default |
|---|---|---|---|
| Cart type | Select | Drawer; Page | Drawer |
| Enable order notes | Checkbox | — | On |
Free shipping progress
| Setting | Type | Options and range | Default |
|---|---|---|---|
| Show free shipping progress | Checkbox | — | Off |
| Free shipping threshold | Number | In your store's default currency. Use the same amount as your shipping settings. | 150 |
Recommendations
| Setting | Type | Options and range | Default |
|---|---|---|---|
| Collection shown in an empty cart | Collection | — | None |
| Show product recommendations in the cart drawer | Checkbox | Based on the first product in the cart, from Shopify's recommendations. | On |
Gift wrapping
| Setting | Type | Options and range | Default |
|---|---|---|---|
| Gift wrap product | Product | Create a product for gift wrapping with a price, then choose it here. Shoppers can add it with one click in the cart. | None |
Search
| Setting | Type | Options and range | Default |
|---|---|---|---|
| Enable search suggestions | Checkbox | — | On |
| Show price in suggestions | Checkbox | — | On |
| Popular searches | Text | Separate with commas. Shown when the search opens. | Empty |
Motion
| Setting | Type | Options and range | Default |
|---|---|---|---|
| Reveal sections on scroll | Checkbox | — | On |
| Slow zoom on banners | Checkbox | — | On |
| Smooth page transitions | Checkbox | Uses the browser's view transitions where supported. | On |
Motion is always reduced for shoppers who turn on reduced motion in their device settings.
Social media
Enter the full URL of each profile. Icons appear in the footer and the mobile menu. Leave a field empty to hide that icon.
| Setting | Type | Default |
|---|---|---|
| Text | Empty | |
| TikTok | Text | Empty |
| Text | Empty | |
| YouTube | Text | Empty |
| Text | Empty | |
| X (Twitter) | Text | Empty |
| Snapchat | Text | Empty |
Currency format
| Setting | Type | Options and range | Default |
|---|---|---|---|
| Show currency codes | Checkbox | Cart and checkout prices always show currency codes. | Off |
Last updated for Tangent 1.7