Page builder
The following is a quick guide to creating landing and ecosystem app pages.
Overview
The page builder has multiple different section types that can be customized individually. Depending on the type of page you are trying to build, different section types will be available.
Section types
- Carousel
- Strip
- Featured
- All items
- List
- Image
- Text
- Code
- Featured apps
- Apps grid
Carousel
You have the ability to choose from 3 sizes of carousel:
- Small (small-sized cards)
- Medium (medium-sized cards)
- Large (full size)
You can align the text (title and description) left or to the center.
Then choose between showing multiple collections or items within a specific collection.
If you selected the large carousel you have to individually define the title, description and background for each collection. This gives you more customization options to better highlight individual collections.
Examples:
Strip
The strip is a banner-type section made out of an image, title, description and button. You can choose what combination of the four you wish to have. You can align the content to the bottom middle or left side, this also impacts the overlay type.
- Bottom - Black overlay gradient from the bottom
- Middle - Full 50% black overlay
- Left - Black overlay gradient from the left side
If you wish, you can also toggle on the custom mobile design under the advanced options to upload a different image that is better suited for mobile devices. This images doesn’t have an overlay since the title, description and button are positioned outside of the image. You have the option to position the text either above or below the image.
Examples:
Custom mobile image:
Featured
The featured section allows you to highlight a specific collection or item. You can align the main image to the left or right and add a custom title, and description.
Examples:
All items
The all-items section is a grid of 8 items from selected collections. You can also choose to show items from all collections.
Examples:
List
List all your collections and choose how to sort them. You can sort by:
- Latest sales
- Recently created
- Floor price
- 24h volume
- Unique holders
Examples:
Image
You can add an image with a custom aspect ratio. The image will always be stretched to the full width of the screen and the height will adapt based on the aspect ratio of the image.
If you wish, you can also upload a different image that is better suited for mobile devices
The image can also have a link attached to it which makes the entire image clickable.
Examples:
Text
The text section allows you to add rich text with headlines, bullet points and other customization options.
Examples:
Code
The code section gives you endless possibilities to insert custom code on your page.
Custom code is not validated. Incorrect code may cause issues.
Examples:
Featured app
The featured app highlights a single app of your choice. You can add a call-to-action button that links to a specific loyalty section or an external page.
This section can also be used as a hero element for your Apps Hub. Instead of featuring a specific app, you can introduce your ecosystem or highlight any key content.
Media:
- Tile media is shown on the Apps Hub.
- Page media serves as the banner on the linked loyalty page.
Layout:
- Container Style - Displays the featured app in a large tile, keeping it visually aligned with the Apps Grid while making it still prominent.
- Full-width Hero - Expands the featured app into a large banner, ideal for a general hero section introducing your loyalty program.
Examples:
Apps grid
The apps grid allows you to showcase multiple apps in a structured, visually engaging way. Use it to create a hub for different app experiences within your loyalty ecosystem. Each app can have its own media, text, button, and links.
Apps can be reordered within the grid, and you can choose whether to display or hide quest and points information.
Media:
- Tile media is shown on the apps hub.
- Page media serves as the banner on the linked loyalty page.
Examples: