Collection List Item Display Card

Replaces the app's default collection card. Rendered once per collection, wherever a collection list is shown - collection list pages, navigation menus, etc. Each render gets exactly one collection via data.collection; the block isn't responsible for fetching or iterating a collection list itself.

type: "collection-display-card" - a block without settings - just one .tsx file, no settings panel.

Data

data is { collection: ShopifyCollection }, already resolved (no fetching needed).

Common fields/actions:

• data.collection.title - collection title
• data.collection.image - collection image (use directly as an src, e.g. <ImageBackground src={data.collection.image} />)
• data.collection.actions?.openDetailsPage - pass to <Actionable action={...}> to make the whole card tap through to the collection page

Guard against a missing collection (if (!data.collection) return null;) before rendering, since it can be undefined.

Loading state

data.collection can also be { isLoading: true } while the real collection is still loading. Always check data.collection?.isLoading before reading title/image, and render a skeleton/placeholder matching the card's own layout dimensions rather than blank or broken output.

Example

import React from 'react';
import { Actionable, Box, ImageBackground, Flexbox, Text } from '@evlop/native-components';
import { CustomBlock } from '@evlop/shopify';

const CollectionDisplayCard: CustomBlock.CollectionListItem = (props) => {
  const collection = props.data.collection;

  if (!collection) return null;

  return (
    <Actionable action={collection.actions?.openDetailsPage}>
      <Box bg="gray-0" flexDirection="row" gap={10} alignItems="center" borderRadius={10} style={{ overflow: 'hidden' }}>
        <ImageBackground resizeMode="cover" src={collection.image} aspectRatio={2}>
          <Flexbox width="100%" height="100%" bg="black-alpha-700" alignItems="center" justifyContent="center">
            <Text textAlign="center" fontSize="3xl" color="gray-0" fontWeight="Semibold">
              {collection.title}
            </Text>
          </Flexbox>
        </ImageBackground>
      </Box>
    </Actionable>
  );
};

export default CollectionDisplayCard;