Skip to main content

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.
Snag page builder showing landing page and ecosystem app examples

Section types

  1. Carousel
  2. Strip
  3. Featured
  4. All items
  5. List
  6. Image
  7. Text
  8. Code
  9. Featured apps
  10. Apps grid
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.
Small carousel section configuration with size and alignment options
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.
Large carousel configuration with per-collection title and background
Examples:
Large carousel section rendered on a live page
Medium carousel section rendered on a live page
Small carousel section rendered on a live page

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
Strip section configuration with alignment and overlay options
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.
Advanced options toggle for custom mobile image and text positioning
Examples:
Strip section with bottom-aligned text overlay on a banner image
Strip section with center-aligned text and full overlay
Strip section with left-aligned text and gradient overlay
Custom mobile image:
Custom mobile strip layout with text positioned outside the image
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.
Featured section configuration with image alignment and description
Examples:
Featured section with image on the left and description on the right
Featured section with image on the right and description on the left

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.
All items section configuration with collection selection options
Examples:
All items grid showing 8 items from selected collections

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
List section configuration with sort options for collections
Examples:
Collection list section rendered with sorting applied

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.
Image section configuration with aspect ratio and mobile image options
Examples:
Full-width image section rendered on a live page

Text

The text section allows you to add rich text with headlines, bullet points and other customization options.
Text section configuration with rich text editing options
Examples:
Rich text section rendered with headlines and bullet points

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.
Code section configuration for inserting custom HTML or scripts
Examples:
Custom code section rendered on a live page
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.
Featured app section configuration with media, layout, and CTA options
Examples:
Featured app in container style layout on the Apps Hub
Featured app in full-width hero layout introducing a loyalty program

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.
Apps grid section configuration with tile media and page media options
Examples:
Apps grid section rendered with multiple app tiles on a live page