Deivisoft Themes

Camber

A build-aware fitment and off-road parts theme for trucks, 4x4s, and trail builds.
Version 0.1.0 · Shopify Online Store 2.0 · Liquid, JSON templates, native CSS and JavaScript

1. Purpose

Camber is built for the customer who has already changed the truck. The buying anxiety is not “which part looks good?” It is “will this fit with my lift, tire size, drive type, and year?”

The signature interaction is the Build Garage. The customer saves year, make, model, lift, tire size, and drive type in localStorage. Every product card, the collection page, and the product signature compare that build with merchant-entered fitment ranges. The result is a stock fit, modified fit, no fit, or an honest “check fit” state.

The visual language is a trail-garage field manual: steel panels, dust paper, trail orange, tread strips, part numbers, clipped corners, and technical spec cards. It is rugged, not a neon tuner shop.

2. What is included

  • Complete Online Store 2.0 theme: JSON templates, sections, blocks, header and footer section groups.
  • Build-led home page: hero with a live build selector, build garage, six category tiles, “Fits your build” featured shelf, build gallery, installation guides, FAQ, and newsletter.
  • Build Garage: native Liquid + vanilla JS, localStorage build, shared selectors, build summary, build stage, and no-JS fallback.
  • Fitment signature: stock/modified ranges, fit status, current build, clearance and install notes, OEM cross-reference, and a check-fit form.
  • Product cards with fit badge, part number, build stage, and a fitment note.
  • Collection page with a saved-build bar, Fits my build toggle, native filters, product grid, and empty state.
  • Cart drawer, predictive search, account component, gift card, password, 404, blog, article, page, contact, and search templates.
  • Product recommendations and an optional complementary-products block.
  • Responsive images, keyboard access, visible focus, reduced-motion support, and semantic landmarks.
  • Six licensed Shopify Burst product photos, two landscape photos, and a 14-variant, 6-product demo CSV in demo/camber/.
  • Theme editor settings for colors, typography, layout, build option lists, product cards, social links, and SEO.

3. Requirements

  • A Shopify store with the Online Store channel.
  • A Shopify plan that supports the features you want to use (selling plans, pickup, markets).
  • Shopify CLI 4.x for local development, or the Shopify admin upload workflow.
  • A development store is strongly recommended before publishing.

4. Installation

Option A — Shopify CLI

npx shopify theme dev --store your-store.myshopify.com --path themes/camber

To upload an unpublished theme:

npx shopify theme push --store your-store.myshopify.com --path themes/camber --unpublished

Option B — Admin upload

  1. Create a ZIP of the themes/camber directory (do not zip the parent folder).
  2. In Shopify admin, go to Online Store → Themes → Add theme → Upload ZIP file.
  3. Preview the theme, then publish when ready.

5. Configuration

Theme editor

Open Online Store → Themes → Customize. The main settings are:

  • Colors — surface #F2EEE8, steel #2B2F33, dust #C9C1B6, trail orange #D9682C, ink #14171A.
  • Typography — Space Grotesk headings, Work Sans body, base size, and heading scale.
  • Layout — page width, section spacing, corner radius, and the dust/tread texture.
  • Build selector — year, make, model, lift, tire diameter, and drive type lists; fitment help link.
  • Product cards — part number, fit badge, and build stage.
  • Social media — profile URLs used by the footer.
  • SEO — social share image and favicon.

Trail orange is used for fills and borders. Small orange text on the light surface uses the darker #A3471C, and orange text on steel uses #F29A6B.

Build selector lists

The build garage, hero, header panel, and product check-fit panel all read from the global option lists:

  • Years — one per line.
  • Makes — one per line.
  • Models — one per line.
  • Lifts — one per line, in inches.
  • Tire diameters — one per line, in inches.
  • Drive types — one per line.

The build is saved under camber-build in localStorage. It is a guest, per-device profile. There is no app, remote API, or customer-account sync.

The header build chip opens the compact selector on every page. The hero and build garage provide the same form on the home page. The product signature includes a check-fit form. All forms update together.

Without JavaScript, the build forms are hidden and a fitment-desk fallback link is shown. The product cards keep their neutral Check fit state, and the collection fit toggle is hidden.

Build garage

The home page build garage shows the current build, a derived build stage (Stock or Modified), the full selector, a clear action, a “Shop what fits” link, and a fitment guide link when configured. Clearing the build resets every summary, badge, and toggle on that page.

The build comparison uses only merchant-entered data. It does not contain a vehicle database and does not promise fitment.

Fitment signature

snippets/product-signature.liquid reads:

Metafield Type Used by
custom.part_number Single-line text Card, product meta, signature
custom.build_stage Single-line text Card stage and signature
custom.fit_universal Boolean Universal fitment
custom.fit_makes Single-line text Vehicle match
custom.fit_models Single-line text Model match
custom.fit_drives Single-line text Drive match
custom.fit_year_min Number (integer) Year range
custom.fit_year_max Number (integer) Year range
custom.fit_stock_lift Number (decimal) Stock lift maximum
custom.fit_stock_tire Number (decimal) Stock tire maximum
custom.fit_modified_lift Number (decimal) Modified lift maximum
custom.fit_modified_tire Number (decimal) Modified tire maximum
custom.clearance_notes Multi-line text Clearance guidance
custom.install_notes Multi-line text Install guidance
custom.oem_cross_reference Single-line text OEM/cross-reference

The fit comparison is:

  1. No saved build → Set your build.
  2. No fitment data → Check fit.
  3. Universal product → Stock fit.
  4. Make, model, drive, and year must match.
  5. Within stock lift and tire maxima → Stock fit.
  6. Within modified maxima → Fits with mods.
  7. Outside both → Does not fit.

