Theme settings — Tress docs

Open the theme editor and click the gear icon (Theme settings). The groups below appear in this order.

Colors

Color palette sets the storefront's fifteen colors at once:

Palette	Page	Panels	Bands and grounds	Accent	Bold band	Badge gloss	Feels like
Onyx (default)	Warm jet `#0d0b0d`	Satin black `#171317`	`#211b21`	Hot pink `#ff3d8b`, with jet labels	Hot pink `#ff3d8b`, with jet text	Pink lacquer `#ffe3ee` to `#ff9fc4`	Hair extensions and wigs (the Tress preset). A dark palette.
Nude	Rosy nude `#f2e2d8`	Cream `#fbf4ef`	Deeper nude `#e8cfc2`	Cocoa `#7a3f30`	Espresso `#2b1812`	Rose nude `#f9e6dc` to `#e3b8a6`	Lashes (the Flutter preset)
Candy	Bubblegum `#fff2f7`	White `#ffffff`	Pink `#ffdfec`	Fuchsia polish `#c11071`	Plum `#3b0f2f`	`#ffe6f1` to `#ffadd2`	Press-on nails (the Lacquer preset)
Chrome	Silver `#e8eaee`	`#f7f8fa`	Steel `#d9dde4`	Ink violet `#4a2a8a`	Violet black `#1c1530`	A chrome sweep, `#fbfcfd` to steel `#a8aeb9`	Any of the three, cool and modern. No preset.

All four meet WCAG AA contrast for text (4.5:1) and controls (3:1) on every background the theme uses, including the bold band, the gloss badges and Chrome's chrome-gradient badges. In Onyx, sale prices and errors are coral (#ff9a6c), so a sale never reads as the hot-pink accent; errors always carry an icon and words too.

Below the palette, each color can be set on its own. A color you set overrides the palette until you clear it (the field then reads "From palette"). The groups and what each color paints in Tress:

Group	Color	What it paints
Page	Page background	The page, the header and the ground behind the length scale
Page	Body text	Body copy, option values, hair-detail values, landmark names and the navigation
Page	Headings, names and prices	Headings, product names, the wordmark, prices and the selected length; also the border of secondary buttons, the fill of a selected option tile and the ring around a selected chip
Page	Secondary text	Introductions, meta lines, helper text, hair-detail labels, the centimetres beside inches, finger names and the Sold out badge
Page	Faint text	Compare-at prices, placeholders, struck sold-out lengths and counters
Panels and bands	Panels and drawers	The satin sheets: the install tray, testimonial cards, the hair details and care panels, the bag drawer, dialogs, the mega menu, fields, option tiles and the quick-add button
Panels and bands	Bands and grounds	The deeper band behind the install builder, testimonials and the footer, the length guide's figure panel, and the ground behind images while they load
Panels and bands	Bold band	The announcement bar, the newsletter and any section set to Bold band
Panels and bands	Text on the bold band	Text, button fills and the focus ring on the bold band (its secondary text and borders are mixed from it)
Controls and accent	Control borders	The borders of fields, selects, option tiles, steppers, the ten nail-size inputs, checkboxes, the length stops' rings and the (i) button. Keep it at 3:1 or more against the page, panels and bands.
Controls and accent	Accent	Primary buttons, text links, focus rings, the selected length stop, the figure's hair, checked boxes, rating stars, the bag count and the strand lines
Controls and accent	Text on accent buttons	Labels on primary buttons and the bag count
Controls and accent	Sale and errors	Sale prices and the Save badge, and error messages (nail sizes, the install tray, forms)
Badges	Badge gloss, light and Badge gloss, deep	The two stops of the gradient behind the Best seller, New, Most loved and Install badges

Note

Overriding a color can lower contrast. Colors you set are yours to check: test text on your new color with a contrast checker before you publish.

Most sections also have a Color scheme: Page (the page color), Surface (the deeper band) or Bold band (hot pink in Onyx, espresso, plum or violet black in the others). Everything inside a band, including buttons, fields and focus rings, switches with it. Banded sections also have Wave edges (None, Top, Bottom, or Top and bottom): the long strand wave along the band's edge.

Typography

Setting	Default	Notes
Heading font	Abril Fatface	Headings, the text logo and step numbers. Abril Fatface has one weight and no italic, so headings never go bold or italic.
Body font	Poppins	Everything you read and press: text, navigation, buttons, prices and labels. The theme loads regular, medium, semibold and italic.
Base text size	15px (14 to 18)	Scales all text

The presets use Abril Fatface (Tress), Syne (Lacquer) and Faculty Glyphic (Flutter) for headings, all with Poppins. Any font in Shopify's font library works. Tress never fakes a bold or italic the font doesn't have, and all text is in sentence case: the theme never turns text into capitals.

