> 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/product-list/product-list-grid.md).

# Product List: Grid

{% hint style="info" %}
The **Product List: Grid** is the **foundation of all product list layouts** in Easify Box Builder. Whether you choose Grid, Carousel, Tabs, or Accordion, each layout is powered by the same product list settings.
{% endhint %}

The **Product List: Grid** is the most common way merchants display products in their store. It lays items out in a simple grid format, making it easy for customers to browse, compare, and add products to their cart.

![](/files/0eb33dd7c824261c914005694a965b85cf0da526)

## 1. How to Add a Product List: Grid

{% stepper %}
{% step %}

### Add the section

Click **Add Section** → Choose **Product List: Grid**.

![](/files/65dda629a6ca5217de3b8c378b200a49fc4e3ef6)
{% endstep %}

{% step %}

### Select the product list

Select the product list in your layout.

![](/files/6fc0d5754036229d7d55bee4d1d39f323fa98ffd)

Once added, you can adjust how the list looks and behaves using the settings below.
{% endstep %}
{% endstepper %}

## 2. General Settings

In the **General tab**, you’ll configure the basics:

* **Name**: Give your product list an internal name so you can recognize it later.
* **Layout Type**: Choose between **Grid** layout or **Carousel** layout (Carousel uses the same settings but displays products in a slider format.)
* **Source Type**: Decide what products to show:
  * **Specific Products**: Hand‑pick items.
  * **Collections**: Pull products from a Shopify collection.
  * **All Products**: Display your entire catalog.

![](/files/1f9afae57a1d1f6f04b7d994b2ed755bcf0b6a81)

### Default Selected Products

You can pre‑select certain products in the product list so they’re automatically added to the box from the start. This helps customers build their bundles faster, since some items are already included.

Shoppers still stay in control: they can remove or swap out the defaults anytime.

👉 Learn more in our guide to [Default Selected Products](https://easifyapps.com/docs/default-selected-products/)

![](/files/3dee649ad570defa8c8a7ff88398e65ad052405c)

### Required Selections

**Control purchase requirements before customers can proceed:** You can set rules that determine how many products or what total value customers must reach in their box before moving forward.

**Example:** A *Coffee Office Bundle Box* might require at least 2 coffee beans and 2 coffee pods.

* If customers don’t meet the requirement, they’ll be prompted to add more before continuing.
* Requirements can be based on either:
  * **Quantity** (number of products)
  * **Amount** (total value of products)
* You can define conditions using:
  * *is equal to*
  * *is greater than or equal to*
  * *is less than or equal to*

![](/files/0368f00a933ebe0e63ad3ef25d657c6751acf170)

### Advanced Settings

Using Advanced Settings, you can fine‑tune the shopping experience with extra options:

* **Show Search Bar**: Add a search box so customers can quickly find products within the list. You can position the search bar on the Left or Right.
* **Show Sort**: Let shoppers sort items (for example, by price or name). You can position the sort tool on the Left or Right. By default, sorting follows your store’s filter settings, but you can customize it further using the [**Shopify Search & Discovery**](https://apps.shopify.com/search-and-discovery) **app**.
* [**Display Variants as Individual Products**](/easify-box-bundle-builder-docs/user-guide/visual-editor/product-list/display-variants-as-individual-products.md): Instead of showing one product with multiple variants (like sizes or colors), you can display each variant as its own product. This makes it easier for customers to pick exactly what they want.

![](/files/bee3341dda4c107da24e25e680f89b442b256222)

### Visibility

Choose where the product list appears. This is useful if you want different layouts for different devices:

* Hide on Desktop
* Hide on Tablet
* Hide on Mobile

### Attributes

For advanced users, you can add custom identifiers:

* HTML ID: Assign a unique ID for styling or tracking.
* HTML Class: Add classes for custom CSS styling.

## 3. Styling Settings

Use the **Styling tab** to control how your product list looks on the storefront.

![](/files/8025da8359da9c261b5492f6874c4a64168f0dc0)

You can configure:

* Product list layout: Configure how products are arranged

![](/files/b044951f4f050435e784f0faa46311b2e9aa9e98)

* Product list size: Set the width and height of each product card

![](/files/6456c967d33d52da80184aa012f84885b4c084b0)

* Spacing: Adjust spacing, gaps in product list

![](/files/d965fcc82077adfd00465d1d0142123543841ffe)

* Border: Add or customize border styles, border colors an also border width and border radius.

![](/files/cc4162c3261291dae10658da19e91e16de8df772) ![](/files/5113280c15e7fb89dd56d9124258ffc34fed061d)

* Effects: Apply visual effects like opacity and shadows

![](/files/a01f44357d2d5a4a026949bba27cb12524423e58)

* Custom CSS: Add your own CSS classes for advanced styling control

![](/files/678c34b73b19d702bf2a3efd715d0f886d97d29a)

## 💬 Need Help?

If you run into any issues or have questions, feel free to reach out via our **in-app 24/7 live chat**. We’re always here to help!


---

# 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/product-list/product-list-grid.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.