---
title: "Landing page"
slug: "landing-page-1"
description: "Learn how to manage banners that appear on the eCommerce landing page."
updated: 2024-11-08T18:43:19Z
published: 2024-11-08T18:43:19Z
canonical: "docs.zilliant.com/landing-page-1"
---

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

# Landing page

The eCommerce application displays a [header](/v1/docs/header-and-footer#header), [footer](/v1/docs/header-and-footer#footer), and a banner in its landing page. If you [configure more than one active banner](/v1/docs/landing-page-1#to-configure-automatic-banner-scrolling) for the landing page, eCommerce automatically scrolls through the banners.

## Manage landing page banners

          Note

          

You must have the Commerce System Administrator [role](/v1/docs/user-roles) to access the following menu items.

1. From the top navigation bar, select your account.
2. From the dropdown menu, select **Commerce Administration**.
3. From the left navigation area, select **Landing Page Banners**.
4. Above the table of banners, optionally switch off the **Apply gray overlay** toggle to remove the default gray, gradated overlay on the landing page banner image or images. The overlay helps provide contrast between a light-colored banner image, the [header](/v1/docs/header-and-footer), and menu text.

          Tip

          

If you turn off the default overlay, make sure the banner images contrast sufficiently with the text that appears in the banner area. The [WebAIM contrast checker](https://webaim.org/resources/contrastchecker/) helps measure contrast for different accessibility levels.

Each banner includes the following elements you can customize:

- **Image**—Use a custom image to align with your company brand.
- **Header**—(Optional.) Enter a title or welcome message for your banner.
- **Text**—(Optional.) Enter more text in this field, such as an informational announcement or promotional message.
- **Button**—(Optional.) Enter a label for the button. This cues the user where the button will lead them.
- **URL**—(Optional.) Enter the URL to the location where the button leads the user.
- **Localization**—(Optional.) To localize a banner’s content, select the language icon to the right of the banner. Fill out the desired language fields and select **Update**.

## Add a banner

From the top navigation area, select **Add** and upload an image. For best resolution, use the following image file types, sizes, and dimensions:

- File types: `.gif`, `.jpeg`, `.jpg`, `.png`
- File size: Up to 70 KB
- Width: 3,840 pixels
- Height: 2,160 pixels

## Configure automatic banner scrolling

1. In the **Display duration in [seconds]** field, enter the number of seconds for which you want each banner to appear.
2. Under the **Active** column, turn on the desired banners.