Layout

Setting	Default	What it does
Page width	Medium	Narrow, Medium or Wide
Page margin	64px (16 to 80)	The space at each side of the page on large screens. Tablets use at most 40px and phones 16px.

Show back-to-top button (on): a round button that appears after shoppers scroll down one screen. Position: Left or Right (default). Pick the side opposite your chat button. It is mirrored for right-to-left languages.
Brand: Use a custom logo (off: the shop name shows as a text wordmark in the heading font, wrapping to two lines on small phones rather than being cut off), Logo, Logo width (180px, 80 to 320, with a custom logo) and Favicon (32 x 32px recommended).
Motion and effects: light moves across mirrors and buttons once on hover. Nothing loops, and all motion follows the reduced motion setting on the visitor's device. Reveal sections on scroll (off): sections fade up once as they scroll into view.

Commerce

Setting	Default	What it does
Free dispatch over	0	Your store's real free-shipping threshold, in its currency. Above 0, the buy box adds "Free shipping over $150." under the add button, and the bag shows a progress line ("Add $12.00 for free shipping.", then "You've got free shipping."). Both only show to customers shopping in your store's currency. Leave it at 0 unless you offer free shipping.
Show currency code	Off	Prints the currency code beside every price
Bag note	"Free silk bonnet with every install"	Shown under the checkout button in the bag, with a bonnet icon. Leave it blank to hide it.

Product cards

Every product card is a capsule mirror: the photo in a tall 2:3 capsule with its badges centred at the top and a round quick add button sitting on the capsule's foot, then the product name, a meta line ("12–30 in · Body wave"), the price and the rating. On devices with a mouse, the glare sweeps across the mirror and the quick-add button widens to "Quick add" while the card is hovered.

Setting	Default	What it does
Product image shape	Capsule	Capsule, Soft corners or Square. Capsule suits upright product photos. Choose soft or square for wide photos, such as fanned nails.
Show quick view button	Off	Opens the product's media, options and buy buttons in a panel without leaving the page
Show quick add button	On	Products without options go straight to the bag. Products with options, a required subscription plan or a gift card recipient open quick view.
Show swatches	Off	Shows the values of the first option that has Shopify swatches, such as Color, under the card. Choosing one switches the card's photo and link. Swatches before "+" count: 5 (2 to 8).
Show second image on hover	On	On devices with a mouse, shows the product's second image while the card is hovered or focused. Products with one image don't change.
Show compare checkbox	Off	Shoppers tick up to 3 products and see them side by side on the comparison page. Stays hidden until a page using the `page.compare` template is chosen as the Comparison page (chapter 4).
Comparison page	Empty	The page with the `page.compare` template

The meta line under the name comes from the product's custom.card_meta metafield when you fill it (chapter 7). Otherwise Tress writes it from your options: the length range of an option named in Length option names ("12–30 in") and the texture (the product's custom.texture metafield, a Texture option's single value, or "4 textures"), then, while there are fewer than two parts, a summary of the other options ("HD lace or Transparent lace", "3 cap size options").

Badges (the Badges heading in this group):

Setting	Default	What it does
Show New for products added in the last	21d (0 to 90)	Products added to your store within this many days show the New badge. Products tagged `new` always show it; 0 uses the tag only.
Most loved badge label	"Most loved"	The label of the badge on products tagged `most-loved`
Sale badge shows	Amount saved	Amount saved ("Save $30.00") or Percent saved ("Save 15%")

A card shows at most two badges, in this order: Save (a compare-at price above the price), then one of Best seller (tagged best-seller), New or Most loved (tagged most-loved), then Sold out if there's room. Best seller, New and Most loved wear the gloss gradient (in Chrome, the chrome sweep).

Hair, lashes and nails

The settings behind Tress's four signature features: which option names become a length scale, texture chips, a glossary, nail chips and sizes, and the text maps and tables they read. Every one is listed, with its default and format, in chapter 7, and explained in its feature's chapter (8 to 11). The group ends with three image settings:

Setting	Default	What it does
Build your install page	Empty	Linked from Edit install on an install in the bag (chapter 9). The Tress preset sets `/#install`.
Mirror glare on images	On	Two soft streaks of light across capsule images, which sweep on hover. Off keeps the capsules and removes the streaks.
Strand lines on wave edges	On	Three fine accent lines along the wave at the edge of banded sections. Off keeps the wave and drops the lines.

Customer account menu (the default customer-account-main-menu): links in the header account panel. Leave it empty to use the menu Shopify creates for customer accounts.
Social media: Instagram, TikTok, YouTube, Facebook, Pinterest, X, Threads and LinkedIn. Each link you add shows as a round icon in the footer.