> For the complete documentation index, see [llms.txt](https://easify.gitbook.io/easify-box-bundle-builder-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://easify.gitbook.io/easify-box-bundle-builder-docs/user-guide/visual-editor/create-a-new-box/create-a-box-from-scratch-without-a-template.md).

# Create a Box from Scratch (Without a Template)

If you don’t find any ready-made template in the app that fits your needs, or you want to design something unique for your store, then creating a new box from scratch is the way to go.

{% stepper %}
{% step %}

### A. Select Box Type

You’ll see 4 types of box setups. Each works differently and supports different discount methods.

* *Regular Box* 
* *Fixed Box Price*
* *Tiered Quantity Discounts*
* *Predefined Box Sizes*

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-35-1024x732.png" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Click the **tooltip icon (question mark)** next to each box type name to open a popup with detailed explanations and examples before selecting.
{% endhint %}

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-36-1024x743.png" alt=""><figcaption></figcaption></figure>

After selecting your box type, the app will display all available templates for it.\
Since you’re building from scratch, select **Start from scratch**.

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-37-1024x453.png" alt=""><figcaption></figcaption></figure>

Click **Start building** to open the Visual Editor and begin customizing your box page.
{% endstep %}

{% step %}

### B. Customize Your Box Page

Depending on your screen size, you’ll see either:

* **Single-column mode** (0n small screens): Click an element or section to edit → then click **Back** to return to the page structure tree.

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-38-1024x540.png" alt="" width="563"><figcaption></figcaption></figure>

* **Dual-column mode** (on large screens): Page structure on the left, settings panel on the right.

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-40-1024x540.png" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="info" %}
**Notes:**

If your box has multiple steps, creating the **first step** is important because it can serve as the base structure and style for other steps (you can duplicate it to create more steps quickly).

If your box has only one step, you can ignore the “step” concept and simply build your page.
{% endhint %}

**Step/Page Structure**

Each step/page will include 2 tabs:

* ***Layout***: Lists all sections and elements in your page structure. You can move, rename, duplicate, hide, or reorder them.

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-44.png" alt="" height="160" width="294"><figcaption></figcaption></figure>

* ***Settings***: Includes step-specific settings:
  * **Step name** (used internally in the Visual Editor navigation, and shown in the Step Bar to customers if you use a multi-page layout)
  * **Required Selections** – Set how many products (quantity) or what total value (amount) customers must reach in this step before continuing.

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-43-1024x250.png" alt=""><figcaption></figcaption></figure>

**Example:**\
In a gift box selection step, if you want customers to select exactly 1 product to proceed, set the condition to **Quantity = 1**.

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-45-1024x357.png" alt=""><figcaption></figcaption></figure>

**Add Sections & Elements**

Start adding content to your page by clicking **Add section** — either from the page layout tree or directly in the preview.

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-46-1024x370.png" alt=""><figcaption></figcaption></figure>

You’ll see:

* **Sections** – Groups of elements (e.g., Banners, Products, Custom Fields)
* **Elements** – Individual items (e.g., Heading, Text, Image)

Hover over an item to see a preview on the right, then click to add it to your page.

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-47-1024x601.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-48-1024x601.png" alt=""><figcaption></figcaption></figure>

You can add all your sections/elements first to create an overall layout, then edit each one later.

**Example of common sections:**

* Split Banner
* Product List: Grid

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-49-1024x539.png" alt=""><figcaption></figcaption></figure>

**1. Editing Banner – Heading, Text, Image**

A banner section usually contains a heading, text, and an image.

Click on the each element to change the default content.

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-50-1024x298.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-51-1024x548.png" alt=""><figcaption></figcaption></figure>

**Heading & Text styling options:**

* ***Preset Headings & Paragraph***: Change from the default preset (e.g., Heading 1) to another (e.g., Heading 2–6 or Paragraph). Each preset uses the default styles set in **Theme Settings**. To adjust these styles globally, go to **Theme Settings**.

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-11.png" alt="" height="350" width="296"><figcaption></figcaption></figure>

* ***Custom***: Choose “Custom” in the Preset field to unlock all styling settings. Changes will apply only to this element — not globally.

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-12.png" alt="" height="400" width="293"><figcaption></figcaption></figure>

* To change design properties such as width, height, padding, margin, background, border, etc., open the **Styling** tab.

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-52-1024x813.png" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Note:**

If Heading and Text are grouped together (e.g., in a “Text Group” under a “Split Banner” group), you may need to adjust both the group’s styling and the individual element’s styling, since group settings can override element settings.
{% endhint %}

**2. Add Products**

The added Product list section contains dummy products to help you visualize the layout. You’ll need to add your actual products.

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-53-1024x373.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-16-1024x405.png" alt=""><figcaption></figcaption></figure>

To add your products:

* Click the **product list** section (in the layout tree or preview)
* In the **General tab**, choose your **Source type**:

In the **General** tab, choose a **Source type**:

* ***Specific Products:*** Select individual products. Supports **Search** and **Sort**. (No Filter)

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-17-1024x460.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-18-1024x460.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-58-1024x542.png" alt=""><figcaption></figcaption></figure>

* ***Collections:*** Add one or more collections. Supports **Sort** *(only if one collection selected)* and **Filter**. (No Search)
* ***All Products:*** Displays all products in your store. Supports **Search** and **Sort**. (No Filter)

**3.Add Custom fields (Optional)**

If your products require personalization, custom fields let you collect extra information from customers.

**Example:** For a greeting card, add text fields so customers can enter their message.

The app offers **12 field types**:

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-54-1024x604.png" alt=""><figcaption></figcaption></figure>

* Text Box
* Text Area
* Number Box
* Dropdown
* Radio Button
* Button
* File Upload
* Date Picker
* Time Picker
* Switch
* Checkbox
* Image Swatch

Once done editing individual options, click on the entire **Custom Field section**, go to the **Styling** tab, and adjust the section’s size, padding, border, and more.

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-22.png" alt="" height="384" width="293"><figcaption></figcaption></figure>

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-24-468x1024.png" alt="" height="512" width="234"><figcaption></figcaption></figure>

**4. Create More Steps (If Needed)**

You can add new steps by:

* Clicking **Add step** in the step navigation

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-55-1024x117.png" alt=""><figcaption></figcaption></figure>

* Clicking **Add step** in the Box Content (page layout tree)

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-56-1024x255.png" alt=""><figcaption></figcaption></figure>

* Duplicating an existing step and editing it
  {% endstep %}

{% step %}

### **C. Update Global Styles in Theme Settings**

Click **Theme Settings** in the Visual Editor’s top menu to adjust overall design:

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-25.png" alt="" height="498" width="380"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### **D. Set Up Discounts (Optional)**

{% hint style="info" %}
Discount settings vary depending on your selected box type.
{% endhint %}

To configure:

* Go to the **Discounts** tab
* Change **Status** to Enabled
* Click **Edit Rules** to open the discount setup popup

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-26.png" alt="" height="498" width="379"><figcaption></figcaption></figure>

* Set up your discount logic as needed

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-29-1024x445.png" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### **E. Update Box Information**

Go to the **General tab** and fill in:

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-30-700x1024.png" alt="" height="512" width="350"><figcaption></figcaption></figure>

* ***Box name:*** Visible on Box Review Page, Cart, Checkout, and also used as the name of the auto-generated product linked to this box.
* ***Status:*** Set it to **Enabled** (default is Disabled) to publish your box.
* ***Page URL:*** Enter a unique handle (e.g., `build-your-own-box`), like any other store page URL.
* ***Box image:*** Upload a **square image**. This will be shown on Box Review Page, Cart, Checkout, and also used as the featured image of the linked product. Non-square images will be automatically cropped.

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-31-1024x499.png" alt="" width="563"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### **F. Check the Box Design on Different Devices**

In the top-right corner of the Visual Editor, you’ll see the **view mode switcher**: Fullscreen, Desktop, Table, and Mobile.

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-32-1024x82.png" alt=""><figcaption></figcaption></figure>

Use this to preview how your box page looks on each device and make improvements as needed.

{% hint style="info" %}
Each element or section has a **Visibility** setting in the **General** tab.\
You can choose to **show or hide** that element on specific devices.\
This is useful when you want to hide certain elements on mobile for a better experience.
{% endhint %}

<figure><img src="https://easifyapps.com/wp-content/uploads/2025/08/image-33-469x1024.png" alt="" height="512" width="235"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### **G. Publish the Box Page**

When everything is set:

1. In the **General tab**, change **Status** from Disabled → Enabled
2. Click **Save**

You’ll now see a **“View Live”** button (disabled by default, enabled after you enable and save the box).

Clicking it will open your live box page on your storefront for final review.
{% endstep %}
{% endstepper %}

## Need Assistance? <a href="#id-9-toc-title" id="id-9-toc-title"></a>

We’re here to help—24/7!\
Just click the live chat in the bottom-left corner of the app to get support at any time.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://easify.gitbook.io/easify-box-bundle-builder-docs/user-guide/visual-editor/create-a-new-box/create-a-box-from-scratch-without-a-template.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.