Tine

A bold, industrial design for hardware stores, tools, and equipment brands.

Who it's for

Hardware stores, power tool brands, automotive parts, construction supplies, workwear, and industrial equipment. If your customers build things, fix things, or get their hands dirty, Tine is your preset.

The vibe

Red and dark gray with yellow accents. High-contrast and utilitarian — it says durability and no-nonsense quality. The condensed heading font adds a rugged, mechanical character. This is not a delicate design. It's built to sell tools.

Color schemes

Tine includes four color schemes. You can use any of them on any section, and edit the colors at any time.

Heading text

Body text sample

Button

Heading text

Body text sample

Button

Heading text

Body text sample

Button

Heading text

Body text sample

Button

Font pairing

Role	Font	Weight
Headings	Oswald	Bold (700)
Body	Roboto	Regular (400)

Oswald is a condensed sans-serif with a strong, mechanical feel. Roboto is clean and highly readable — great for product descriptions and spec sheets.

Recommended sections

These sections are a natural fit for Tine's bold, industrial look:

Shop by level — The signature Project Blueprint Board (below) — your homepage opener
Banner — A hero with your current promotion or sale
Promo tiles — Department or category navigation
Featured collection — Best sellers or new tools
Comparison table — Product specs side by side
Trust badges — Warranties, certifications, and guarantees
Shipping info — Delivery details for heavy or oversized items

Signature section — the Project Blueprint Board

Tine's homepage opener is Shop by Project: a trade-grade job board that organises browsing by the job, not the product category. Every lane is a job-spec card — a real project photo, a one-line scope, and a forged difficulty gauge that reads at a glance: one lit rung for Beginner, two for Intermediate, three for Advanced. A DIY shopper scans it like a blueprint pinned to the workshop wall and knows in a second which jobs are their level and what they'd be taking on.

It's unmistakably the forge preset — squared tempered-iron cards, a warm offset shadow, and a gauge that ignites from ember-gold to forge-red — and unmistakably more than a recoloured image grid. The difficulty gauge is the thing that sets it apart from a plain category grid: it turns how advanced is this? into one glance, and speaks the level to screen readers so the meaning never depends on seeing the meter.

Try the live section below. The default is the Tine forge treatment with the real DIY job board; switch presets to see the same shared section take each preset's colours and type, switch to a phone, and toggle dark mode (the card surface and gauge re-tone with the scheme).

The same section ships in every preset and works for any catalogue where how advanced something is matters — online courses by skill level, recipes by difficulty, fitness programs by intensity, craft kits by experience. Set every card's level to None and it's a clean plain category grid. Full settings, accessibility, and per-preset notes are on the Shop by level component page.

Catalog size

Built for large catalogs (200+ products). The utilitarian design scales well with big product ranges and deep category trees.

Target merchant profile

Celtic for "fire" — Tine is the sharp, industrial hardware-niche preset for Shopify merchants selling tools, fasteners, power tools, hand tools, and building supplies. The industrial-grid visual signature (CSS grid-line pattern and sharp corner border-radius on niche sections) signals precision and authority — ideal for hardware resellers and trade suppliers competing against specialist distributors on Shopify.

Tine serves merchants who:

Sell hardware, tools, fasteners, fixings, or building supplies
Have product-rich catalogues with technical specification-heavy listings
Sell in bulk or in trade quantities alongside retail
Publish technical data sheets, standards references, and compatibility tables

Hardware resellers and tool distributors: 100–5,000+ SKUs, mix of trade and retail customers, strong repeat purchase on consumables (fixings, blades, abrasives), high-value single purchases on power tools. Technical specification accuracy is a trust signal.

Note on scope: The Tine preset features (comparison table, specs-table mode, bulk-pricing) all render on product pages and collection surfaces — not as standalone content pages. This is by design: hardware merchants are product-rich, not content-page-rich. Tine's merchant guide is naturally somewhat shorter than the other presets — that is expected and deliberate, not a gap.

Visual signature details

The Tine preset loads assets/preset-tine.css when settings.preset is tine. This CSS:

Applies an industrial-grid background-image pattern to niche-anchor section containers: a fine grid of light lines evoking engineering graph paper (.niche-anchor--tine selector)
Sharp corner radius (0 or 2px) on section and card containers — no soft curves
Monospace/tabular number rendering for specification values in comparison and specs tables

