Snag Docs logo

Page Builder

Build custom landing pages and app hubs with Snag's no-code page builder. Use carousels, strips, featured sections, and app grids to showcase your ecosystem.

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

Rewards Shop

Create NFT listings and auctions for your rewards marketplace.

Customization

Set theme colors, fonts, and visual style for your platform.

Loyalty Overview

Set up the loyalty program displayed on your pages.

Hostname Setup

Launch under your own branded domain.