# Build your install

Chapter 9 of the Tress user guide.

A full install is usually three or four bundles of one texture in a few lengths, plus a closure or frontal, and shoppers often get the mix wrong one product page at a time. **Build your install** puts the whole thing on one panel: the shopper picks a texture, chooses two to four bundle lengths and adds a closure or frontal, sees the total price and weight as they go, and adds the lot to the bag in one tap. In the bag the pieces stay together as one install, and your order shows which pieces belong together.

It is a type of the **Bundles and installs** section. In the theme editor, click **Add section** and choose **Build your install** (or set an existing Bundles and installs section's **Type** to **Build your install**). The Tress preset has one on the home page, under Best sellers.

## What shoppers see

The section is a band (Surface by default, with strand waves top and bottom). On the left: the eyebrow ("Build your install"), heading ("Your install, in one tap") and body, and the **stage**: a tall capsule where each chosen bundle hangs as a strip of the chosen texture's photo from a weft bar, its height in proportion to its length and the length under its tip. Beside the stage: the total weight ("345 g") and a summary ("3 bundles and a 4×4 closure" / "Body wave · 18, 20 and 22 in").

On the right, the **tray**, in three numbered steps:

1. **Pick your texture**: one chip per product in your **Bundles** collection (the first 8), labelled with the product's `custom.texture` (else its title) and pictured from **Texture images** or the drawn texture, else the product's photo.
2. **Choose 2 to 4 bundles** (the numbers follow **Fewest bundles** and **Most bundles**; "3 of 4 chosen" on the right): one row per length of the chosen product, in your variant order, with the length in inches and cm, its price and a stepper. Rows with a quantity fill with the accent wash. Sold-out lengths are struck through with their stepper off. If the bundle has options besides Length (a colour, say), small selects above the rows apply to every bundle. Under the rows sits your **Hint under the lengths** ("Most full installs use 3 bundles and a closure.").
3. **Add a closure or frontal** ("Optional"): a **No closure** tile and one tile per product in your **Closures and frontals** collection (the first 4), each with its name and "+ $159.00" (or "from $219.00" when its variants are priced differently). The chosen tile shows a small select for its variant, such as "16 in · HD lace". If the closure has an option named in **Texture option names**, Tress pre-selects the value matching the chosen texture.

Under the steps, the **summary**: the install's label ("Body wave · 18/20/22 + 4×4 closure": the texture, each bundle's length from shortest to longest, and the closure's `custom.short_name` or title), "4 pieces · Total weight 345 g", your **Deal line**, "Install total, before the discount" with the total, and the **Add install to bag** button.

The **deal line** shows in an accent pill with a check when the install meets it (at least **Bundles for the deal** bundles and, with **Deal needs a closure or frontal** on, a closure or frontal), and in quiet text with a sparkle icon until then, so it reads as a nudge.

## How it behaves

* **Changing texture** keeps the chosen lengths the new texture sells and drops the rest, saying so in one sentence: "22 in isn't available in Kinky curly, so it was removed from your install.", or "20 in and 22 in aren't available in Kinky curly, so they were removed from your install."
* **At the maximum**, the "+" buttons stop and the counter reads "4 of 4 chosen: that's the most for one install".
* **Below the minimum**, pressing the button shows "Choose at least 2 bundles to add your install" and moves focus to the first stepper.
* **The total weight** is the sum of each piece's `custom.weight_grams` (the variant's, else the product's) times its quantity. If any piece has no weight, the weight is left out rather than shown wrong.
* **Every change is read out** to screen reader users ("18 in added. 3 of 4 bundles.", "Install total $666.00."), and everything works with a keyboard: Tab through the chips, steppers, tiles, selects and the button. Nothing depends on hover or dragging.
* **A bundle with no Length option** (a single bundle product) shows as one row, "Bundle", so the builder still works.
* **With no Closures and frontals collection**, step 3 is left out.

## Adding to the bag

**Add install to bag** adds every bundle line and the closure in one go and opens the bag on them: "Install added to your bag: 4 pieces". Each line carries the line item property **Install** with the install's label ("Body wave · 18/20/22 + 4×4 closure"), which shows in the bag, at checkout and on the order in admin, so you can pack the pieces together. Two hidden properties, `_install` (the install's own id) and `_install_count` (its number of pieces), keep the lines grouped; shoppers never see them. If Shopify can't add everything (a length sold out a moment ago), its message shows in the tray and the bag shows what was actually added. Chapter 12 shows how the bag groups an install.

