Setup guide

This guide takes you from a freshly added theme all the way to publishing Torquex as your live theme. Almost everything happens visually in the Shopify theme editor — no code required. Work through the sections in order: the setup sequence here is the one that produces the fewest surprises.

Torquex is built on Online Store 2.0 with vanilla CSS and JavaScript, so no third-party apps are required for any built-in feature, including the automotive fitment tools.

1. Add Torquex to your store

Torquex installs from the Shopify Theme Store and stays unpublished until you choose to publish it, so you can configure and preview the entire theme on your real catalog without affecting the storefront your customers see. For the install steps and the difference between Customize, Preview, and Publish, see Install & update.

Tip

Keep your current live theme in place while you set up Torquex. Publishing later swaps the live theme but never deletes the old one, so you always have a way back.

2. Recommended setup order

Configure Torquex in this sequence. Each step builds on the previous one, and because the theme stays unpublished you can preview every change live before committing.

1. 1 Theme settings
2. 2 Header & menus
3. 3 Homepage
4. 4 Templates
5. 5 Footer & policies

1 Theme settings

Open Customize → Theme settings and set your logo, colors and color schemes, typography, and layout. Set your accent color first — it carries through buttons, links, and badges, so it has the widest visual impact.

2 Header & menus

Configure the Header section and point its Main menu at your navigation. Set the header up before the homepage so navigation is ready when you preview pages.

3 Homepage

Open the Default template and work down the section list — arrange, fill in, hide, or reorder the homepage sections. The layout ships pre-populated; you replace the placeholder content with your own.

4 Templates

Switch the editor’s page selector to a collection and then a product to configure those templates — grid and filtering, the product blocks and gallery, and the product tabs.

5 Footer & policies

Open the Footer section, fill its three columns (menus, contact rows, selectors), and set your store policies under Settings → Policies in your admin.

← Back

Next →

Every setting referenced below lives in the theme editor (Customize) unless stated otherwise.

Step 1 — Theme settings

Open Customize, then in the editor open Theme settings (the gear-style settings panel, separate from any individual section). Torquex groups its global settings as follows:

Theme settings group	What you set there
Logo	Upload Light mode logo and Dark mode logo, set the Logo alt text, and adjust Logo scale.
Favicon	Upload the browser-tab Favicon.
Colors	Edit your color schemes — each scheme has eight color fields: Background, Surface (cards), Border, Body text, Muted text, Accent, Accent hover, and Button label — plus the global functional Success, Warning, and Error colors. Torquex ships eight ready-made schemes you can edit or add to.
Typography	Choose Heading font (default Bebas Neue) and Body font (default Barlow), base size, heading scale, body line height, heading transform and letter spacing, and the optional monospace font.
Layout	Page width (1280 / 1440 / 1600 px), grid gap, corner radius, and button scale.
Products	Product-card options: vendor, badges, sale-badge style, sold-out badge, image ratio, quick view, and image hover.
Cart	Cart type (drawer or page) and the Cart icon (bag / cart / basket).
Checkout	Show accelerated checkout buttons and payment terms.
Currency	Show currency codes alongside prices.
Animations	Turn scroll/entrance animations on or off.
Social media	Profile URLs for Instagram, YouTube, Facebook, X, TikTok, LinkedIn, Pinterest, Threads, Snapchat, Vimeo, and Tumblr.

For a field-by-field reference of every global setting and its default, see Theme settings.

Note

