# Collection banner builder

{% hint style="info" %}
**Add section -> Collection banner builder**
{% endhint %}

{% hint style="warning" %}
**IMPORTANT!** This section required saving changes by pressing the “Save” button in order to view customizations on a collection page.
{% endhint %}

 This content can be added several times and in different content blocks: “Promo box (banner)”, and “Custom HTML”. 

## Banner Builder

 In this section, you can configure the general settings regarding the banner displayed on the collection page. These settings can be applied to each collection. The **“Section type”** allows decide if to display a banner in the product grid or to replace products with sub-collections:

{% tabs %}
{% tab title="Replace products grid" %}
![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2Fs0jV7dcR1LywV4CZBsoH%2Fcollections_replace%20grid.png?alt=media\&token=13a5474b-f7dd-4c2c-bd0c-7f478d215b27)
{% endtab %}

{% tab title="Insert to product grid" %}
![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FIE1ZeA5rBYaKFbn4134O%2Fcollection_product%20grid.png?alt=media\&token=a447ae03-b509-4448-92a0-6bab0297c4dc)
{% endtab %}
{% endtabs %}

### **“**Insert to product grid**”** settings

 These settings will be applied only for version **“Insert to product grid”**. In this block, you can decide if to display banners on different grids of products in a row: 1 in a row, 2 in a row, 3 in a row, 4 in a row, 6 in a row, or list:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FABZ9N4HACDsQzhMJLNyu%2Fcollections_product%20grid.png?alt=media\&token=aa9a7093-0ade-4156-bd41-7ae2015d3479)

### Column Settings

 In the **“Size of the columns”**, you can choose how many items should be displayed in one row by choosing the proper option from the dropdown list. The option **“Size of the columns on mobile”** allows you to set the number of items in the row on mobile: “1 item in the row” or “2 items in the row”. In the dropdown list of **“Margins for the columns”**, you can choose the type of margins for the columns.