Mandrel — Documentation

Shopify theme for tool, hardware and workshop stores · Version 1.1.0 · Author: Lizardassets · Versión en español

Status. Mandrel 1.1.0 has not been submitted to or approved by Shopify and is not in the Shopify Theme Store. It has not yet been tested in a real Shopify store: all checks so far were local.

Contents

1. Introduction
2. Installation and choosing the style
3. Global settings
4. Sections and blocks
5. Templates
6. Theme-specific features
7. FAQ and troubleshooting
8. Support
9. Changelog

Labels in bold are the names you see in the theme editor in English. Texts in “quotation marks” are what shoppers see.

1. Introduction

Mandrel is a theme for stores that sell tools, spare parts, hardware and workshop supplies. Shoppers in these stores often know a part number, compare formats and sizes, and buy several items at once. The theme is built around that:

• References. The variant SKU is shown as a reference. Shoppers can copy it with one click. Search suggestions find a product by its SKU or barcode in every style, and show its stock.
• Families. Your menus and collections act as product families. Several styles show the number of products in each family.
• Specifications and documents. On the product page you can show specification rows from product metafields for the whole catalogue, and add documents, care notes, size guides, delivery information and composition for one product, exact variants or every product.
• Finding parts. The Parts finder section turns a collection's filters into a short guided search.
• Ordering several items. The Order workbench, Quick order list and Purchase tools sections help shoppers add several formats at once.

Mandrel has five styles (also called presets): Mandrel, Joinery, Crimp, Gauge and Quench. They are not just colour changes. Each style has its own header, menu, product card, collection page, product page, quick view, cart, search, 404 page, password page and gift card page. Section 2.7 describes them.

1.1 The five styles

Mandrel has five styles (also called presets). Each one changes how the store works, not only its colours (see 2.7):

• Mandrel — the reference desk: an always-visible reference search, families with counts and dense product rows with copyable references.
• Joinery — the cut list: an editorial layout with portrait cards, a click-to-open curtain menu and a two-step basket.
• Crimp — the job kit: products organised by job, “Add to kit” on every card and a kit sheet grouped by job.
• Gauge — the optical bench: square museum frames with a loupe, an instrument-dial menu and a central product stage.
• Quench — the operation sheet: a black header, a temper-colour menu and full-bleed cards with a black band.

1.2 What Mandrel does not do

• It does not invent data. Specifications, documents and compatibility notes appear only when you enter them. Nothing is calculated or guessed.
• It does not collect reviews. A reviews app provides them: the theme shows the rating it publishes on cards (3.5), and you can add the app's own block on the product page.
• It does not include legacy customer account templates (see 2.2).
• It does not convert units in comparisons or pick a “winner”.

2. Installation and choosing the style

2.1 Add the theme

1. In Shopify admin, go to Online Store › Themes.
2. Add the theme to your theme library. If you received a ZIP file, use the upload option in the theme library (Add theme › Upload zip file, or the label your admin shows).
3. The theme is added as an unpublished theme. Your live store does not change.

2.2 Preview, customize and publish

• Preview lets you browse your store with Mandrel before publishing.
• Customize opens the theme editor.
• Publish makes Mandrel your live theme. Check the home page, a product, a collection, search and the cart with your own products first.
• Duplicate the theme before large changes, so you can go back.
• Customer accounts. Mandrel has no legacy customer account templates. The account link in the header uses Shopify's customer accounts. If your store still uses legacy accounts, check Shopify's help on customer accounts before publishing.

2.3 Choose a style

There are two ways to choose a style, and they do not do the same thing.

1. When you add the theme (recommended). Pick one of the five styles. Shopify then installs:

• the style's settings: theme identity, colours and colour schemes, colour mode, fonts and the other design settings;
• the style's own home page, product page and workshop page (sections, order and texts), and its header group with the style's announcement text;
• for Gauge, also its own password page.

The result matches that style's demo, without the demo's products, images or menus.

2. Later, in Theme settings. Theme settings › Brand identity › Theme identity switches the design and behaviour of every surface. Shopify's documentation for theme styles (presets) says that switching style only copies design settings (such as colours, fonts, checkboxes and selections); text and link settings are not copied, and templates are not replaced. Your home page, product page and other templates stay as they are. To get another style's full layout, add the theme again and choose that style when you add it.

The Theme identity list shows the five style names: Mandrel, Joinery, Crimp, Gauge and Quench. Its help text reads: “Sets the design and behavior of the header, cards, collections, product page, quick view and cart: Mandrel, Joinery, Crimp, Gauge or Quench.”

Changing Theme identity on its own changes the layout and behaviour of every surface (header, cards, product page, cart and so on). It does not change your colours or fonts: edit them in Colors and Typography.

2.4 What each style's home page contains

Each style comes with its own home page. No products, collections or images are preselected: choose your own in the editor, including the collection of the Parts finder (the editor shows a note until you do).

Before you add content. In a new store, every home page section of the style still shows, in the style's own design, in light and dark mode:

• photos you have not chosen yet show the style's own placeholder drawing, on a background that follows the section's colour scheme;
• the Parts finder shows sample fields in the style's own form (disabled dropdowns in Mandrel, Joinery and Crimp, a blank graduated scale in Gauge, blank temper plates in Quench), a hint and a working “Browse the product catalog” button;
• the Order workbench shows sample rows;
• Joinery's Tool study shows a sample tool;
• product cards and collection tiles keep their style's layout.

Replace them with your own content in the editor.

The default home page in the theme files (used if you upload the theme without a style) contains Technical opening, Family directory and Product selection.

Other templates and texts installed with each style

The order of the workshop page sections also differs by style. Accelerated checkout buttons are on by default on the product page and in the cart. Gauge and Quench start in dark mode; Crimp starts with a dark header and footer.

2.5 Other templates

To use the contact, editorial or workshop template, create a page in Online Store › Pages and choose the template in the page's Theme template field.

2.6 First steps checklist

1. Theme settings › Brand identity: upload your Logo and Favicon, and set Logo width.
2. Theme settings › Colors: review the colour schemes and choose Color mode (section 3.3).
3. Menus: build your main menu and footer menu (section 3.9). In the Crimp style, the jobs come from your menu.
4. Products: add SKUs to your variants (they become the references), good images with alt text, and the product data you want to show. For specifications, create product metafields and list them in Theme settings › Product data (section 6.6).
5. Home page: choose the slideshow images, the collections and the products in each section.
6. Product template: add specification, document and care blocks for your products (section 6.6).
7. Search & Discovery app: set up the filters you want on collections and search (section 6.3).
8. Cart: decide whether to use the cart panel, set the Free-shipping threshold, and check the discount field and cart recommendations (Theme settings › Cart). Decide whether to offer a gift wrapping product (section 3.14).
9. Languages: publish other languages and translate your own content (section 3.18).

2.7 The five styles in detail

Each style changes how the store works, not only how it looks. The table gives a quick overview; the sections below explain each one. Texts in “quotation marks” are what shoppers see on an English storefront.

Card actions and Show quick view. Several card actions depend on Theme settings › Catalog › Show quick view. When it is off:

• Single-variant products keep their direct “Add” on Mandrel and Joinery cards (and “Add to kit” on Crimp cards).
• Products with options: Mandrel's “Options”, Joinery's “+” and Crimp's “Choose options” open the product page instead of the quick view.
• Gauge cards have no “Inspect” button, and Quench cards have no “Quick view” button.

Mandrel — the reference desk

For parts and hardware catalogues where shoppers search by reference.

• Header. A search field that is always visible; shoppers press “/” to jump to it. Account and cart are shown as words with figures.
• Family rail. Under the bar, a rail lists the links of your main menu with the number of products in each collection. A link with sub-links opens a drawer grid of families (up to three sub-links each, then “All in …”).
• Header on phones. The search field docks at the bottom of the screen with a “Families” button. It opens a sheet with levels and a “Back” button.
• Product card. A dense row: square thumbnail, title, reference with a copy button, availability as a dot and text, price, and “In cart · n” when the item is already in the cart. There is one action: “Add”, “Options” or the sold-out text.
• Card data. Card specifications show one per line and the rating on its own line; a value that does not fit ends with “…”.
• List and density. In collections and search the shopper can switch “List” / “Grid” and “Row density” (“Comfortable” / “Compact”). The browser remembers that choice.
• Collection page. Title with the product count, a family tree from your Family menu, the filter tree, a toolbar with sort, density and layout, a “query line” of applied filters and numbered pages.
• Product page. A technical sheet: purchase controls on the left, gallery on the right. Below, a full-width sheet with a fixed index “Specs · Documents · Notes”. The specs table also shows the variant's weight and barcode when they exist.
• Product page bar. A fixed bar with reference, price and “Add” stays available. The reference updates when the variant changes.
• Quick view. A right drawer (bottom sheet on phones) with previous and next product buttons, so shoppers can move through the list without closing it.
• Cart. On desktop, a small panel under “Cart n” that does not block the page; on phones, a bottom sheet. The cart page is a table with a fixed summary. Both offer “Copy references”.
• After an add. A short notice confirms the add in place, with a “View cart” link. With Use cart panel on, “View cart” opens the cart panel at every screen width; with it off, it goes to the cart page.
• 404. “Reference not found”: the search field is prefilled with the last part of the address, and your families are listed.
• Fonts by default: Saira (headings and body) and Azeret Mono (references).

Joinery — the cut list

For hand tools, woodworking and craft supplies sold with an editorial voice.

• Header. Wordmark on the left, your families on the right, utilities as words. It hides when the shopper scrolls down and comes back on the way up, but never while focus is inside it or a menu is open.
• Curtain menu. A parent link opens a curtain by click, with sub-links, a photograph and three products. If you add a Navigation promotion block with an image to the header, that image is used in the curtain.
• Header on smaller screens. Below 1024 px, a left drawer shows large serif links and image tiles.
• Product card. Portrait 4:5 with soft corners. With Enable alternate card image on, the second product image is revealed with a brushed mask on hover or focus.
• Card button. A round “+” in the corner adds a single-variant product directly. For a product with options it opens the quick view, or the product page when Show quick view is off.
• Collection page. A large title with the count and a horizontal filter bar. Each filter opens a small popover with “Apply” (a bottom sheet on phones); sorting sits in the same bar. Applied filters read as a sentence with removable words.
• Collection grid. The grid alternates rows of 7/5 and 4/4/4. The last row always closes at card size: a card left over joins the cards before it in a row of three or four, so no single card stretches across the page. A product without a photo in a wide slot is shortened to the height of a normal card.
• Material notes. If you create a collection metafield custom.material_notes (type: list of single-line text) and fill it, a “Material notes” block appears after every six products. Without that data nothing is shown.
• Product page. Editorial: a vertical stack of images (about 60 %) beside a sticky purchase column (about 40 %). Then “The making” (your description and text blocks).
• Cut list and care. A “Cut list” is built from your Associated specification blocks (only when there are some). Care and use go into accordions. On small screens a purchase bar sits at the bottom.
• Quick view. A bottom sheet that rises to 72 % of the screen, with images in a horizontal strip and the purchase band below. Below 900 px the sheet is taller (88 % of the screen, the whole screen on short phones) and the image strip is shorter, so the title, price, options and “Add” stay in view.
• Cart (“Basket”). A right drawer in two steps. Step 1, “Pieces”, already offers checkout and an “Add a note” button. Step 2, “Note for the workshop”, holds the order note, discounts and totals. The note saves itself and says “Saved”.
• Cart without the panel note. When Show order note in cart panel is off, the button reads “Review totals” and step 2 becomes “Order summary”, without a note field. Gift wrapping is offered on the cart page only. The cart page has two columns with the note in a prominent place.
• Search. A full-screen overlay with a large serif field, pieces as an editorial list, and “Materials” as chips.
• Email signup. The Signature setting of the Email signup section is shown only in this style.
• Fonts by default: Cormorant (headings), Alegreya Sans (body), Anonymous Pro (references).

