NFT Marketplace

Import the NFT Marketplace design and it brings blocks and content types of its own, on top of the main Canvas library. Read this page when you are working on a site built from NFT Marketplace and meet a block you cannot find in the main reference.

These items stay registered on every site so that content you have already imported keeps rendering, and they appear in the block inserter only where the design is in use.

Content types this design adds

NFT Items

canvas_nft_item

One item is called a NFT Item. You will find them in their own admin menu once the design is installed.

  • Editor features: custom-fields, editor, excerpt, page-attributes, thumbnail, title
  • Grouped by: NFT Categories (canvas_nft_cat)

Each item carries these extra settings on its edit screen:

  • Item Bidders

  • Collection

  • Creator

  • Edition

  • Item Fiat

  • Item Price

  • Item Timer

Blocks this design adds

NFT Items

canvas-core/nft-items

Display listings from the NFT Items post type as marketplace cards or a swipeable card stack, or render a single listing page (price, creator, edition, bid CTA, related listings). In the block inserter it is named Canvas NFT Items.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The NFT Items settings in the block editor sidebar

Layout

  • LayoutDefaultListings Grid

    Which part of the marketplace this block draws. Listings Grid lists them all and can be narrowed by a filter bar; the Card Stack is the hero treatment; each "Single Listing" choice renders one section of the listing page you place it on.

    ChoicesListings GridSwipeable Card StackSingle Listing - DetailsSingle Listing - Bid CTASingle Listing - Back + Related

Query

  • ItemsDefault0

    0 shows every listing.

  • Only These ListingsDefaultEmpty

    Slugs of the listings to show, in the order you want them, comma separated. A hero usually curates three rather than taking the newest three. Empty uses the query below.

  • Category SlugDefaultEmpty

    Show only listings in this category. A slug travels with the demo, so the same grid works after import. Empty shows every category.

  • Follow the Category ArchiveDefaultOff

    On a category archive, show that category instead of the one named above. Leave off everywhere else.

  • Order ByDefaultMenu Order

    What decides the sequence of the listings. Menu Order lets you arrange them by hand on the listings screen.

    ChoicesMenu OrderDateTitle

  • OrderDefaultAscending

    Which end of that sequence comes first.

    ChoicesAscendingDescending

Display

  • Row ClassesDefaultrow g-4

    Class names on the row holding the cards, which is where the space between them is set.

  • Column ClassesDefaultcol-xl-3 col-lg-4 col-sm-6 col-12

    Class names on each card column: how many listings sit side by side at each screen width.

  • Filter Class PrefixDefaultnft-

    Each card carries this prefix plus its category slug, which is what a filter bar matches on. Set the bar's own filters to the same prefix.

  • Card ClassesDefaultcard rounded-6 overflow-hidden card-bg-dark

    Class names on each listing card, which set its corner radius and its background treatment.

  • Card Custom CSSDefaultEmpty

    Inline declarations on each card: the design sets the card gradient here so the stack reads differently from the grid.

  • Artwork ClassesDefaultrounded-5

    Class names on each listing's artwork.

  • Show Drop TimersDefaultOn

    Draw the countdown over the artwork of any listing whose Drop Timer setting is on.

  • Drop Timer TargetDefault+22 days

    When each drop timer runs out: a span from today ("+22 days", "+2 weeks") or a calendar date ("2027-03-22"). A date that has already passed counts the shipped span instead, so a listing never renders a timer reading zero.

  • Show the Drop Timer OnDefaultListings that set one

    Which cards carry a drop timer. "Listings that set one" follows each listing's own setting; the other two ignore it, which is how a hero deck puts a countdown on the card in front without dating every listing behind it.

    ChoicesListings that set oneThe first card onlyEvery cardShown when Show Drop Timers is on

  • Show BiddersDefaultOn

    Draw the overlapping avatars of the people bidding on a listing.

  • Show Share MenuDefaultOn

    Add the share button and its menu to each card.

  • Card Button TextDefaultPlace a Bid

    Wording on the full-width button at the foot of each card, which opens the listing.

  • Card Button ClassesDefaultcard-footer-btn text-center gradient-color fw-medium text-light h-op-09

    Class names that set the look of that button.

  • Bidders When a Listing Names NoneDefaultEmpty

    Avatars to draw on a card whose listing names no bidders, so a row or a deck reads consistently. A listing that names its own always wins.

    Shown when Show Bidders is on

  • Card Stack ClassesDefaultswiper_wrapper h-auto overflow-visible customjs

    Class names on the card stack wrapper. The "customjs" token is what tells the theme to leave the stack to the design's own card-effect script.

    Shown when Layout is "Swipeable Card Stack"

  • Card Stack Slide ClassesDefaultswiper-slide rounded-6

    Class names on each slide of the stack.

    Shown when Layout is "Swipeable Card Stack"

  • Collection Page SlugDefaultexplore

    Slug of the page listing the whole collection. The single layouts resolve it to a portable permalink for the collection eyebrow and the "Back" button. Empty = no link.

  • Bid Page SlugDefaultpricing

    Slug of the page the single-listing bid button links to. Resolved to a portable permalink so the link is correct on any install. Empty = no button.

  • Bid Button TextDefaultPlace a Bid

    Wording on the bid button. Leave empty for no button.

  • Back Button TextDefaultBack to the Collection

    Wording on the button returning the reader to the collection. Leave empty for no button.

  • Related HeadingDefaultMore from the Marketplace

    Title above the row of other listings. Leave empty to show the row with no title.

Was this page helpful?