Customizing plan tiles in checkout and the client portal

Overview

Plan tiles are where customers view and select your plans — in your checkout when they're signing up, and in the client portal when they're managing their services. gaiia gives you control over how those tiles are laid out, what information they display, how they're branded, and how you highlight specific plans with images and promotional banners.

In this article, we'll be covering how to configure tile layout and information display, apply your brand styling to tiles, add product images, and attach promotional banners to plan cards.

Configuring tile layout and information display

Layout and information display are configured separately for each plan and add-on category, so you can tune presentation to each product type. These settings apply wherever plan tiles appear — in your checkout and the client portal.

Plan tile settings live in Checkout > Plans in the gaiia Admin.

1. In the gaiia Admin, go to Checkout > Plans.
2. Select a plan category (Internet, Router, Mobile, Residential phone).
3. Click Configure Plans.
4. Open the Service plan display section.
5. Choose a tile layout — Horizontal tile layout (stacked list) or Vertical tile layout (side-by-side comparison).
6. Toggle the information you want to show on the tile. Available toggles vary by plan type:
   • Internet plans: Show download speed next to plan name and Show download and upload speeds specs.
   • Mobile: Show specs.

Horizontal plan tile

Both the speed shown in the plan title and the upload/download details below it can be hidden.

When Show specs is enabled, Mobile tiles display three specs, each rendered only when the field is populated on the product:

• Data — GB (e.g. "5 GB"), or "Unlimited" if 0.
• Voice — minutes, or "Unlimited" if 0.
• SMS — count, or "Unlimited" if 0.

Add-on tile settings live in Checkout > Add-Ons:

1. In the gaiia Admin, go to Checkout > Add-Ons.
2. Click Edit Add-On Group for the group you want to update.
3. Open the Add-on products display section.
4. Choose a tile layout — Horizontal tile layout (stacked list) or Vertical tile layout (side-by-side comparison).

Add-ons do not have specs, so the Add-on products display section offers only the layout choice — no information toggles.

A few layout behaviours to note:

• The plans and add-ons screen uses a responsive grid — up to three tiles per row across three rows on wider screens, with fewer per row on smaller screens to fit the customer’s display.
• There is no maximum number of tiles — you can display as many plans as you need.
• When more than one tile appears in a row, shorter tiles expand to match the height of the tallest tile so the row stays visually aligned.

Applying your brand to tiles

Tiles automatically inherit styling from your brand theme so they stay consistent with the rest of your storefront.

• The bottom section of each tile uses the secondary brand colour from your brand theme.
• Button corner styling on the tile (e.g. squared or rounded) follows your brand theme's button style.

Colour settings are consistent across all tiles. Tags such as “Most Popular” can be styled in different colours to draw attention to specific plans (more on this below).

Adding a product image to a tile

You can display an image on any plan tile by adding a productTileImageUrl spec to the product in your catalogue.

1. In the gaiia Admin, go to Products.
2. Open the product whose tile you want to update.
3. In the Product Details panel, scroll to the Specs section.
4. Add a spec with the field name productTileImageUrl and paste the URL of your image.

The image must be hosted on a publicly accessible webpage. URLs behind authentication or private storage will not render.

Adding a promotional banner to a plan card

Promotional banners appear at the top of a plan card and are useful for callouts such as “Best Value” or “Fastest.” Banners are configured per product, using spec fields.

1. In the gaiia Admin, go to Products.
2. Click on the product whose plan card you want to add the banner to.
3. In the Product Details panel, scroll down to the Specs section.
4. Add the banner spec fields described below.

Customize your banner using the following attributes:

• promoBannerText — The banner title displayed on the card. Example: “Best Value!”
• promoBannerIconUrl — The URL of an image or icon shown alongside the banner text. The image is left-aligned, with text to the right.
• promoBannerBackgroundColor — A HEX code for the banner’s solid background colour.
• promoBannerBackgroundEndColor — A HEX code for a gradient end colour. When set, the banner fades from promoBannerBackgroundColor on the left into promoBannerBackgroundEndColor on the right.

The banner icon must be hosted on a publicly accessible webpage.