> For the complete documentation index, see [llms.txt](https://beloria-docs.boostheme.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://beloria-docs.boostheme.com/dynamic-sections/collection-product/powerful-product-block-2.md).

# Powerful product block 2

Display the tabs of the product list. In each tab, a big product is displayed beside the small products.

![](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MKnVdkC-YCPcuVHsW1O%2F-MKnWXNbKk3wnDOvDMAu%2Fpowerful-product-block2.jpg?alt=media\&token=7820fd54-7c4f-43d7-9c4c-53a1b2f5eed5)

## Open the existing section

1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Powerful product block 2** section.

## Add a powerful product block 2 section to your home page

1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click **Add section** > **Powerful product block 2** > **Add**.
4. Use the settings to customize your **Powerful product block 2** section.
5. Click **Save**.

## Settings

### Background

* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
* **Background image:** pick or upload your image to display it as the background image.
* **Background size:** set the size of the background image.
* **Background style:** set the style of the background image.

### Section gutters

* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.

### General settings

* **Heading:** add the section title.
* **Subheading:** add section subtitle.
* **Use lazy loading image:** turn on/off the loading image by using the lazyload technique. Recommend turning on this setting.
* **Wide display:** turn on/off displaying the section in the wider layout.

## Add/Edit/Remove a tab item

Scroll down to the bottom, you will see an **Add tab item** button, click this button to add a new tab item. Or you can click one of the available tab items to edit/remove it and drag/drop items to rearrange them.

![](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MKnVdkC-YCPcuVHsW1O%2F-MKnWeIJyKWbHye55mEP%2Fpowerful-product-block-2-add-item.jpeg?alt=media\&token=4b3eb67d-6871-4223-a716-cc1b13325e49)

Settings in a tab item:

### 1. General settings:

* **Tab title:** add your text to display it as a tab title. If there is only one tab item, the tab title will not be shown.
* **Layout style:** set the layout to display a big product and small products. There are 3 values for this setting: layout 1, layout 2, and layout 3. Below are examples of each layout style.

![Layout 1 - 1 big product and 4 small products ( from #1 to #4 )](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MKnVdkC-YCPcuVHsW1O%2F-MKnWksSwG9HiV4MNGNy%2Fpowerful-product-block-2-layout-1.jpeg?alt=media\&token=4748ad99-3afa-442c-b32d-19a06d3453f0)

![Layout 2 - 1 big product and 6 small products ( from #1 to #6 )](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MKnVdkC-YCPcuVHsW1O%2F-MKnWqpPkXK4wHNvq_SF%2Fpowerful-product-block-2-layout-2.png?alt=media\&token=69e4ecb7-9f4a-48f8-941c-adcfb4894d89)

![Layout 3 - 1 big product and 8 small products ( from #1 to #8 )](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MKnVdkC-YCPcuVHsW1O%2F-MKnWwJbUno_xYQWWBF_%2Fpowerful-product-block-2-layout-3.jpeg?alt=media\&token=5f94be25-7854-4eba-9aa3-8a026e233f39)

### 2. Big product:

* **Pick a product:** choose a product to display it as a big product.
* **Position:** set the position. Left or right of small products.
* **Other product item settings:** please refer to [this guide](/tips.md#product-item-settings) for more details.

### 3. Small products:

* **8 product pickers:** pick products to display them as small products. Base on the chosen layout style, the number of small products will be shown.

| Layout style | Shown Small products |
| :----------: | :------------------: |
|       1      |     from #1 to #4    |
|       2      |     from #1 to #6    |
|       3      |     from #1 to #8    |

* **Other product item settings:** please refer to[ this guide](/tips.md#product-item-settings) for more details.