> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kwebby.com/llms.txt
> Use this file to discover all available pages before exploring further.

# PC Builder

> The PC Builder page: shoppers pick a part for each slot from your collections, every pick is checked against the rest of the build, and the whole build goes into the cart in one step.

![PC Builder on the storefront](https://mintcdn.com/kwebby/tbWCv70mkhaUy_7w/images/kelvin/pc-builder.webp?fit=max\&auto=format\&n=tbWCv70mkhaUy_7w\&q=85\&s=c5272c7eaf1eefba782d87545e09bc9d)

PC Builder, highlighted with the demo content

![PC Builder in dark mode](https://mintcdn.com/kwebby/tbWCv70mkhaUy_7w/images/kelvin/pc-builder-dark.webp?fit=max\&auto=format\&n=tbWCv70mkhaUy_7w\&q=85\&s=60da543fc80e770648f8fa85bfbcb2b9)

PC Builder in dark mode

![PC Builder on a phone](https://mintcdn.com/kwebby/tbWCv70mkhaUy_7w/images/kelvin/pc-builder-mobile.webp?fit=max\&auto=format\&n=tbWCv70mkhaUy_7w\&q=85\&s=b3be9b104ddc39c1bac29b1e06f22a32)

PC Builder on a phone

## Where to find it

On the PC Builder page template (page.pc-builder). Create a page in Online Store → Pages, set its template to pc-builder, then choose that page in [Theme settings → PC Builder](https://docs.kwebby.com/kelvin/theme-settings/pc-builder.md) → PC Builder page. In the theme editor choose Pages → pc-builder in the page selector, then select PC Builder. The section can be used once per template.

## How it works

* Each Slot block is one row: Processor, Motherboard, Memory, Graphics card, Storage, Case, CPU cooler, Power supply, Case fans, Monitor, and Keyboard, mouse and dock. Shoppers fill them in any order with Choose, Change and the remove button. A second block for the same slot is ignored.
* Choose opens the slot's parts from the side: its collection with a search box, Sort (Compatible first, price, name), a Compatible only switch, a menu for parts with several variants, the price difference to the current part, and the reason any part does not fit.
* Every pick is checked against the rest of the build with the specs metafields of the parts. An Error blocks Add build to cart, a Check asks once before the add, a Note only informs. Each message names the parts and the numbers, and a Fix button offers the part with the smallest price change that clears it. Nothing changes without a click.
* The Build summary shows the status, the required parts chosen (such as 5 of 8 required parts), the power estimate (Estimated load, Recommended and Selected, with What this adds up), the checks, the parts total, sale savings, the optional assembly line, the total, and the Shop Pay line when Theme settings → Product cards → Show the Pay in 4 line is on, Shop Pay is a payment method and the total reaches Pay in 4 minimum price.
* Add build to cart adds every part as its own cart line in one step, with the visible Build property and the hidden \_Build and \_Slot properties, so the cart can group them. It stays disabled, with the reason under it, until every required part is chosen and no error is left.
* Copy link, Save build, Copy as text, Print and Start over sit under the button. The build in progress is saved on the shopper's device after every change and comes back on the next visit. Saved builds lists up to 10 named builds, also kept on the device.
* Preset build blocks show as cards under Start from a build: image, name, note, the processor, graphics card and memory, the total of their current prices and a Start from this build button.
* Below 1000 px the summary moves under the parts and a bar pinned to the bottom of the screen shows the total, the status and Review build. The compare tray is hidden on this page at those widths so it never covers the bar.
* Messages are announced to screen readers, each level has an icon and the word Error, Check or Note (never color alone), and focus returns to the slot after a pick. Without JavaScript the page says the builder needs it and links to your collections.

![PC Builder in the theme editor](https://mintcdn.com/kwebby/QKNMzt7KPy_yk6ai/images/kelvin/editor-pc-builder.webp?fit=max\&auto=format\&n=QKNMzt7KPy_yk6ai\&q=85\&s=0b5e533652a22553b58a10e95a221311)

In the theme editor: 1 the section in the sidebar · 2 its settings · 3 the section in the preview

## Edit it

* Set Parts collection on every Slot block you use. A slot without a collection tells shoppers No parts in this category yet, with a link to your contact page. Delete the Slot blocks for parts you do not sell.
* When one collection holds two kinds of part (coolers and fans in Cooling, for example), type a tag in Only parts with this tag on each of those slots, exactly as it is written on the products.
* Fill Spec columns with specs metafield keys, separated by commas, for the short spec line under each part, for example cores, socket. A product's specs.summary metafield replaces it.
* Offer I already have this is on for the graphics card, storage, case, CPU cooler and power supply; untick it where you only sell complete builds. Most parts in this slot allows more than one part, such as two memory kits or four drives.
* Choose an Assembly product to offer your build service as a checkbox in the summary, described by Assembly description. Select assembly for new builds ticks it in advance.
* Fill Build discount note only to describe an automatic discount you have created in Discounts. Leave it empty to show nothing.
* Add Preset build blocks with a Name, Note, Image and up to 12 Parts each.
* Fill the build specs on your parts: the [PC Builder guide](https://docs.kwebby.com/kelvin/guides/pc-builder.md) lists every metafield the checks read.

## Settings

| Setting | What it does |
| - | - |
| **Color scheme** | Color scheme for this area (edit the schemes in Theme settings → Colors). Default: Scheme 1. |
| **Show breadcrumbs** | On or off. Default: on. |
| **Heading** | Text. Leave empty to use the page title. Default: PC Builder. |
| **Introduction** | Formatted text. |
| **Preset builds heading** | Text. Add Preset build blocks to offer complete builds. Default: Start from a build. |

**Parts lists**

> [!TIP]
>
> Add one Slot block per kind of part and choose its collection. Compatibility checks read product metafields in the specs namespace, such as specs.socket, specs.memory\_type, specs.form\_factor, specs.gpu\_length\_mm and specs.psu\_w. Parts without them can still be chosen, with a note that they were not checked.

| Setting | What it does |
| - | - |
| **Show compatible parts only by default** | On or off. Shoppers can switch it off to see every part with the reason it does not fit. Default: on. |
| **Out of stock parts** | Options: Show as unavailable, Hide. Default: Show as unavailable. |
| **Block parts without build specs** | On or off. When on, a part missing its slot's main spec cannot be chosen: socket for processors and motherboards, memory\_type for memory, gpu\_length\_mm for graphics cards, storage\_kind for storage, form\_factors for cases, socket\_support for coolers and psu\_w for power supplies. Default: off. |

**Power estimate**

| Setting | What it does |
| - | - |
| **Show the power estimate** | On or off. Also turns the power supply size checks on or off. It reads specs.tdp\_w, specs.peak\_power\_w and specs.psu\_w. Default: on. |
| **Power supply headroom** | Slider from 10 to 60 %, in steps of 5. Default: 30 %. |
| **Allowance for everything else** | Slider from 0 to 100 W, in steps of 5. Default: 30 W. |
| **Motherboard allowance** | Slider from 0 to 100 W, in steps of 5. Used when the motherboard has no specs.tdp\_w. Default: 40 W. |

**Assembly and cart**

| Setting | What it does |
| - | - |
| **Assembly product** | Choose a product. A product for your build service fee. Leave empty to sell parts only. |
| **Select assembly for new builds** | On or off. Default: off. |
| **Assembly description** | Text. For example: We build it, update the BIOS and test it for 24 hours. |
| **Build discount note** | Text. Only describe a discount you have created in Discounts, for example: 5% off orders with 5 or more parts, applied at checkout. Leave empty to show nothing. |
| **Ask once before adding a build that has checks** | On or off. Errors always block the add. Default: on. |

**Page sections**

| Setting | What it does |
| - | - |
| **Show saved builds** | On or off. Builds are saved in the shopper's browser only. Default: on. |
| **Show how the checks work** | On or off. Default: on. |

## Blocks

Add a block with **Add block** under the section in the sidebar; drag blocks to reorder them.

### Slot

| Setting | What it does |
| - | - |
| **Slot** | Options: Processor, Motherboard, Memory, Graphics card, Storage, Case, CPU cooler, Power supply, Case fans, Monitor, Keyboard, mouse and dock. Each slot is used once. Links to builds name parts by this slot. Default: Processor. |
| **Parts collection** | Choose a collection. |
| **Only parts with this tag** | Text. Optional. Use it when one collection holds parts for two slots, such as coolers and fans. |
| **Label** | Text. Leave empty for the standard name, such as Processor. |
| **Help text** | Text. Shown while the slot is empty. Leave empty for the standard hint. |
| **Required** | Options: Standard for this slot, Always, Never. Standard: processor, motherboard, memory, storage, case and power supply are required, a graphics card unless the processor has integrated graphics, and a cooler unless one comes with the processor. Default: Standard for this slot. |
| **Offer I already have this** | On or off. Default: off. |
| **Most parts in this slot** | Slider from 1 to 6. Default: 1. |
| **Spec columns** | Text. Metafield keys in the specs namespace, separated by commas, shown in the parts list, for example cores, socket. Use keys from Theme settings, Product cards, Spec rows or the PC Builder keys. |

### Preset build

| Setting | What it does |
| - | - |
| **Name** | Text. Default: Preset build. |
| **Note** | Text. |
| **Image** | Image: upload one or choose from Content → Files. Leave empty to use the first part's photo. |
| **Parts** | Choose products. Each part goes into the slot whose collection contains it. |

> [!NOTE]
>
> On install the 11 Slot blocks have no collections and there are no presets, so every slot is empty until you connect your collections.
>
> Each slot lists up to 500 products of its collection. Parts lists are kept in the shopper's browser tab for 10 minutes, so a new price can take that long to show in the list; the cart always uses Shopify's current price.
>
> Builds stay in the shopper's browser on that device. Nothing is sent to an outside service, and no app is needed.
>
> A preset card's price counts every part at its current price, sold out or not. Sold-out parts are left out when a shopper loads the preset, so keep preset parts in stock.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.