Product Information

Rendered once on the product details page (PDP), alongside the rest of the product's own display (image, title, price, add-to-cart). It's a single, self-contained content block, not a per-item template - typically extended content like a full description, specs table, size guide, or shipping/returns info that doesn't fit in the main product summary.

type: "product-information" - a block without settings - just one .tsx file, no settings panel.

Data

Unlike every other block type, product: ShopifyProduct and variant: ShopifyProductVariant are passed as their own top-level props, not nested inside data - destructure them as { product, variant, data }, not data.product/data.variant. data itself is empty here (it would only ever contain fields a configurationSchema.json defines, and this type doesn't have one).

Common fields used:

• product.description - the product's description text
• product.title - product title
• variant.price / variant.compareAtPrice - the selected variant's pricing (render with <Money price={...} /> from @evlop/shopify)
• variant.selectedOptions - the variant's option values (e.g. size, color)

Loading metafields

To show metafield data (e.g. material, care instructions, a size chart), register it with loadProductsManager.addMetafieldIdentifiers([{ namespace, key }, ...]) from @evlop/shopify. Call this once at module scope, alongside the imports - never inside the component body. A registered { namespace: 'custom', key: 'vendor' } identifier lands at product.metafields.custom.vendor - see Showing Metafields on a Product Display Card for a worked example of the same pattern (there via data.product instead of a top-level product prop).

Example

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

const ProductInformation: CustomBlock.ProductInformation = ({ product, variant, data }) => {
  return (
    <Box p="md">
      <Text fontSize="lg" fontWeight="Bold">
        Product details
      </Text>
      <Text mt="4xs" color="gray-700">
        {product.description}
      </Text>
    </Box>
  );
};

export default ProductInformation;