## Section settings

| Setting | Default | What it does |
| --- | --- | --- |
| Type | Prebuilt kits | **Prebuilt kits** shows Kit blocks. **Build your install** lets shoppers pick a texture, bundle lengths and a closure, and adds them to the bag together. The **Build your install** preset sets it for you. |
| Eyebrow | "Build your install" | |
| Heading | "Your install, in one tap" | |
| Body | "Pick a texture, choose two to four bundle lengths and add a closure or frontal. It goes in your bag together, and we pack it together." | Rewrite the last sentence if you don't pack installs together. |
| Bundles | Empty | One product per texture, each with a Length option. The first 8 are shown. |
| Closures and frontals | Empty | Optional. The first 4 are shown. |
| Fewest bundles | 2 (1 to 4) | Below this, the button explains instead of adding |
| Most bundles | 4 (2 to 6) | The most bundles in one install |
| Hint under the lengths | "Most full installs use 3 bundles and a closure." | Blank hides it |
| Stage background | Empty | Optional. A satin or studio background behind the bundles. |
| Button label | "Add install to bag" | |
| Deal line | "3 bundles and a closure: 15% off at checkout" | The words only. Create the discount itself in Shopify admin (an automatic discount, chapter 7); the theme only shows this text. |
| Bundles for the deal | 3 (0 to 6) | 0 hides the deal line |
| Deal needs a closure or frontal | On | |
| Color scheme | Surface | Page, Surface or Bold band |
| Wave edges | Top and bottom | |

The section's band carries the page anchor `#install`, so a button or menu link to `/#install` scrolls to it, as the Tress preset's hero button and Bundles menu promo do. Put **Build your install page** (in Theme settings › Hair, lashes and nails) to the same address, so **Edit install** in the bag comes back here. Keep one install builder per page.

## Set it up

1. **One product per texture**, such as "Body wave raw hair bundle", each with a **Length** option (12 in, 14 in, … 30 in) and a price per length. Fill each product's `custom.texture` ("Body wave") and each variant's `custom.weight_grams` (chapter 7).
2. **Closures and frontals** as products of their own, with `custom.short_name` ("4×4 closure", "13×4 frontal") for a short install label. Give them a Texture option named like your bundles' textures if they come in the same textures.
3. **Two collections**: Bundles (only the texture products) and Closures and frontals. Manual collections give you control of the order.
4. **The section**: choose the two collections, check **Fewest bundles**, **Most bundles** and the deal settings, and rewrite the copy.
5. **The discount**: create the automatic discount the deal line describes (chapter 7), and set the same deal line in the **Cart drawer** and **Cart** sections.
6. **Edit install**: set **Build your install page** to `/#install` (or the page where your builder lives).

**In the theme editor**, until you choose a Bundles collection, the section shows a working sample tagged **Sample**: four drawn textures (Straight, Body wave, Deep wave and Kinky curly), lengths 12 to 26 in at $129 rising $10 a step, 100 g each, a sample closure and frontal, and a drawn stage, with the button reading "Choose a bundle collection to sell installs" instead of adding. On your storefront, an install builder with no Bundles collection shows nothing.

## Prebuilt kits

The section's other **Type** sells ready-made sets as one product each: a "Starter install" or "Full install" product you've priced as a set. Each **Kit** block shows a panel with the product's photo, **Tier** ("Starter install"), the product, **Tagline**, **Kit contents** (one item per line, or connect a metafield) and a button (**Button label**, "Add kit to bag") that adds that product. With no Kit blocks, the section shows nothing to shoppers.