> For the complete documentation index, see [llms.txt](https://help.checkoutchamp.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/customer-portal/setting-up-the-customer-portal/layout.md).

# Layout

The **Layout** section lets you control how your Customer Portal is organized and displayed to customers. From this page, you can adjust the portal header, navigation menu, customer activity pages, date format, product variant display, notifications, and footer content.

### Open the Layout Settings

From the Customer Portal Builder, select **Layout** from the left-side menu.

The left menu also gives you access to other portal setup areas, including Login, Profile, Orders, Subscriptions, Shipments, Styles, Widgets, and Cancellation Workflows.

***

## Header Logo Placement

Use **Header Logo Placement** to choose where your logo appears in the portal header.

Available options:

| Option     | What it does                                       |
| ---------- | -------------------------------------------------- |
| **None**   | Hides the logo from the header.                    |
| **Left**   | Displays the logo on the left side of the header.  |
| **Center** | Displays the logo in the center of the header.     |
| **Right**  | Displays the logo on the right side of the header. |

Choose the option that best matches your brand layout.

***

## Navigation Menu Location

Use **Navigation Menu Location** to choose where the portal menu appears.

Available options:

| Option    | What it does                                    |
| --------- | ----------------------------------------------- |
| **Left**  | Shows the menu on the left side of the portal.  |
| **Right** | Shows the menu on the right side of the portal. |
| **Top**   | Shows the menu across the top of the portal.    |

This controls where customers will access portal sections such as Profile, Orders, Subscriptions, and Shipments.

***

## Orders, Subscriptions, and Shipments

This setting controls how customer activity pages are displayed in the portal.

You can choose to display Orders, Subscriptions, and Shipments together or as separate pages.

| Option                     | What it does                                                        |
| -------------------------- | ------------------------------------------------------------------- |
| **Show on same page**      | Displays Orders, Subscriptions, and Shipments together on one page. |
| **Show on separate pages** | Gives each section its own page in the portal.                      |

Use separate pages if you want customers to navigate directly to each section. Use the same page option if you prefer a more compact customer experience.

***

## Date Format

Use **Date Format** to choose how dates display throughout the portal.

Examples of available formats include:

| Format Example |
| -------------- |
| `M/d/yyyy`     |
| `M/d/yy`       |
| `MM/dd/yyyy`   |
| `dd/MM/yyyy`   |
| `yyyy-MM-dd`   |
| `dd-MMM-yy`    |

Select the format that best matches your region or customer expectations.

***

## Campaign Filter

The **Campaign Filter** controls which campaign data is shown in the portal.

Available options:

| Option       | What it does                                  |
| ------------ | --------------------------------------------- |
| **Current**  | Shows portal data from the current campaign.  |
| **Category** | Shows portal data based on campaign category. |
| **All**      | Shows all applicable campaign data.           |

This setting is useful when customers may have orders, subscriptions, or shipments across multiple campaigns.

{% hint style="warning" %}
Customers will only have access to orders if the order matches the campaigns set on the filter
{% endhint %}

***

## Variant Selection

The **Variant Selection** section controls how product variants appear to customers when they are available in the portal.

### Color Swatch Variant Style

Use this setting to choose how color options display.

Available options include:

| Option              |
| ------------------- |
| Dropdown Menu       |
| Square              |
| Circular            |
| Square With Tiles   |
| Circular With Tiles |
| Tiles               |

For example, color options such as red, orange, or yellow can display as swatches instead of only text.

### Other Variant Style

Use this setting for non-color variants, such as size.

Available options include:

| Option        |
| ------------- |
| Dropdown Menu |
| Tile          |
| Image Tile    |

The **Variant Preview** shows an example of how the selected variant styles will appear to customers before you save the changes.

***

## Notifications & Alerts

The **Notifications & Alerts** section lets you display helpful account alerts to customers inside the portal.

Available alert types include:

| Alert               | What it does                                                       |
| ------------------- | ------------------------------------------------------------------ |
| **Upcoming Charge** | Notifies customers when they have an upcoming subscription charge. |
| **Payment Failed**  | Notifies customers when a payment has failed.                      |
| **Card Expiring**   | Notifies customers when their saved card is close to expiring.     |

You can enable or disable notifications based on the experience you want customers to have.

***

## Footer Settings

The footer settings control the content shown at the bottom of the Customer Portal.

### Footer Style

Choose the footer layout you want to use.

| Option    | What it does                                             |
| --------- | -------------------------------------------------------- |
| **None**  | Hides the footer.                                        |
| **Large** | Shows a full footer with columns, links, and fine print. |
| **Small** | Shows a simplified footer.                               |

The footer style determines how much footer content is shown to customers.

***

### Number of Columns (up to 5)

Use **Number of Columns** to choose how many footer columns appear.

Each column can have its own title and list of links.

***

### Footer Column Title

Each footer column includes a **Title** field.

This title appears above the links in that column.

Example:

```
Company
```

Use clear labels such as:

```
Support
Account
Company
Resources
```

***

### Footer Links

Footer links let you add helpful navigation items to the bottom of the portal.

Each link can be reordered, expanded, edited, or removed. The **Add Link** button adds another link to the selected footer column.

Examples of footer links may include:

```
Contact Us
Terms & Conditions
Privacy Policy
Return Policy
```

Use footer links for pages customers may need after logging in or while managing their account.

***

### Fine Print

Use **Fine Print** to add small footer text, such as copyright or legal information.

Example:

```
©2026 CheckoutChamp
```

This text appears at the bottom of the footer when supported by the selected footer style.