---
title: Product Gallery
slug: product-gallery
docTags: 
createdAt: 2024-05-15T13:57:57.970Z
---

## Overview

This pre-made block can pull up items from the Hyper Portal located in CMS, for example, vehicles:

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/dlwdvbSzUr7m5Vx4mRBc7_image.png" size="44" width="347" height="43" position="center" caption="Product Gallery block" alt="Product Gallery block" showCaption="true"}

## Sample Product Gallery block

![Product Gallery - Preview](https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/Av48L8ZcKJgbS-ju4R9bS_product-gallery.jpg "Product Gallery - Preview")

## Text

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/IuZuFlKl01IRy7EVRE61z_image.png" size="44" width="348" height="423" position="center" caption="Product Gallery - Text settings" alt="Product Gallery - Text settings" showCaption="true"}

### Top Text

Large title visible at the top of the block

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/tFUOSnl7Lm3wpoJTiDJIU_image.png" size="44" width="341" height="85" position="center" caption="Product Gallery - Top Text settings" alt="Product Gallery - Top Text settings" showCaption="true"}

### Top Text Align

Align Top Text to the left or center

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/hceTJ-NTdu_liEUJFAYvg_image.png" size="44" width="350" height="167" position="center" caption="Product Gallery - Top Text align settings" alt="Product Gallery - Top Text align settings" showCaption="true"}

### Product Label

Select which Product label you want to showcase

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/1XV_HIbWd63hmOQLXcFty_image.png" size="44" width="349" height="73" position="center" caption="Product Gallery - Product label" alt="Product Gallery - Product label" showCaption="true"}

### All Categories Label

Select which Categorie label you want to showcase

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/ou7wM7Ltaf36t779VNXCI_image.png" size="44" width="343" height="81" position="center" caption="Product Gallery - Category label" alt="Product Gallery - Category label" showCaption="true"}

## Buttons

Add **button Text **and select **internal** or **external** link by clicking on the "**Globe**" icon.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/ob8NR2FqLjdp1faTN23tw_image.png" size="44" width="350" height="324" position="center" caption="Product Gallery - buttons" alt="Product Gallery - buttons" showCaption="true"}

## General

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/mPXjsbYjn6hEnrvUJhp9m_image.png" size="50" width="348" height="509" position="center" showCaption="false"}

1. **Hide aggregation tab**s : This will hide the aggregation tabs
2. **Hide carousel buttons** : This will hide the carousel buttons
3. **Contain image** : Enclose image
4. **Accent background color** : Set the background color
5. **Text color** : Pick the text color

## Settings

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/UJ2sWERMAqGIBhzTwgFRi_image.png" size="44" width="345" height="452" position="center" caption="Product Gallery - Settings" alt="Product Gallery - Settings" showCaption="true"}

1. **Card url external prefix** : Add url
2. **HyperPortal tenantid** : Add tenantID
3. **HyperPortal definitionid** : Add definition
4. **API key** : Add API key
5. **Fall back HyperPortal query** : Add fallback url

### Location settings

Click "+ Add" button to add more locations.

::Image[]{src="https://api.archbee.com/api/optimize/5goaGPkGyPYxtK7K75CEC/1x7pnKVIv5N0h1QpckwoA_image.png" size="50" width="330" height="339" position="center" showCaption="false"}

1. Perma Code : Add retailer perma code
2. Location HyperPortal query : Add url
3. Button url : Add external or internal url