Torquex ships with a dark, industrial default palette (background #0f0f0f, accent #ff7a1a). The accent color carries through buttons, links, and badges, so set it to your brand color first — it has the widest visual impact.

Step 2 — Header and menus

Set up the header before the homepage so navigation is ready when you preview pages.

1. In the theme editor, open the Header section (in the header group at the top of the editor).
2. In the section’s settings, set the Main menu field. By default it points to the main-menu menu that Shopify creates for every store. You build the actual links in your admin (see Build your navigation menus below).
3. Torquex supports mega-menu columns as blocks on the header for richer drop-downs, plus a logo, search, and cart entry point. The full header walkthrough — announcement bar, search behavior, and mega menus — is in Header & navigation.

Step 3 — Build the homepage

The homepage is the Default template. Torquex ships this template pre-populated with a full set of sections so you can see the intended layout immediately, but the product, collection, image, and video references inside those sections are intentionally empty — you fill them with your own content.

Open the homepage in the editor (it loads by default when you click Customize) and work down the section list. In order, the sections that ship on the default homepage are:

• Hero banner — your headline, supporting text, call-to-action, and background image or video.
• Featured collections — pick the collections to spotlight (one per collection card block).
• Garage banner — invites shoppers to save their vehicle.
• Bundle promo and Bundle builder — promote and assemble overlanding kits (choose the products in each).
• Before / after slideshow — drag-to-compare a stock vs. modified build.
• Reviews showcase, Featured product, Compare products, Install difficulty guide, Testimonials, Video section, Blog posts, Contact info, Newsletter, and Trust badges.

Add, remove, hide, or reorder any of these to suit your store. For what each section does and every setting it exposes, see Building the homepage and the Sections reference.

Tip

You do not have to keep every section. Hide the ones you are not ready to fill (for example Compare products or Bundle builder) and bring them back later. Empty sections with no products or images selected simply render nothing or a placeholder.

About demo / preset content

Torquex does not ship a separate demo data pack you import. The homepage layout, the dark default styling, and the eight color schemes are already applied out of the box through the theme’s default template and its single bundled Default preset. That preset carries only the global theme settings and color schemes — it does not contain section content, so there is nothing to “apply” beyond the layout you already see.

In practice this means setup is replacement, not import: keep the section structure, swap the placeholder text where you want, and point the empty product, collection, image, and video fields at your own content. If you ever want to return the theme settings to their shipped values, you can re-select the Default preset from the theme editor’s settings menu — but note this resets global settings (colors, fonts, layout), not your section content.

Step 4 — Collection and product templates

Switch the editor’s page selector to a collection and then a product to configure those templates.

• Collection template — grid density, filtering, sorting, and the product cards shoppers browse. See Collection & search pages.
• Product template — the product blocks (title, price, variant picker, buy buttons), the media gallery, the product tabs (including the Fitment and Installation tabs), and the sticky add-to-cart bar. See Product pages.

The automotive-specific pieces on these pages — the fitment selector, the “Fits your vehicle” badge, the spec tables, and the install-difficulty badges — only show once products carry the right metafields. Set those up in Set up the automotive metafields below.

Step 5 — Footer and policies

1. Open the Footer section in the editor. The footer has three fixed columns. Open each column and add blocks inside it — e.g. a Footer menu block, then point its Menu field at the menu you want that column to show, so you can mirror your store’s navigation. Columns can also hold contact rows, language/country selectors, and a Follow-on-Shop block. Social icons in the footer are driven by the Social media URLs you set in Theme settings (Step 1).
2. Set your store policies — refund, privacy, terms of service, and shipping — under Settings → Policies in your Shopify admin. Shopify links these automatically wherever the theme references them.

Full details: Footer.

3. Build your navigation menus

Menu links themselves are managed in your Shopify admin, not the theme editor. The theme’s Header and Footer simply point to the menus you build.

1. Go to Online Store → Navigation.
2. Edit the Main menu (handle main-menu) — this is the menu the Header section uses by default. Add links to your top collections, the all-products page, your blog, and key pages.
3. Add nested links (drag a link under another) to create drop-downs. Torquex renders nested links as submenus, and pairs them with its mega-menu column blocks on the header for larger drop-downs.
4. Create additional menus for your footer columns as needed, then point each Footer menu block’s Menu field at the menu you want it to show.

Changes you make in Navigation appear immediately in the theme editor and on Preview — no republish needed.

4. Set up the automotive metafields

Torquex’s automotive features — the cascading Year → Make → Model fitment selector, the “Fits your vehicle” badge, the technical spec table, the install-difficulty badge, and the compare table — all read from product metafields in the custom namespace. Define them once, then fill them in on your products.

Create the definitions

In your Shopify admin go to Settings → Custom data → Products → Add definition, and create one definition per row below. Set the Namespace and key to exactly the value shown, and the Type as listed.

Namespace and key	Type	What to store	What it powers
custom.fitment	JSON	An array of vehicle objects with lowercase keys year, make, model, and optional trim.	The fitment selector, the “Fits your vehicle” badge, the product badges, and the Fitment tab table.
custom.install_difficulty	Single line text	Exactly one of (lowercase): easy, moderate, professional.	The install-difficulty badge (with wrench icon) on the product page, Installation tab, product card, and compare table.
custom.weight_kg	Decimal (or Integer)	A bare number with no unit, e.g. 12.5. The theme adds ” kg” itself.	The Weight row of the spec table and compare table.
custom.dimensions	Single line text	Free-form, include your own units, e.g. 120 x 80 x 30 cm.	The Dimensions row of the spec table and compare table.
custom.material	Single line text	Free-form, e.g. 6061-T6 Aluminum.	The Material row of the spec table and compare table.
custom.warranty	Single line text	Free-form, e.g. 2 years or Lifetime.	The Warranty row of the spec table and compare table.
custom.part_number	Single line text	Free-form SKU/part string, e.g. TQX-1042-BLK.	The Part number row, the product SKU block, variant data, cart line SKU, and product structured data (it overrides the variant SKU when set).

Caution

For custom.weight_kg, store the number only (12.5, not 12.5 kg) — the theme appends ” kg”, so a value of 12.5 kg would render as 12.5 kg kg. For custom.install_difficulty, the value is case-sensitive and must be exactly easy, moderate, or professional; any other value shows no badge. Add a Choices / list of values validation on that definition limited to those three values so editors can’t enter anything else.

A valid custom.fitment value looks like this:

[
  { "year": 2021, "make": "Toyota", "model": "Tacoma", "trim": "TRD Pro" },
  { "year": 2021, "make": "Toyota", "model": "Tacoma", "trim": "SR5" },
  { "year": 2020, "make": "Ford", "model": "F-150" },
  { "year": 2022, "make": "Jeep", "model": "Wrangler", "trim": "Rubicon" }
]

year may be a number or a numeric string; trim may be omitted on any row. An empty or missing metafield simply renders none of the automotive features — products without these metafields still display and sell normally.

Fill them in on products

After the definitions exist, open any product and scroll to its Metafields section to enter values. Start with a handful of products, then Preview a collection and a product page to confirm the fitment selector returns the right parts and the spec tables fill in.

For the full data model and matching behavior, see the Metafields reference and Automotive features.

5. Go-live checklist

Run through this before you publish. Use Preview to check each item against your real catalog.

• Logo, colors, and fonts in Theme settings reflect your brand (accent color especially).
• Favicon uploaded.
• Main menu built under Online Store → Navigation and showing correctly in the Header.
• Footer columns and Social media links are complete and link correctly.
• Homepage sections are filled in (hero, featured collections, and any others you keep) — no leftover placeholder text or empty product/image fields.
• Collection and product templates reviewed.
• Your 404 page is styled (theme editor → page selector → 404 page) so a lost visitor lands on a branded page with a search box.
• The seven custom.* metafield definitions exist, and a sample of products carry their fitment and spec values.
• The fitment selector returns the right parts and the spec tables populate on a test product.
• Store policies (refund, privacy, terms, shipping) set under Settings → Policies.
• You have placed a test order (see below) and confirmed checkout works end to end.

When every item checks out, publish from Online Store → Themes, find Torquex in the Theme library, and choose Actions → Publish.

6. Place a test order

Confirm the full purchase path works before customers use it:

1. In your Shopify admin, go to Settings → Payments and either enable Shopify’s test mode (Bogus Gateway) or use a real payment provider.
2. On your storefront (use Preview while Torquex is still unpublished), add a product to the cart. Confirm the cart drawer opens (or the cart page, depending on your Cart type setting in Theme settings).
3. Proceed to checkout, complete the order with test or real card details, and verify the order confirmation, the confirmation email, and that the order appears under Orders in your admin.
4. If you used test mode, turn it off before going live so real orders can be placed.

A successful test order is the final gate — once it passes and the checklist is clear, publish Torquex.

---

Related: Install & update · Theme settings · Automotive features · Torquex support replies within 12 hours.