> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Blum Address List

**Theme:** Blum · **Section type:** All-template section

The **Address list** section shows your physical stores, each with an image, name, address, description, and a link to Google Maps. Use it to help customers find and visit your stores.

> **Note:** You can add this section to any template, but not to the header or footer. Each section holds up to 6 **Address item** blocks.
![Address list with 4 store cards](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/address-1_104zkdn.png)

**What you can do**
- Add the section and your stores
- Add directions to a store
- Show store details in a side panel
- Choose the layout
- See what customers see
- Look up every setting
- Fix common problems

---

## Add the section and your stores

1. In the theme editor, open the template where you want the section.
2. In the left sidebar, click **Add section** > **Address list**. The section comes with 4 **Address item** blocks.
3. Under **General**, enter a **Section subheading**, a **Section heading**, and a **Section description**. Leave a field empty to hide it.
4. Click an **Address item** block.
5. Under **Image**, select an **Image**. A 720 × 480 px image is recommended.
6. Under **Text**, enter the store name in **Heading**, then the **Address** and a **Description**, for example opening hours.
7. To add more stores, click **Add block** > **Address item**.
8. Click **Save**.

## Add directions to a store

1. Click an **Address item** block.
2. Under **Button**, paste the store's **Google Maps link**.
3. Enter the button **Label**, for example "Get direction".
4. Click **Save**.

> **Note:** The directions button shows only when **Google Maps link** is filled in. It opens Google Maps in a new tab.

> **Tip:** To get the link, search for your store in Google Maps, click **Share**, and copy the link.

## Show store details in a side panel

1. Click the **Address list** section.
2. Under **Address items**, check **Show address description in popup**.
3. Click **Save**.

With this setting on, each store card shows only the image, name, and address, plus a **View details** link. The description and the directions button move to a side panel that opens when customers click **View details**. With this setting off, the description and the directions link show on the card.

## Choose the layout

1. Click the **Address list** section.
2. Under **Layout**, select a **Content alignment**: **Left**, **Center**, or **Diagonal**.
3. Select **Items per row on desktop**: 3, 4, 5, or 6. This setting doesn't apply to **Diagonal**.
4. Under **Address items**, select an **Image ratio**.
5. Optional: check **Enable carousel on mobile** and **Show navigation on mobile**.
6. Optional: under **Button**, enter a **Label** and a **Link** to add a button to the section, for example to a store locator page.
7. Click **Save**.

## What customers see

- **Store cards:** each card shows the image, store name, and address.
- **View details:** with **Show address description in popup**, customers click **View details** to open a side panel with the image, address, description, and the directions button. They close it with **×** or by clicking outside the panel.
- **Directions:** the directions button opens the Google Maps link in a new tab.
- **Tablet:** 2 stores per row.
- **Mobile:** with **Enable carousel on mobile**, customers swipe through the stores. Without it, the stores stack on top of each other.
![Store details side panel opened from View details](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/address-2_1gna7r8.png)

## Settings reference

### General

| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the section and the side panel. You can edit color schemes in Theme settings > Colors. |
| Section subheading | Small text above the heading. Leave it empty to hide it. |
| Section heading | The main heading. Leave it empty to hide it. |
| Section description | Short text below the heading. Leave it empty to hide it. |

### Layout

| Setting | What it does |
| ---- | ---- |
| Items per row on desktop | Sets how many stores show in a row on desktop: 3, 4, 5, or 6. Doesn't apply to Diagonal. |
| Content alignment | Sets the layout: Left, Center, or Diagonal. With Diagonal, the heading sits on the left and the stores show 2 per row on the right. |
| Enable carousel on mobile | Lets customers swipe through the stores on phones. |
| Show navigation on mobile | Shows arrow buttons in the mobile carousel. |
| Remove padding top | Removes the space above the section. |
| Remove padding bottom | Removes the space below the section. |

### Address items

| Setting | What it does |
| ---- | ---- |
| Image ratio | Sets the shape of the store images: Square (1:1), Portrait (2:3), Landscape (3:2), or Adapt to image. |
| Show address description in popup | Moves the description and the directions button into a side panel that opens from a View details link. |

### Button

| Setting | What it does |
| ---- | ---- |
| Label | The text of the section button. The button shows when this field is filled in. With Diagonal, it shows below the heading. |
| Link | Where the section button goes. Appears when the button has a label. |

### Prominent badge

| Setting | What it does |
| ---- | ---- |
| Text | The badge text. Leave it empty to hide the badge. |
| Accent scheme | Colors the badge with the Main or Extra accent colors. Appears when the badge has text. |
| Position | Places the badge on the Left or Right. Appears when the badge has text. |
| Shape | Sets the badge shape: Star, Diamond, or Asterisk. Appears when the badge has text. |

### Address item block settings

| Setting | What it does |
| ---- | ---- |
| Image | The store image. A 720 × 480 px .jpg is recommended. |
| Heading | The store name. |
| Address | The store address. |
| Description | More details, such as opening hours. |
| Google Maps link | The Google Maps link of the store. The directions button shows only when this is filled in. |
| Label | The text of the directions button. |

## Troubleshooting

**The directions button doesn't show.**
Fill in the **Google Maps link** in the **Address item** block. The button doesn't show without it.

**I can't add a seventh store.**
Each section holds up to 6 stores. To show more, add a second **Address list** section.

**The store description doesn't show on the card.**
With **Show address description in popup**, the description shows in the side panel. Customers click **View details** to see it. Uncheck the setting to show it on the card.

**There is no setting for tablets.**
Tablets always show 2 stores per row. You can only change the number of stores per row on desktop.

## Related articles

- [Blum Map](https://doc.ecomx.co/en/article/blum-map-oa3cgv/)
- [Blum Contact Form](https://doc.ecomx.co/en/article/blum-contact-form-14mavbl/)
- [Blum Icon With Text](https://doc.ecomx.co/en/article/blum-icon-with-text-a8a4ez/)
- [Blum Page Template](https://doc.ecomx.co/en/article/blum-page-template-wpdqk1/)