Crimp — the job kit

For electrical, installation and trade supplies, organised by job.

• Jobs. The jobs are taken from a menu: Theme settings › Catalog › Crimp jobs menu (default main-menu). The header, cards, collections, search, footer, empty cart and product page all read it. See 5.3.
• How jobs are found. The theme uses the sub-links of the first link in that menu that has sub-links (for example Shop › Cut, Strip, Install, Test). If no link has sub-links, it uses the top-level links. Link each job to a collection: the theme uses those collections to label products, group them and count them.
• Header. A bar with your logo, the job switcher (the active job is highlighted), “Tools”, search with a visible Ctrl K / ⌘K hint, account and the “Kit” with its counter.
• Tools menu. “Tools” opens a menu with vertical job tabs and up to six tools per job, each with “Add to kit” or “Options”. The header menu's other top-level links are listed there too (when the jobs are the sub-links of one link, or come from a different menu).
• Tools menu with the keyboard. Tab from “Tools” enters the open panel, Shift+Tab returns to it, and Tab after the last item closes the panel.
• Header on phones. A fixed bottom bar shows four jobs and the Kit; “Menu” opens a full-screen menu.
• Long job names. Jobs that do not fit on the switcher row are hidden from it (also for keyboard users) and stay available in “Tools”. In the bottom bar on phones, and for a very long first job in the header, names end in “…”; screen readers still hear the full name.
• Product card. A tinted card with an angled corner, the job label, a square image, the condensed title and the price. With Enable alternate card image on, the second image appears on hover or keyboard focus.
• Card button. One full-width button. A product with one available variant gets “Add to kit” (it then reads “In kit ×N”). Products with options get “Choose options”, which opens the product inline under the row of cards. Sold-out products get “View tool”, which opens the product page.
• Collection page. The job switcher as chips, a “Filters” drawer, sort as a segmented control (from 768 px four options per row, with long labels wrapping inside their segment), sticky chips for active filters, and products grouped by job under sticky headings. When the shopper chooses a sort order, the list becomes flat in that order.
• Jobs with one tool. A job with only one tool shows it as a wide horizontal card.
• Product page. A swipeable gallery with a counter, the job chip, option tiles, large quantity steppers and “Add to kit”. Then “Used for” (the jobs that contain the product) and “Complete the job” (Shopify's complementary products, with “Include …” boxes added together).
• Buying bar on phones. A buying bar sits at the bottom; it hides while the form's own “Add to kit” is in view, so there is never a second button on screen.
• Jobs on the product page. Product details › Family menu takes priority when you choose one; otherwise the Crimp jobs menu is used.
• Cart (“Kit”). From 1024 px a bar docks at the bottom after the first add (“Kit · 3 lines · total · Review kit”). It opens a kit sheet grouped by job, with the order note in a disclosure and checkout always visible. The kit does not open by itself after an add; the counter updates instead.
• Featured collection. Show “Add all” button adds every visible available product in one step. It appears only in this style, and only when at least two products can be added; gift cards and subscription-only products are left out.
• Fonts by default: Bebas Neue (headings), Rubik (body), Roboto Mono (references).

Gauge — the optical bench

For measuring instruments, precision tools and products where close inspection matters. This style starts in dark mode (Color mode: Dark).

• Header. A thin bar with the logo, menu, search, account and “Cart” with its count.
• Transparent header. When the first section of a page is a Slideshow, the header starts transparent over it and becomes a translucent bar after 24 px of scrolling. Turn this off with Header › Transparent over first slideshow. This setting only affects the Gauge style.
• Instrument dial menu. From 1024 px, a button next to each parent link (up to six in the bar) opens a dial. Its sub-links (up to ten) sit around a graduated arc; above seven the dial grows and the arc widens. A needle turns to the link the shopper points at or focuses, and the dial's window shows that collection's photograph.
• Dial reading. Beside the dial, a reading shows the product count, the link's own sub-links, “Browse …”, up to two Navigation promotion links (header blocks with a heading and a link) and a link to the parent. Arrow keys, Home and End turn the needle; Tab moves into the reading; Escape closes the dial.
• Header on phones. “Menu” drops a sheet with the top-level entries as tabs (up to three).
• Product card. A square frame with corner marks. With a mouse, a square loupe follows the pointer (up to 2×, never beyond the image's real resolution). “Inspect” (when Show quick view is on, and always visible, also with a mouse) opens a lightbox with options, quantity and “Add to cart”.
• Card details. Below the frame: the name, the price and one optional datum. There is no add-to-cart button on the card.
• Collection page. A quiet title, a “lens bar” (“Refine your selection”) with one popover per filter, sort and a live count, then a grid of squares that appear through an aperture animation.
• Product page. A central “stage” with named view tabs (taken from the media alt text), a loupe, and “Enlarge” for a full-screen view at 1×, 2× and 3× with pinch support.
• Purchase column. From 1100 px a narrow purchase column stays on the right for the whole page, and the specifications and documents sit under the stage, beside it (from 1100 to 1279 px in one column, description first; wider, in two columns).
• Buying band on smaller screens. Below 1100 px a band at the bottom shows the name, the selected option, the price (hidden on very narrow screens) and “Add to cart”. It tucks away while the form's own add button is in view.
• Quick view. A lightbox with the product on its stage and a purchase band below.
• Cart. A shade that drops from the top (at most 60 % of the screen height, 90 % on phones). It opens from “Cart” and after an add, and marks the new line for a moment.
• Pinned area on phones. On phones only the totals and “Checkout” stay pinned at the foot of the shade; the note and the discount field scroll with the lines.
• Short screens. On phones with little height the shade fills the screen below the header and the lines are laid out more compactly, so more lines and “Checkout” stay in view.
• Note in the shade. When Show order note in cart panel is on, the order note folds into the summary (open when a note already exists). The cart page is a narrow receipt-like column.
• Search. A right-hand panel. If a product has the metafield custom.measuring_range, its value appears in the suggestions.
• Related products. On the product page, a Related products section loads by itself as the shopper scrolls near it, and disappears when Shopify returns no products (for example on a gift card).
• Fonts by default: DM Sans (headings and body), Geist Mono (references). The password page and gift card are always dark.

Quench — the operation sheet

For metalworking, fabrication and heavy-duty tools. This style starts in dark mode (Color mode: Dark).

• Header. A black bar that stays at the top while the brand shrinks. From 1200 px up to six operations of your menu sit in the bar as links in sentence case, each marked with its temper colour. Operations that do not fit on the row are hidden there and stay in “Menu”.
• Search. “Search” opens a field inside the bar with up to four product tiles below. It folds away as soon as focus leaves the field and its suggestions; Escape closes it and returns focus to “Search”.
• Temper bar menu. From 1024 px, “Menu” opens a panel under the header. The first eight operations form the segments of a bar in temper colours, from straw to blue (the six colours repeat after six). A needle follows the segment the shopper points at or focuses.
• Long names and extra operations. Long names wrap by word or end in “…”; the link keeps the full name for screen readers. Any further operations appear under “More operations”, next to “All operations”.
• Stage reading. Under the bar, the chosen operation shows its collection photo tinted in its colour, the links you placed under it in your menu (and their own sub-links), and “Open …”. A row with the rest of your menu follows. Left and Right move along the bar, Down or Tab enters the reading, and Escape closes the menu.
• Menu on smaller screens. Below 1024 px, “Menu” opens a right drawer with the operations as stacked colour bands. Each band is a link with the name and product count; when the operation has sub-links in your menu, a 44 px button opens them below the band. The drawer shows every operation, with no limit.
• Operations. The operations are the sub-links of the first menu link that has sub-links, or the top-level links. They are shown as black plates with a photo, name and product count in the empty cart, the 404 page, empty search and empty collections.
• Product card. A full-bleed 4:5 image and a black band with the title and price. With Enable alternate card image on, the second image appears on hover or keyboard focus. A 44 px “Quick view” button sits in the band.
• Card facts. On hover or focus the band rises and shows the product type and the manufacturer. The manufacturer appears only when Show manufacturer is on and the vendor differs from the store name. On touch screens the facts are always visible.
• Collection page. A process photograph under a black title plate, a “Filters” drawer on the left, sort plates in four equal columns, a 2/4 grid switch (the browser remembers it), and applied filters as black plates.
• Product page. A full-width horizontal gallery, a large title, the purchase sheet and the specifications in large blocks. A fixed operation bar (variant, price, quantity, “Add to cart”) appears only when the main purchase controls are out of view.
• Quick view. A wide left drawer.
• Cart. A full-screen panel that rises from the bottom, with large quantity figures, the order note and a summary band. It does not open by itself after an add.
• Footer. A straw newsletter band (or a catalog link when the newsletter is off), then a “treatment record”: one row for each footer menu (Navigation menu, Second menu, Third menu), with the menu's title on the left and its links along the row. Empty menus are left out.
• Shop name in the footer. The shop name runs across the full width in Arvo and is scaled to fit, so no letter is cut off. Long names wrap between words, and very long names get smaller.
• Fonts by default: Arvo (headings), Libre Franklin (body), Source Code Pro (references).

3. Global settings

Open Theme settings (the gear icon) in the theme editor.

3.1 Brand identity

3.2 Typography

All three use Shopify's font picker, so you can choose any font from Shopify's font library. The theme does not ship its own font files. The heading font, and the body font when it is different, are preloaded so that text keeps its line breaks when the page appears. Fonts swap in as soon as they arrive. For the heading and body families the five styles use by default (Saira, Cormorant, Alegreya Sans, Bebas Neue, Rubik, DM Sans, Arvo, Libre Franklin), the theme also sets a size-matched system fallback, whichever style uses them, so text barely moves when the real font replaces it. Other fonts, and the reference font, use the normal fallbacks.

3.3 Colors and dark mode

Color schemes. Each scheme has eight colours:

Each style comes with five schemes. In every style, scheme 5 is the dark scheme. You can add, edit or delete schemes.

Color mode

Gauge and Quench start with Dark; the other styles start with Follow device.

Which scheme each area uses

Several sections also have their own Color scheme setting (Slideshow, Featured collection, Collection list, Image with text, Rich text, Email signup, Blog posts).

Tip. In dark mode one scheme is used everywhere. When you edit colours, check contrast in both modes: text on background, button label on button, and highlight text on highlight.

3.4 Catalog

3.5 Product data

This group sets which product data appears on cards and product pages. It reads Shopify metafields; nothing appears when a product has no value.

3.6 Cart settings

3.7 Social links

Facebook link, X link, Instagram link, TikTok link, Pinterest link and YouTube link. Links you fill in appear in the footer.

3.8 Motion

3.9 Header and footer menus

Create menus in Shopify admin (Content › Menus, or Online Store › Navigation in older admins).

• Header › Navigation menu (default main-menu) is the main menu.
• Header › Customer account menu (default customer-account-main-menu) is used by the account link when customer accounts are on.
• Footer › Navigation menu (default footer), Second menu and Third menu. In Quench, each of these menus becomes one row of the footer's “treatment record”, titled with the menu's name (see 2.7).
• Header › Show store search shows or hides search in the header.

Menus can have three levels. Link top-level items and families to collections whenever possible: several styles show product counts and photos only for collection links.

3.10 How each style uses the main menu

3.11 Family menu on collection pages

Collection results › Family menu chooses the menu shown as a family list or tree on collection pages (Mandrel shows it as a tree and defaults to main-menu; Joinery shows it as a list of links).

3.12 Navigation promotion blocks

The Header accepts up to two Navigation promotion blocks (Heading, Text, Link, Image). The block's help text in the editor explains where it appears. It is used in two styles only:

• Gauge: the heading and text appear as a link in the reading beside each instrument dial (heading and link required).
• Joinery: only the image is used, as the photograph of its menu panels (the curtain).

The other styles do not show them.

3.13 Header and footer sections

Header (header group): Navigation menu, Customer account menu, Show store search, Transparent over first slideshow (Gauge only), up to two Navigation promotion blocks.

Announcement (header group): Text, Link.

Footer (footer group): Heading, Text, Navigation menu, Second menu, Third menu, Show Follow on Shop (appears when Shop Pay is active), Show newsletter form, Show country selector, Show language selector, Show policy links. Payment icons, social links and Back to top (theme setting) also appear in the footer.

3.14 Cart panel by style

The last column assumes Theme settings › Cart › Show order note in cart panel is on (the default). Turn it off to hide the note in every style's panel; in Joinery, step 2 then becomes “Order summary”.

When Theme settings › Cart › Use cart panel is off, or JavaScript is unavailable, the cart link goes to the cart page instead.

3.15 Cart page

The Cart section has:

All carts use Shopify's cart form: quantities, “Update cart” and “Checkout” work without JavaScript. With Theme settings › Cart › Show accelerated checkout buttons on (the default), express payment buttons appear under “Checkout” on the cart page and in the cart panel, when your store has express methods enabled. A quantity of 0 removes the line. Discounts, unit prices, selling plans and line properties are shown as Shopify provides them. Discount codes can be entered in the cart (see 6.7) and at checkout.

3.16 Cart wording

Each style uses its own word in the cart's headings and messages: “Cart” (Mandrel, Gauge, Quench), “Basket” (Joinery) and “Kit” (Crimp). The cart link in the header uses the same word. You can change these texts in Edit default theme content (section 3.18).

3.17 Search

• Search suggestions appear as the shopper types. All styles search product titles, types, vendors, variant names, SKUs and barcodes; Joinery and Crimp also match tags. Suggested products show their stock (“Available”, “Only N left” or “Sold out”).
• Pressing Enter always opens the full search results page, which works without JavaScript. Very long queries wrap on the results page instead of widening it.
• Search results has Products per page and Enable next-batch loading (no effect in Mandrel, see 5.5). Product filters appear on the search page too.
• Theme settings › Catalog › Show search scope shows the choice of result type on the Mandrel, Joinery and Crimp search pages (Crimp's choice reads “All resources / Tools / Guides”) and in the general search form. Gauge and Quench search pages always search all content.
• Mandrel highlights the matching text and lets shoppers copy a reference from a suggestion. Crimp's palette can add a single-variant product to the kit directly.

3.18 Languages and translations

• Mandrel includes English (default), Spanish, French, Italian and German, both for storefront texts and for the theme editor.
• French, Italian and German have not been checked by native speakers in a store. Read them before you publish them.
• To offer a language, add and publish it in your store's language settings. The footer's language selector appears when there is more than one language (Show language selector).
• To change theme texts (for example “Basket” or “Kit”), open the theme's actions menu (…) › Edit default theme content.
• Texts you type into sections and blocks are store content. Translate them with Shopify's Translate & Adapt app or another translation app.
• Variant option values in the Exact options fields of data blocks must match the published values in each language.
• The labels you type in Specification metafields and the card specification Label settings are in one language. Metafield values can be translated with a translation app.

4. Sections and blocks

“Header” and “footer” mean the header and footer groups. The header group takes Header and Announcement; the footer group takes Footer. None of the content sections in 4.1–4.3 (including Email signup, Custom Liquid and Apps) can be added to these groups. For a newsletter form in the footer, use Footer › Show newsletter form.

4.1 Home page and content sections

Slideshow text and contrast. The slideshow has no overlay, text colour or text alignment settings. In every style the heading and text sit on a solid panel or plate, or beside or under the photo: Mandrel uses a panel over the photo on wide screens; Joinery and Crimp put the text in its own column; Gauge uses an almost opaque panel; Quench uses a black plate. Contrast therefore does not depend on the photo. The panel and text colours come from the slideshow's Color scheme, except Quench's plate, which is always black with light text.

4.2 Ordering and workshop sections

4.3 Style-specific sections

These sections can be added in any style, but they were designed for one:

5. Templates

5.1 Product page: Product details section

Product details is the main section of the product template. Its setting Family menu is used by the Crimp style to override the jobs menu on the product page (see 6.8). It accepts up to 50 blocks:

Request a quote and Where to buy are not in the template by default. Add them for trade customers; they appear under the purchase controls in every style, and the SKU in the quote follows the selected variant. Prices are never hidden behind a login.

5.2 Product page: purchase controls

The purchase form is Shopify's own product form, so it works without JavaScript. It supports:

• variants and option selectors (native swatches when you set them up in Shopify);
• quantity, including Shopify's quantity rules (minimum, maximum, increment) and volume pricing;
• selling plans (subscriptions) with their description;
• gift card recipient fields, folded until the shopper ticks “Send to a recipient” (always visible without JavaScript);
• pickup availability;
• accelerated checkout buttons (on by default).

5.3 Product page: media

The gallery supports images, Shopify-hosted videos, YouTube and Vimeo videos and 3D models (with “View in your space” where Shopify supports it). Videos and 3D models load only when the shopper asks for them. Images are shown whole, without cropping.

Tips:

• Write alt text for every image. In Gauge, alt text becomes the name of each view tab (an alt that only repeats the product title becomes “View 1”, “View 2” …).
• Use one proportion for all photos of a product.
• Product titles with very long words wrap inside the page instead of widening it.
• Breadcrumb. The breadcrumb stays on one row and shortens the current item with “…” when space is short; below 360 px the current item gets its own row.
• Long product titles. The product page and the quick view always show the full title. Elsewhere (cards, cart lines, cart recommendations, related products, search suggestions, buying bars and the breadcrumb) a long title is shortened to one or two lines ending in “…”. The full title stays available to screen readers and as a tooltip on hover.
• Gauge's loupe and zoom never enlarge past the image's real resolution, so upload large images (for example 2000 px or more).

5.4 Product page: other sections

• Related products: Heading, Recommendation purpose (Related products or Complementary products, which you set up in the Search & Discovery app) and Products to show (2–10, default 6). Only on product templates.
• Related products, loading. The default heading is “Related products” or “Complete your selection”.
• Automatic loading. In every style the section loads by itself before the shopper reaches it and disappears when there is nothing to show; while it loads, light placeholder cards hold its space so the page does not jump. In browsers without that feature, or without JavaScript, the shopper presses a button to load it. Recently viewed products also holds its space with placeholders while it loads.
• Recently viewed products: Heading. Already in the product template; see Offer optional product history (3.4).

5.5 Collection page

5.6 Blog and articles

• Blog: Show date, Show author, Show store search. 12 articles per page, with tag links.
• Empty blog. A blog without articles shows “No articles have been published yet.”, a short line saying that new guides and notes will appear there, and a link back to the catalog, in each style's own design.
• Article: Show date, Show author. Tags, and comments when comments are enabled on the blog (including moderated comments).
• Each style lays out blog entries differently: Mandrel as dense rows, Joinery as an editorial grid with a large lead article, Crimp as guide cards with an estimated reading time, Gauge as a three-column grid, Quench as full-width photographs with black bands.

5.7 Pages and 404

Page not found: Navigation menu, 404 image. All five styles show it in their own composition, as a decorative photo. When it is empty, Gauge uses the first catalog photo and the other styles show the page without a photo. Contact form: Heading, Text, Show telephone field, Require a message, and up to 8 Custom field blocks (Field label, Notification field name, Input type, Required, Choices). Collection directory, Page, Search results and Cart are described elsewhere in this guide.

5.8 Password page

The Password page section has Heading, Show email signup, Photo and Photo veil (0–80 %, default 40 %, a black layer that keeps the text readable). The photo is used by two styles only: Gauge shows it inside its viewfinder frame and Quench fills the page behind its steel plates. Mandrel, Joinery and Crimp keep their plain page and ignore it. The photo is hidden when the page is printed. The message comes from your store's password page settings. The page always includes the password field for staff. Each style has its own layout: a specification sheet (Mandrel), a wooden tablet (Joinery), numbered job steps (Crimp), a dark viewfinder (Gauge) and a steel plate (Quench).

5.9 Gift card page

The gift card page is not editable in the theme editor. It shows the balance, the code with a copy button, a QR code, the expiry date when there is one, and an Apple Wallet link when Shopify provides one. Each style has its own design (delivery note, wooden tag, job ticket, matte black card, engraved plate).

6. Theme-specific features

6.1 Quick view

Shoppers can open a product in a quick view from its card, without leaving the list. Theme settings › Catalog › Show quick view turns it on (default on); see 2.7 for the card actions that depend on it.

The quick view always shows the full product title and uses the same purchase form as the product page.

6.2 Shopper comparison

Shoppers can pick up to four products and compare them side by side. Turn it on or off in Theme settings › Product data › Let shoppers compare products (on by default).

• Where the button appears. A “Compare” button on product cards in collections and search results, and on the product page. It does not appear on home page cards or on gift cards.
• The tray. Picked products gather in a small tray with a counter (“3 of 4”), a remove button for each, “Clear” and “Compare N”. With one product the tray says “Pick one more to compare”.
• On product pages. The tray is a one-line pill with the count and “Compare N”; its chevron opens the full tray.
• Pill and buy bar. On small screens the pill steps aside while the style's buy bar is showing and comes back when the bar tucks away; it never moves while it has keyboard focus. A fifth product is not added; the shopper is told to remove one first. The selection is kept in the browser and follows the shopper across tabs.
• The table. Shows the image, full title, price, availability, rating when a reviews app provides it, reference, vendor, options, the card specifications and the Specification metafields set in 3.5, and a buy button (“Add”, “Choose options” or “Sold out”).
• Rows and values. Rows that no product fills are left out, and a missing value reads “Not listed”. “Only differences” hides rows where all products agree. Products can be removed from the table directly.
• Each style's design. The button, tray and table follow the style:

• Without JavaScript the button and tray are hidden.
• Shopper comparison or Curated comparison? The Curated comparison section (4.1) is a fixed table that you fill in yourself with up to four products and your own attributes; it works without JavaScript. The shopper comparison is chosen by each shopper and reads product data and metafields automatically.

6.3 Filters

Filters are Shopify's storefront filters. Set them up in the Shopify Search & Discovery app (availability, price, product type, vendor, options, metafields…). Every style sends filters as a normal form, so they also work without JavaScript. Each style shows them in its own way:

When a filter in Search & Discovery shows its values as images, every style shows those images in its filters (Gauge as a small framed thumbnail beside each value).

6.4 Parts finder

Parts finder. Shoppers pick a few values, for example product type and material, and press “Show N results” to open the collection already filtered.

1. Set up list or yes/no filters for the collection in the Search & Discovery app (for example product type, or a metafield such as specs.material).
2. Add the Parts finder section and choose the Collection.
3. In Filters to show, list the filters you want, separated by commas and in order, by label or parameter (for example product_type, specs.material). Leave it empty to use the first list or yes/no filters, without availability. Price ranges are not offered.
4. The finder works as a normal form without JavaScript. With JavaScript, counts update after each choice and values with no results are disabled.

Each style shows the filters its own way, and all of them work without JavaScript:

• Mandrel and Joinery: a dropdown per filter (Mandrel as a reference query bar, Joinery as a cut list with leader lines).
• Crimp: numbered job steps. A filter with up to five short values shows them as chips; longer lists use a dropdown.
• Gauge: each filter is a graduated scale with a pointer and a large reading of the chosen value; arrow keys move the pointer. The scale shows whole graduations only; when more values continue to the side, a fade and an arrow at the edge show it. Filters with more than 40 values use a dropdown.
• Quench: each filter is a row of numbered steel plates edged in the temper-colour sequence; the chosen plate is coloured. Filters with more than 24 values use a dropdown.

Until you choose a collection, or while the collection has no products, the section shows sample fields (“Product type”, “Material”, “Size”) in the style's own form, disabled, the hint “Choices will appear here soon. In the meantime, browse the full catalog.”, and a “Browse the product catalog” button that opens all products, also without JavaScript. The editor also shows a note, and warns when the collection has no list or yes/no filters. It is already placed on each style's home page (2.4); you can add it to other pages too.

6.5 Quick order list

• Quick order list: Heading, Product and Show with every style. It shows a table of all variants of a product with quantities, and is already in the product template. Leave Product empty to use the current product.
• When the quick order list is hidden. On a product page it hides for products with a single variant or with purchase options (selling plans). By default it shows only with the Mandrel, Crimp and Quench styles; turn on Show with every style for Joinery and Gauge. The editor explains why it is hidden.

6.6 Specifications, documents and notes

There are two ways to show specifications.

A. Specification table from metafields (best for a whole catalogue)

1. In Shopify admin, go to Settings › Custom data › Products and add a metafield definition for each specification, for example Drive size with the key specs.drive_size. Choose a type that fits the value (single-line text, number, dimension, weight…). Units stay with the value.
2. Fill in the value on each product. If a value differs by variant, also create a variant metafield with the same key: the variant's value wins.
3. In Theme settings › Product data › Specification metafields, write one line per row: Drive size | specs.drive_size. The label before the bar is optional.
4. Every product page that has a value shows the row. Rows without a value are skipped.
5. A metafield that holds a list of metaobjects prints one row per entry, using the entry's label (or name), value and optional unit fields.

The labels you type in the theme setting are in one language; the metafield values can be translated.

B. Data blocks (for one product, exact variants or every product)

1. Add the block to the Product details section.
2. In Applies to product, choose a product to limit the block to it, or leave it empty to show the block on every product. An empty block is useful with a dynamic source: connect Published value, including unit to a metafield.
3. Leave Variant scope on All variants, or choose Exact options and copy the option values exactly as they are published (for example 10 mm).
4. Fill in the content.

Each style shows them differently:

• Mandrel: the full-width sheet with the index “Specs · Documents · Notes”. Specs also show the variant weight and barcode when they exist; metafield rows join the table.
• Joinery: specifications become the “Cut list”; use and care go into accordions.
• Gauge: specifications and documents in two columns.
• Quench: specifications in large blocks.
• Crimp: metafield rows appear as a “Job sheet”; your other blocks follow as numbered steps.

Metafield rows use the same layout as the blocks in each style.

Cards. Up to two metafield values, the rating and the stock state can also appear on product cards (section 3.5). For filters by specification, add the same metafields as filters in the Search & Discovery app.

6.7 Free shipping, discount codes and cart recommendations

Free-shipping meter

1. In Theme settings › Cart › Free-shipping threshold, type the amount in your store currency, for example 75. Use the same amount as your free-shipping rate in Settings › Shipping and delivery: the theme does not read your shipping rates.
2. The cart panel and the cart page show how much is left (“Add … more for free shipping”) and then “Your order reaches free shipping”. The meter compares the cart total, after discounts, with your amount.
3. Other currencies: when a shopper pays in a currency other than your store currency, the meter is hidden. The theme has no exchange rate, so it never shows a converted amount.
4. Leave the setting empty to hide the meter. It also stays hidden when the cart is empty.

Each style draws the meter its own way: a reference rule (Mandrel), a step to “Free delivery” (Joinery), a kit gauge with ten cells (Crimp), a reading scale (Gauge) and a temper bar (Quench). Screen readers hear the change after each cart update. It works without JavaScript.

Discount codes

• With Show discount code field on, the cart panel and the cart page have a code field with “Apply”. Applied codes are listed, each with a remove button.
• Codes are applied by Shopify in the cart, so the shopper can still change them at checkout. If a code cannot be used, the cart says so.
• In Mandrel, the line “Discount codes are applied at checkout.” appears only when the field is off.
• The field is folded behind its label in Joinery (step 2, “Have a discount code?”), in Crimp's kit sheet and in Gauge.

Recommendations in the cart panel

• With Show recommendations in the cart panel on, the panel shows up to three products that go with the last item added: complementary products from the Search & Discovery app, or related products when none are set. Products already in the cart, sold-out products and gift cards are left out, and nothing shows when none qualify.
• A single-variant product gets “Add”; a product with options gets “Choose”, which opens its product page.
• This needs JavaScript. The heading follows the style: “Fits with this reference” (Mandrel), “Pairs well with” (Joinery), “Complete the kit” (Crimp), “Measured alongside” (Gauge), “Next operation” (Quench).

6.8 Setting up Crimp's jobs

1. Create a collection for each job, for example “Cut”, “Strip”, “Install”, “Test”.
2. In your menu, make one top-level link (for example “Shop”) and add the job collections under it as sub-links. Put it before any other link that has sub-links.
3. In Theme settings › Catalog › Crimp jobs menu, choose that menu (default main-menu). The header, the full-screen menu, cards, collections, search, the footer, the empty cart and the product page read the jobs from it.
4. The header lists the other top-level links of Header › Navigation menu in “Tools” (when the jobs are the sub-links of one link, or come from a different menu).
5. The first four jobs appear in the bottom bar on phones; up to six appear in the job switcher and chips.
6. A product shows the first job (in menu order) whose collection contains it. Products in no job collection are grouped under “Other”.
7. On the product page (“Used for”), Product details › Family menu takes priority when it is set; leave it empty to use the Crimp jobs menu.

6.9 Accessibility and motion

Mandrel has not been audited or certified against WCAG or any other standard. What the code does:

Keyboard and focus

• A “Skip to content” link is the first element on every page.
• Controls are native links, buttons, fields, disclosures and dialogs, with a visible focus outline.
• Menus, search panels, quick views and cart panels can be opened and closed with the keyboard; Escape closes dialogs.
• Mandrel: “/” jumps to the search field; menu drawers can be navigated with arrow keys. Crimp: Ctrl K / ⌘K opens the palette. Gauge: arrow keys move between menu tabs. Quench: the product gallery strip scrolls with the arrow keys.
• Touch targets for the main controls are at least 44 px.

Works without JavaScript

• Purchasing, cart updates (including quantity 0 to remove a line), filters, sorting, search and pagination use normal forms and links.
• Without JavaScript, menus become simple disclosures or links, search goes to the search page, the cart button goes to the cart page, and Gauge lists every product media in order.

Announcements

• Add-to-cart, cart updates, errors and copy confirmations are announced to screen readers, and so are the free-shipping meter and discount code results.
• In the shopper comparison, the Compare buttons report whether they are on, additions and removals are announced, the table has a caption and row and column headers, the page scrolls so the tray never hides the focused element, and Escape closes the table and returns focus to “Compare N”.
• Ratings are read as a sentence (“Rated 4.6 out of 5. 38 reviews”); stock states always have a word, never only a colour.

Motion

• Animations move elements only with position, scale, fade and clip effects. Some hover and focus states also fade colours, borders or shadows.
• When the visitor's device asks for reduced motion, animations are removed or made instant, lists appear at once, and slideshows never advance automatically.
• Theme settings › Motion › Enable preset motion turns animations off for everyone.
• Slideshows and the editorial gallery do not advance automatically unless you turn that on; they pause on hover and focus.

What you need to do

• Add alt text to all product and section images.
• Check colour contrast after editing schemes, in light and dark mode.
• Give the slideshow a name in Slideshow name for screen readers.

6.10 Performance notes

No performance scores are published for Mandrel. How the theme loads:

• Each style's own stylesheets load only when that style is active.
• Many style scripts load only when the shopper is about to use a feature.
• In Mandrel, a small starter script loads on every page (alongside the theme's shared script); search, the family menus, the cart panel, the quick view and reference copying load when the shopper points at, focuses or touches them. Product, collection, search and cart pages load their own Mandrel script straight away.
• Images are responsive. Images further down the page load lazily. The first product images of a collection, the main product image and the first slide load first, with high priority.
• The second (hover) image of a card is not downloaded on touch screens, where it would never show.
• Some stylesheets that are not needed for the first screen load after the page appears.
• The Parts finder, the cart extras (meter, discount field, recommendations) and the quick order list load their scripts only where they are used. The shopper comparison loads its script on the first interaction with a Compare button (or at once when a selection is saved), and the table script only when the shopper opens the table.
• Videos, 3D models, the zoom view, search suggestions and recommendations load only when needed. Recommendations and recently viewed products reserve their space with light placeholders, so content below them does not move.
• The heading font, and the body font when it is different, are preloaded. Fonts swap in when they arrive, with size-matched fallbacks for the default heading and body families.

Good habits:

• Compress photos before uploading and avoid text inside images.
• Use a Mobile image for slides when the desktop image is very wide.
• Remove sections you do not use and review installed apps.
• Measure your own store with your content (for example with Lighthouse in Chrome).

7. FAQ and troubleshooting

Why doesn't the reference appear on my product? The reference is the variant's SKU. Add a SKU to the variant in Shopify admin.

I added a specification block but nothing shows. Check that Applies to product is empty (every product) or names this product. With Exact options, the option values must match the published values exactly. A block connected to a metafield shows nothing on products where that metafield is empty.

Can I use Crimp without the jobs? Yes. If no menu link has sub-links, the top-level links act as jobs. Products in no job collection go under “Other”.

The header in Gauge is transparent and I don't want it. Turn off Header › Transparent over first slideshow, or move another section above the slideshow.

The cart doesn't open after adding in Mandrel, Crimp or Quench. That is by design: these styles confirm the add in place, and Crimp also updates the kit counter. With Use cart panel on, the cart link (and Mandrel's “View cart”) opens the panel at every screen width. Joinery and Gauge open the panel after each add.

Which name does each style have in Theme identity? The list shows the public names: Mandrel, Joinery, Crimp, Gauge and Quench (see 2.3).

Can I add an Email signup section to the footer? No. Use Footer › Show newsletter form instead (see 4).

Where do I set up filters? In the Shopify Search & Discovery app (6.3).

Does the theme show reviews or ratings? Not by itself. A reviews app collects them; the theme shows the stars the app publishes in the reviews.rating metafields on cards (Show product rating), and you can add the app's block on the product page.

Can I sell gift wrapping? Yes. Create a product for it and choose it in Cart › Gift wrapping product. It appears on the cart page.

My home page looks empty or shows drawings instead of photos. That is the state before you add content. Each style keeps all its home sections and shows its own placeholders, sample rows and sample fields until you choose images, products and collections in the editor (section 2.4).

Why doesn't the free-shipping meter show? Check that Free-shipping threshold has an amount, that the cart is not empty and that the shopper pays in your store currency. The meter is hidden in other currencies.

How do I show specifications on every product? Create product metafields and list them in Theme settings › Product data › Specification metafields (section 6.6).

Does the barcode scanner work on every device? No. Camera scanning needs browser support. Shoppers can always type the reference instead.

8. Support

We reply within 24 hours. Support is provided for as long as the theme is on sale.

• How to get help: use the support page linked in the theme's information (Theme settings › Theme information). The documentation is linked there too.
• What to ask about: the settings, sections, templates and features described in this guide.
• Not covered by this guide: changes to the theme's code, and third-party apps.
• Before you change code, duplicate the theme so you can go back.
• Author: Lizardassets. Version: 1.1.0.

9. Changelog

1.1.0

First version prepared for the Shopify Theme Store. Not yet submitted to Shopify and not yet tested in a real Shopify store (NOT_RUN). Developed and checked locally. What it includes:

• Five styles (Mandrel, Joinery, Crimp, Gauge, Quench), each with its own header, menus, cards, collection, product page, quick view, cart, search, 404, password and gift card pages, and each installing its own home page, product page and workshop page.
• Colour schemes with a dark mode, and Shopify font pickers.
• Product data from metafields: specification tables, card specifications, ratings from review apps and stock states.
• Parts finder, shopper comparison, quick order list, order workbench and purchase tools.
• Cart extras: free-shipping meter, discount codes, recommendations in the cart panel and accelerated checkout buttons.
• Trade blocks “Request a quote” and “Where to buy”.
• Placeholders in each style's design for a store without content yet.
• Keyboard, reduced-motion and no-JavaScript support, and on-demand loading of scripts.
• English, Spanish, French, Italian and German.