---
title: "15 – 4 or 8 Products"
slug: "15-4-or-8-product"
updated: 2024-08-16T11:10:28Z
published: 2024-08-16T11:10:28Z
---

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

# 15 – 4 or 8 Products

## Description

Product block with up to 4 or 8 products with various editable parameters.

> [!NOTE]
> Notice
> 
> To keep the quality of image responsiveness in smaller devices a minimum width of between 480px / 520px will cover all responsive devices when stacking is on. Images may then look oversized in Edit mode but look okay in Preview mode. Edit the text area before loading the image(s).

## Default block view

**Desktop**

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/24530f0d-4ad9-415b-88dc-787d10feac18.png)

**Mobile**

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/c03481f9-d924-4f06-84b4-fa751dd22eb4.png)

## Formatting options

### Padding

This refers to the space between the block's content and its border. This can be edited in the **Details Tab**.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Padding | Top | 10 |
| Right | 20 |
| Bottom | 10 |
| Left | 20 |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/e92ee947-69d7-4233-a30a-6225ca91dc3f.png)

### Hide/Show 8 Products

It allows you to display or hide eight products.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Hide/Show | 8 Products | Hide |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/2af399c7-aa86-4dab-931c-bf13cc1ed971.png)

### Block Background Color

It allows you to change the block's background color. It takes the hexacode of the color as the value to change the color.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Background Color | Block Background Color | #ffffff |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/210eafba-85ce-4148-8016-eb3274f50498.png)

### Hide/Show

It allows you to display or hide product titles, prices, and CTA.

> Common settings for rest all products.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Hide/Show | Product Title | Hide |
| Price Text |
| CTA |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/488b4d44-113b-4d8e-9de7-1318eef4cbcc.png)

### Font Weight

It allows you to change the font weight used for the "Product Title" and "Price text".

| **Option** | **Details** | **Dropdown** | **Default** |
| --- | --- | --- | --- |
| Font Weight | Product Title | Bold/Normal | Bold |
| Price Text | Bold |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/d9c600f4-21af-4e8f-99ab-6c47ef2fe0c7.png)

### Line Height

It allows you to change the space between the line for "Product Title" and "Price text".

> Please make sure that this value is at least 4px more than the font size used.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| Line Height | Product Title | 18 |
| Price Text | 18 |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/23a9dd13-9926-444b-8d3c-15d249cb6d7f.png)

### CTA

It allows you to format the CTA button according to the requirement. Details are below. It takes the color's hexacode as the value to change the color wherever applicable.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
| CTA | Background Color | #e71825 |
| Text Color | #ffffff |
| Font weight | Bold |
| Border radius | 6 |
| Border width | 1 |
| Border Color | #e71825 |
| Height | 52 |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/6f75cd73-9e5c-4465-882d-34c9604782b4.png)

### Product Image Links

It allows you to add the link to the Product images.

| Option | **Details** | **Default** |
| --- | --- | --- |
| Links | - Product 1 Image Link - Product 2 Image Link - Product 3 Image Link - Product 4 Image Link - Product 5 Image Link - Product 6 Image Link - Product 7 Image Link - Product 8 Image Link | Blank |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/3e20ab3b-3ba0-4f95-9759-292dce2ffe21.png)

### Product CTA Links

It allows you to add the link to the Product CTA.

| **Option** | **Details** | **Default** |
| --- | --- | --- |
|  | - Product 1 CTA Link - Product 2 CTA Link - Product 3 CTA Link - Product 4 CTA Link - Product 5 CTA Link - Product 6 CTA Link - Product 7 CTA Link - Product 8 CTA Link | https://www.example.com |

![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/5db64eb0-e9db-4891-b03f-33f01978bb7d.png)

## Compatibility

Currently, the CTA button curved border does not render in the devices listed below. Instead, the corners will be square.

GMX Chrome Windows 10 GMX Edge Windows 10 GMX Firefox Windows 10 Web.de Chrome Windows 10 Web.de Edge Windows 10 Web.de Firefox Windows 10