Build your install

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

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.