Header signature — forged trade-supply chrome

The header (a shared component across all presets) wears Tine's fire/forge signature, loaded from assets/tine-visual.css. The palette is forge red, ember gold, and anvil charcoal/steel — not generic SaaS orange:

Tempered-iron frosted bar — a warm charcoal-tinted off-white chrome (backdrop-filter: blur(16px)), high-contrast and industrial. On the homepage hero it carries a forge-charcoal scrim; on scroll it settles to solid tempered-iron with a soft forge-red-toned shadow.
Molten heat-glow underline — each nav link grows a 2.5px bar of a forge-fire gradient: ember-red on the shoulders, white-hot ember-gold at the centre (#dc2626 → #eab308 → #dc2626), wrapped in a soft red heat-bloom. It ignites from the centre and runs to both ends (scaleX, transform-origin: center) like a strip of metal heating to temperature.
Forge-steel tile affordances that heat up — at rest the icon controls are bare; on hover/focus they become small squared steel tiles whose rim brightens from cool steel to a glowing ember, casting an outset radiant ember heat-glow (metal brought to temperature — not a lift, not a seat-down).
Ember-gold cart badge — the item-count bubble is ember-gold with anvil-charcoal digits.
Forge-heat mobile drawer — the panel opens onto a tempered-iron surface with a forge-red heat-bloom at the top, a forge-red squared leading edge, and struck, level nav rows.

The signature is decoration only — colour, border, blur, and the underline animation. It adds no menus; your navigation comes from your Shopify menu. It is right-to-left safe (the heat-glow ignites from the centre, so it needs no direction flip) and reduced-motion safe (the heat-glow appears instantly when reduced motion is requested). See the Header guide for the live demo.

Comparison table section (`sections/comparison-table.liquid`)

A column-based feature-comparison table for comparing products side by side — designed for hardware buyers making "which fastener/tool is right for my job" decisions.

What it does

Column-based comparison: one column per product/model, one row per feature/specification
Sortable columns: clicking a column header sorts rows by that column's values (aria-sort updated; screen reader announces sort direction)
Rows mode (orientation: rows): the comparison table doubles as a specs table when orientation is set to rows — columns become attributes, rows become products/models
Accessible: aria-sort on sortable <th> elements; keyboard-triggered sort; live-region announces row counts after sort; sticky header option for long tables
Highlighting: individual cells can be marked as a highlighted "winner" value for each row

Schema settings

Setting	Type	Default	Description
`orientation`	select	`columns`	`columns` (product comparison) or `rows` (specs table / attribute listing)
`heading`	text	—	Section heading
`enable_sort`	checkbox	true	Enable column-header sort
`sticky_header`	checkbox	false	Sticky first row/header on scroll (useful for long tables)
`color_scheme`	color_scheme	scheme-1	Section background

Where to find it in the theme editor: Sections → Comparison table → Section settings tab.

Two modes of the comparison table

Product comparison mode (orientation: columns): Use this to compare 2–5 products or models side by side. Each column block defines a product column with a header and up to 15 specification rows.

Specs table mode (orientation: rows): Use this to list all specifications of a single product in a two-column table (attribute + value). This is the preferred pattern for hardware PDPs where a product has 15+ technical attributes. Add a Comparison Table section to your product page template and set orientation: rows.

Adding column/row blocks

Click Add block → Comparison column (columns mode) or Add block → Spec row (rows mode).
For columns mode: set the column heading (product name), then add up to 15 value cells (one per row in the comparison matrix).
For rows mode: set the spec name and spec value for each row.

Specs table mode (via `comparison-table.liquid` with `orientation: rows`)

The specs-table mode is the same section as the comparison table but configured for single-product technical data presentation — more compact, not sortable, focused on attribute + value pairs.

Typical use on hardware PDPs

Add the comparison-table section to your Tine product template with orientation: rows to display:

Weight (g), Dimensions (mm), Material, Thread pitch, Property class (ASTM/ISO/DIN)
Finish/coating, Tensile strength, Voltage (for power tools), Battery compatibility

Important on standards references: Use current standard names. ASTM A325 was withdrawn and replaced by ASTM F3125/F3125M. Use F3125 / F3125M in any spec row referencing that standard. Add a "Replaces" row if you sell to customers who still search by legacy names.

Metric/imperial note: The uisce_tine.dimensions_mm metafield stores metric dimensions. If your customers expect imperial (e.g., US/Canadian trade), add a companion uisce_tine.dimensions_in metafield and surface both via separate spec rows or a toggle note.

Bulk pricing (via `sections/quick-order.liquid`)

The quick-order section includes a bulk-pricing messaging mechanism: when the cart quantity for a product exceeds a merchant-configured threshold, a savings pill appears highlighting the bulk saving percentage.

What it does

Renders a quick-order list (product grid from a selected collection) with per-item quantity inputs and a single "Add all to cart" action
Bulk-pricing pill: when a product's quantity in the order form meets or exceeds bulk_threshold, a pill badge appears: "Save {bulk_save_percent}%" (aria-live announces the saving so screen reader users hear it)
The pill is a messaging aid only — actual pricing requires Shopify discount setup or a price-tiers app (see Recommended apps). The pill informs the buyer; it does not apply a discount automatically

Schema settings

Setting	Type	Default	Description
`collection`	collection	—	Required. Collection to display in the quick-order grid
`bulk_threshold`	range 2–50	10	Minimum quantity to show bulk-pricing pill (default: 10 units)
`bulk_save_percent`	range 5–50	15	Savings percentage shown in the pill (informational only)
`show_vendor`	checkbox	false	Show vendor/brand per product row
`color_scheme`	color_scheme	scheme-1	Section background

Where to find it in the theme editor: Sections → Quick order → Section settings tab.

Setting up real bulk discounts

The theme's bulk-pricing pill is a display message. To apply actual tiered discounts:

Use Shopify Scripts (Plus) or a price-breaks app (e.g., Bold Quantity Breaks, Hulk Volume Discounts) to define quantity-based pricing.
Set bulk_threshold and bulk_save_percent in the Quick Order section to match your actual first pricing tier.
Add a note in your product description or a banner section explaining the discount tiers (e.g., "10–24 units: save 15%, 25+ units: save 25%").

Niche-specific structured data — Product + additionalProperty

The Tine preset extends snippets/json-ld.liquid to emit Product JSON-LD with additionalProperty entries for technical specifications. Each populated uisce_tine.* metafield generates one PropertyValue entry:

json

{
  "@type": "PropertyValue",
  "name": "Material",
  "value": "Stainless steel A2"
}

This allows Google Shopping to surface richer product data for hardware queries. The schema activates when any of uisce_tine.weight_grams, uisce_tine.dimensions_mm, or uisce_tine.material is populated.

To validate, paste a product URL into Google's Rich Results Test.

Standards reference note: Keep standards names current. Use ASTM F3125/F3125M not the withdrawn ASTM A325. Use ISO 898-1 for carbon/alloy steel bolts. The provisioner seeds examples with current standard names.

Comparison table structured data

The comparison table does not emit structured data (no schema.org type for comparison tables). If you want to expose your comparison data in Google's Knowledge Panel, consider adding a DataCatalog or Table entity via a custom JSON-LD block — this is outside the theme scope but can be added via an HTML block on your comparison page.

Documents and compliance surfaces

The Tine preset does not ship dedicated TDS/SDS (Technical/Safety Data Sheet) sections. Hardware merchants who need to surface compliance documents should use one of these approaches:

File metafields: Use file_reference metafield type in Shopify Admin to attach PDF documents (TDS, SDS, declaration of conformity) to products. The cross-reference PDP block can link to these files.
Metafield + custom block: Add a downloads block to your product template with a repeating link list (file URLs entered manually in block settings). This is a Shopify app-block pattern — no theme code changes required.
REACH/SVHC notice: For products subject to REACH Article 33 (SVHCs >0.1% w/w), add a dedicated "Compliance" tab to your product page with the SDS + SVHC notice. Use a richtext block in the product description tabs section for this content.

Schema settings reference

`niche_metafield_namespace` setting

Default: uisce_tine. Key metafields used by Tine niche sections and PDP blocks:

Key	Type	Used by
`weight_grams`	number_decimal	specs-table-row PDP block
`dimensions_mm`	single_line_text_field	specs-table-row PDP block
`material`	single_line_text_field	specs-table-row PDP block
`wattage`	number_integer	specs-table-row PDP block (power tools)
`size`	single_line_text_field	specs-table-row PDP block
`power_source`	single_line_text_field	specs-table-row PDP block
`battery_compat`	single_line_text_field	specs-table-row PDP block

Per-preset PDP blocks (Tine)

Two blocks are available in the Tine product template (templates/product.tine.json):

Block handle	Description
`specs-table-row`	Renders a compact specs row table from `uisce_tine.*` metafields on the PDP
`cross-reference`	Shows cross-reference information (manufacturer, alt part no., replaces, compatible models)

Demo-data setup

The scripts/populate-niche-tine.mjs provisioner creates:

6–8 hardware products (fasteners, drill bits, power tools) with uisce_tine.* metafields pre-populated (sourced from ASTM/ISO/DIN representative values)
A "Technical specifications" collection with the quick-order section pre-configured
Header navigation: Home, Products, Compare, Bulk Order, Technical Info, Contact
Footer Quick Links: Product catalogue, Bulk orders, Technical specifications, FAQs

bash

STORE_PRESET=tine SHOPIFY_STORE=your-tine-store.myshopify.com \
  SHOPIFY_ACCESS_TOKEN=shpat_xxxx \
  node scripts/populate-niche-tine.mjs

Manual setup steps

Add Comparison Table to product template: In the theme editor, add the Comparison Table section to your Tine product template. Set orientation: rows for specs-table mode.
Populate metafields: Create uisce_tine.* metafield definitions and back-fill on products.
Quick Order page: Create a page or collection page. Add the Quick Order section, select your "All products" or bulk-order collection, and configure bulk_threshold.
Verify header menu includes "Compare" and "Bulk Order" links.

Recommended apps

For Tine, the niche features (comparison table, specs table, bulk pricing display) are product-rich and require no app integration at the surface level. For advanced capability:

Category	Recommendation
Real tiered/quantity discounts	Bold Quantity Breaks, Hulk Volume Discounts, or Shopify Scripts (Plus)
TDS/SDS document delivery	Cloudflare Pages function (already in project stack) or a file-reference metafield block. No first-party Shopify app recommendation.
Trade account pricing	BSS B2B/Wholesale Solution or Locksmith; note B2B features are a v1.1 deferral.

Behavior callouts

Bulk-pricing pill is informational only

The savings pill appears when quantity ≥ bulk_threshold. It does not apply a Shopify discount automatically. Customers must add the items to cart and the actual price they pay depends on your Shopify discount configuration. Make sure the threshold and percentage you set in section settings match your actual pricing tiers, or customers will be misled.

Comparison table sort uses natural alphanumeric order

Sort order for hardware spec values follows natural alphanumeric ordering (e.g., M8, M10, M12 sort correctly; 1/4-20, 3/8-16, 1/2-13 sort correctly). Pure-numeric values sort numerically. Composite or structured standards codes (e.g., ASTM A307) sort as strings.

Specs table mode does not sort

When orientation: rows, the sort controls are hidden — a specs table is not sortable by design (it has only one product's values; sorting attribute names is not meaningful).

Industrial grid background is Tine-specific

The preset-tine.css grid-line pattern applies only to .niche-anchor--tine class sections. The visual signature is subtle — a fine 40×40px grid of 1px lines at low opacity. It does not interfere with text legibility. If you find it too visually busy, you can remove the .niche-anchor--tine class from the relevant sections via a theme customization — but this removes the preset differentiation for Theme Store review purposes.

Accessibility implementation details

Comparison table accessibility

The comparison table implements WCAG 2.1 AA sortable table pattern:

aria-sort on each <th> heading button: "none", "ascending", "descending"
Sort buttons are <button> elements inside <th> — not <th> elements acting as buttons
A visually-hidden live region announces sort state changes: "Sorted by Material, ascending"
Keyboard: Enter or Space on a sort button activates the sort; arrow keys move between column headers (standard table keyboard navigation)

Quick order accessibility

The quick-order section renders product rows with:

<label> + <input type="number" min="0" inputmode="numeric"> pairs for quantity inputs
aria-live="polite" on the bulk-pricing pill container — announces when the pill appears
"Add all to cart" button has aria-describedby referencing the total item count

RTL support

The Tine preset uses logical CSS properties:

Comparison table: margin-inline-start for feature-check icons
Quick order: padding-inline for row padding; text-align: start for numeric cells
Industrial grid background pattern: background-position: 0 0 (direction-independent)
Sort-direction indicator arrow: uses transform: scaleX(-1) with [dir="rtl"] override so the descending arrow points left in RTL context (correct for bidirectional tables)

Pre-submission checklist

Shopify Theme Store checklist (Tine-specific)

[ ] At least 4 products with uisce_tine.material and uisce_tine.dimensions_mm populated
[ ] Comparison table section present on product template in rows mode
[ ] Quick order section configured with a valid collection
[ ] bulk_threshold and bulk_save_percent reflect actual pricing tiers
[ ] settings.preset is set to tine in Theme settings
[ ] Header menu includes "Compare" or "Products" navigation items

Google Rich Results (Tine — Product + additionalProperty JSON-LD)

The Tine preset emits Product JSON-LD with additionalProperty entries for technical specifications. To validate:

bash

curl -s "https://your-store.myshopify.com/products/m8-hex-bolt" \
  | grep -A 20 '"additionalProperty"'

Tine ​

Who it's for ​

The vibe ​

Color schemes ​

Font pairing ​

Recommended sections ​

Signature section — the Project Blueprint Board ​

Kitchen Repairs , Beginner project

Bathroom Fitting , Intermediate project

Outdoor & Decking , Intermediate project

Workshop Build-Out , Advanced project

Catalog size ​

Target merchant profile ​

Visual signature details ​

Header signature — forged trade-supply chrome ​

Comparison table section (sections/comparison-table.liquid) ​

What it does ​

Schema settings ​

Two modes of the comparison table ​

Adding column/row blocks ​

Specs table mode (via comparison-table.liquid with orientation: rows) ​

Typical use on hardware PDPs ​

Bulk pricing (via sections/quick-order.liquid) ​

What it does ​

Schema settings ​

Setting up real bulk discounts ​

Niche-specific structured data — Product + additionalProperty ​

Comparison table structured data ​

Documents and compliance surfaces ​

Schema settings reference ​

niche_metafield_namespace setting ​

Per-preset PDP blocks (Tine) ​

Demo-data setup ​

Manual setup steps ​

Recommended apps ​

Behavior callouts ​

Bulk-pricing pill is informational only ​

Comparison table sort uses natural alphanumeric order ​

Specs table mode does not sort ​

Industrial grid background is Tine-specific ​

Accessibility implementation details ​

Comparison table accessibility ​

Quick order accessibility ​

RTL support ​

Pre-submission checklist ​

Shopify Theme Store checklist (Tine-specific) ​

Google Rich Results (Tine — Product + additionalProperty JSON-LD) ​

Tine

Who it's for

The vibe

Color schemes

Font pairing

Recommended sections

Signature section — the Project Blueprint Board

Catalog size

Target merchant profile

Visual signature details

Header signature — forged trade-supply chrome

Comparison table section (`sections/comparison-table.liquid`)

What it does

Schema settings

Two modes of the comparison table

Adding column/row blocks

Specs table mode (via `comparison-table.liquid` with `orientation: rows`)

Typical use on hardware PDPs

Bulk pricing (via `sections/quick-order.liquid`)

What it does

Schema settings

Setting up real bulk discounts

Niche-specific structured data — Product + additionalProperty

Comparison table structured data

Documents and compliance surfaces

Schema settings reference

`niche_metafield_namespace` setting

Per-preset PDP blocks (Tine)

Demo-data setup

Manual setup steps

Recommended apps

Behavior callouts

Bulk-pricing pill is informational only

Comparison table sort uses natural alphanumeric order

Specs table mode does not sort

Industrial grid background is Tine-specific

Accessibility implementation details

Comparison table accessibility

Quick order accessibility

RTL support

Pre-submission checklist

Shopify Theme Store checklist (Tine-specific)

Google Rich Results (Tine — Product + additionalProperty JSON-LD)