0 means zero inches, not “no limit”. Use fit_universal for universal products. The product signature hides the fitment panel when no fitment data exists, keeps the notes/OEM when they do, and never claims guaranteed fitment.

Product page

The product page shows the part number, build stage, fit badge, price, product form, description, pickup, sharing, and the fitment signature. The signature includes the current build, stock and modified maxima, fit scope, a check-fit form, clearance notes, install notes, OEM reference, and the fitment disclaimer.

Collection page

The collection masthead shows the collection image, title, description, count, saved build, and a Fits my build toggle. Turning the toggle on hides parts whose current status is not Stock or Modified. The toggle requires a saved build; without one it explains how to set the build and leaves the shelf intact.

Native filters can cover vehicle, build stage, lift, tire size, drive type, and engine through product tags. The fit toggle is an additional client-side comparison.

Category and home sections

The home page includes six category tiles, a featured “Fits your build” shelf, a three-build gallery, installation guides from a blog, a fitment FAQ, and a newsletter. All section copy and collections are editor settings.

Demo catalog

demo/camber/products.csv contains six products and fourteen variant rows. The fictional demo build is 2019 Northbend Ridge / 2 in lift / 33 in tires / 4WD.

With that build saved:

  • Suspension kit — Fits with mods.
  • Wheel — Stock fit.
  • Tire — Fits with mods.
  • Skid plate — Does not fit (2015–2018 only).
  • Recovery strap — Stock fit (universal).
  • Roof rack — Fits with mods.

The full import order, tags, collections, filters, pages, menus, and test script are in demo/camber/README.md.

6. Customisation

  • Design tokens — edit config/settings_schema.json defaults or use the theme editor. CSS variables are generated in snippets/css-variables.liquid.
  • Theme CSS — assets/theme.css contains the trail-garage art direction. assets/base.css contains shared commerce mechanics and content utilities.
  • Theme JavaScript — assets/base.js contains shared cart, search, header, media, and motion behavior. assets/theme.js contains the build garage, fit comparison, collection toggle, and gift-card recipient.
  • Sections — add or duplicate sections in sections/. Each section has a {% schema %} block.
  • Product page blocks — reorder or hide description, form, complementary products, custom liquid, app blocks, and the fitment signature.
  • Translation — edit locales/en.default.json.
  • Icons — snippets/icon.liquid contains original SVG paths.

7. Validation status

  • npx shopify theme check --path themes/camber --fail-level error: 0 offenses in the final run.
  • node tools/validate-themes.mjs: all structural checks passed with Camber in the portfolio scan.
  • Live-store installation, build persistence, cart behavior, filters, fitment comparisons, checkout, and Lighthouse were not executed in this environment. Run the commands in section 8 on a development store before submission.

8. Pre-launch checklist

npx shopify theme check --path themes/camber --fail-level error
node tools/validate-themes.mjs
npx shopify theme dev --store your-store.myshopify.com --path themes/camber

Then verify on the development store:

  • Save and clear a build in the header panel, hero, build garage, and product check-fit panel.
  • Confirm the build summary follows the home, product, collection, and footer.
  • Check every fit status against the metafields and the demo build.
  • Turn Fits my build on and off; confirm the empty state and no-build prompt.
  • Product form, variant selection, price, compare-at price, media, add to cart, pickup, and accelerated checkout.
  • Cart page and drawer quantities, remove, note, discounts, selling plans, and drawer refresh.
  • Search results, no results, predictive search, sort, filter, and query preservation.
  • Gift card recipient toggle and hidden fields.
  • Mobile header, build panel, menu, search, cart, and horizontal overflow at 390×844.
  • Heading order, keyboard access, focus states, plural labels, and reduced motion.

9. Known limitations

  • The build profile is local to the browser and device. It does not sync to a customer account.
  • Fitment is merchant-entered data, not a full vehicle database. It cannot see tire brand, actual ride height, worn bushings, or local inspection rules.
  • 0 means zero inches. Universal products must use fit_universal; the theme does not treat zero maxima as “unlimited”.
  • The collection fit toggle filters only the products already loaded on the current collection page. Use the native filters for the broader catalog.
  • Fitment is not a guarantee, alignment plan, or safety approval. The signature says so.
  • The demo images use licensed Shopify Burst photography. Original SVG product art remains in demo/camber/images/ as offline fallbacks.
  • The theme_info documentation and support URLs point to deivisoft.eu. Publish those pages before submission.
  • The theme ships one preset. Additional presets require a /listings folder and separate demo stores.
  • Shopify Theme Store acceptance is not guaranteed. Review the current requirements and test on a development store before submitting.

10. Support and license

See LICENSE.md for the commercial license terms. See the repository root THIRD_PARTY_NOTICES.md for third-party components. This theme does not bundle third-party JavaScript libraries or font files.

For support, use the contact channel defined by the seller. Theme support covers theme bugs and documented configuration; it does not include custom design or code changes.

FAQ

How do I install the theme?

Install the ZIP from the Theme Store or upload it under Online Store → Themes → Add theme → Upload ZIP file. Then publish or preview the theme.

Does the theme require apps?

No. The core experience uses native Shopify features. App blocks are available for optional integrations such as reviews, subscriptions, or wholesale pricing.

How do I get support?

Use the support form. Include your store URL, theme name, and a description of the issue. We reply within two business days.

How do updates work?

Theme Store purchases include updates. Download the latest version from the Theme Store or your Shopify admin and apply it to a duplicate of your theme before publishing.