§07 / PRESETS
REF: TG–DOC–07 · REV. 1.7
Asphalt
TANGENT 1.7 / SHOPIFY OS 2.0 / UPDATED 2026-10-19
To apply it, open Theme settings in the theme editor and choose the Asphalt theme style. Applying a preset changes the theme settings and color schemes it defines. Templates and section content are not changed.
| Listing detail | Value |
|---|---|
| Industry tag | Clothing and accessories |
| Catalog size | Medium |
Settings
"Preset" means the value is set by the Asphalt preset. "Theme default" means the preset does not set it and the default from config/settings_schema.json applies.
| Group | Setting | Value | Source |
|---|---|---|---|
| Typography | Headings: Font | Oswald Bold (700) | Preset |
| Typography | Headings: Size | 115% | Preset |
| Typography | Headings: Letter case | Uppercase | Preset |
| Typography | Headings: Letter spacing | 0% | Preset |
| Typography | Headings: Line height | 90% | Preset |
| Typography | Body: Font | Work Sans Regular (400) | Preset |
| Typography | Body: Size | 15px | Theme default |
| Typography | Labels: Letter case | Uppercase | Preset |
| Layout | Page width | Full width | Preset |
| Layout | Page margin | 32px | Preset |
| Layout | Space between sections | 100% | Theme default |
| Layout | Grid spacing | 4px | Preset |
| Buttons and inputs | Primary button style | Solid | Theme default |
| Buttons and inputs | Button corner radius | 0px | Preset |
| Buttons and inputs | Input corner radius | 0px | Preset |
| Buttons and inputs | Button letter case | Uppercase | Preset |
| Colors | Product image background | #1C1C1C | Preset |
| Product cards | Image ratio | Portrait (4:5) | Preset |
| Product cards | Hover effect | Zoom | Theme default |
| Product cards | Text alignment | Left | Theme default |
| Product cards | Show star rating | Off | Theme default |
| Swatches | Shape | Square | Preset |
Letter spacing is a percentage of the font size: 0% renders as 0em.
Color schemes
The preset defines five color schemes. Scheme 1 also sets the page-wide default colors (:root in snippets/css-variables.liquid).
| Role | Scheme 1 | Scheme 2 | Scheme 3 | Scheme 4 | Scheme 5 |
|---|---|---|---|---|---|
| Background | #0E0E0E | #171717 | #F2F2F2 | #1A1A1A | #E2B232 |
| Text | #F2F2F2 | #F2F2F2 | #0E0E0E | #F2F2F2 | #0E0E0E |
| Secondary text | #9A9A9A | #9A9A9A | #5E5E5E | #9A9A9A | #3D3220 |
| Panel background | #171717 | #1F1F1F | #E6E6E6 | #222222 | #EBC352 |
| Borders | #2A2A2A | #303030 | #D4D4D4 | #333333 | #C89A22 |
| Primary button background | #F2F2F2 | #F2F2F2 | #0E0E0E | #F2F2F2 | #0E0E0E |
| Primary button label | #0E0E0E | #171717 | #F2F2F2 | #1A1A1A | #E2B232 |
| Accent | #E2B232 | #E2B232 | #E2B232 | #E2B232 | #0E0E0E |
| Text on accent | #0E0E0E | #0E0E0E | #0E0E0E | #0E0E0E | #E2B232 |
Product images
Product cards crop images to a 4:5 portrait frame (card_ratio: 0.8). Product photos shot at 4:5 display without cropping. Images with another ratio are cropped to fill the frame, because the theme default Image fit is Fill (card_image_fit: cover). You can change Image ratio under Theme settings > Product cards.
What all presets share
A preset changes theme settings and color schemes only. It does not change templates or section settings.
- Templates.
listings/tangent/,listings/selvedge/,listings/muslin/,listings/asphalt/andlistings/lumen/contain identical template files. The home page uses the same sections in the same order in every preset: Image or video banner, Scrolling text, Featured collection, Image tiles, Lookbook, Shoppable videos, Shop the look, Image with text, Collage, Collection index, Image with text, Logos and press, Icons with text, Testimonials and Email signup. - Header. The header is set in
sections/header-group.jsonand is the same for every preset. Layout: Logo left, menu center. Menu style: Mega menu, opened on hover, with the Underline hover effect. Sticky header: Always. The header shows over the first banner on the home page. On mobile, sub-menus slide in and the menu opens as a drawer. - Collection filters. The collection template uses the same settings in every preset. Filters on desktop: Sidebar. Apply filters: Instantly. Filter groups: All open. Filter values: Checkboxes. Color filters: Swatch and name. Price filter: Single slider (Under price). 8 values show before "Show more". The search box in long filter lists and product counts are on. The grid shows 3 columns on desktop and 2 on mobile, 12 products per page, with a Load more button.
- Body text size. No preset sets
body_scale, so body text uses the 15px default.
Last updated for Tangent 1.7