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

# Quickstart

> Create your first box product in 5 minutes.

This guide walks you through creating a box product, configuring it, and seeing it live on your store.

## Before You Start

Make sure you have:

* BoxBuilder installed and activated ([Installation guide](/plugins/boxbuilder/installation))
* WooCommerce installed with at least a few products in your store
* Products with prices and images set up

## Create Your First Box

<Steps>
  <Step title="Create a new WooCommerce product">
    Go to **Products → Add New** in your WordPress admin. Give your product a name (e.g., "Build Your Own Gift Box"), set a price, and add a featured image.

    <Tip>
      For **fixed pricing**, the product price is the box price regardless of items selected. For **per-item pricing**, set the product price to 0 — the total will be calculated from the items the customer picks.
    </Tip>
  </Step>

  <Step title="Enable BoxBuilder">
    In the **Product Data** panel, click the **BoxBuilder** tab. Check the **Enable BoxBuilder** checkbox.
  </Step>

  <Step title="Set the capacity">
    Choose your capacity type:

    * **Fixed**: Exact number of items (e.g., 12)
    * **Range**: Minimum and maximum (e.g., 6 to 12 items)

    Toggle **Allow partial boxes** if customers can check out without filling the box completely.
  </Step>

  <Step title="Choose a pricing model">
    * **Fixed Price**: The product price applies regardless of which items are selected
    * **Per-Item**: Price is the sum of all selected items
  </Step>

  <Step title="Select available products">
    Choose which products customers can add to this box:

    * **All Products**: Every published product in your store
    * **By Category**: Products from specific categories (e.g., "Chocolates", "Sweets")
    * **Specific Products**: Hand-pick individual products
  </Step>

  <Step title="Choose a layout">
    Select **Grid** or **List** for the product picker display. Set the number of products per page (default: 12).
  </Step>

  <Step title="Publish">
    Click **Publish**. Your box product is now live.
  </Step>
</Steps>

## View Your Box

Visit the product page on your store's frontend. You'll see the BoxBuilder interface with:

* A **product grid** showing available items with images, names, and prices
* An **Add to Box** button on each product card
* A **box summary panel** showing selected items and the running total
* A **progress counter** showing how many items have been added (e.g., "3 of 12")
* An **Add to Cart** button that becomes active once the box meets the minimum capacity

## Test the Full Flow

<Steps>
  <Step title="Add items to the box">
    Click **Add to Box** on several products. Watch the summary panel update with each item, and the progress counter increment.
  </Step>

  <Step title="Fill the box">
    Keep adding items until you reach the capacity. The progress indicator will show the box is complete.
  </Step>

  <Step title="Add a gift message (optional)">
    If gift messages are enabled in settings, type a message in the gift message field.
  </Step>

  <Step title="Add to cart">
    Click **Add to Cart**. You'll be taken to the cart page (or stay on the page, depending on your settings).
  </Step>

  <Step title="Check the cart">
    In the cart, you'll see your box as a single line item. The box contents are shown beneath it.
  </Step>

  <Step title="Complete checkout">
    Proceed through checkout. After placing the order, check:

    * The order confirmation page shows box contents
    * The order confirmation email includes box contents
    * The admin order screen (**WooCommerce → Orders**) shows the box with all items
  </Step>
</Steps>

<Check>
  You've created and tested your first box product. Next, explore [pricing models](/plugins/boxbuilder/pricing-models), [display settings](/plugins/boxbuilder/layouts), or the full [settings reference](/plugins/boxbuilder/settings).
</Check>

## Next Steps

<CardGroup cols={2}>
  <Card title="Pricing Models" icon="dollar-sign" href="/plugins/boxbuilder/pricing-models">
    Fixed price, per-item, or hybrid pricing.
  </Card>

  <Card title="Layouts & Display" icon="grid-2" href="/plugins/boxbuilder/layouts">
    Grid, list, summary panel, and mobile options.
  </Card>

  <Card title="Settings" icon="gear" href="/plugins/boxbuilder/settings">
    Full reference of all 6 settings tabs.
  </Card>

  <Card title="Gift Messages" icon="message" href="/plugins/boxbuilder/gift-messages">
    Enable and customize gift messages.
  </Card>
</CardGroup>