Showing Several Merchant-Selected Products

The plural version of Showing a Merchant-Selected Product - a Section that shows a small, merchant-picked lineup of products (e.g. "Shop the look", a curated bundle) instead of a single featured one.

Settings panel

Add "multiple": true to a product field. The picker then lets the merchant select and reorder several products, and data.<name> resolves to an array of products instead of a single one:

configurationSchema.json

[
  {
    "label": "Products",
    "name": "products",
    "type": "product",
    "multiple": true
  }
]

Example

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

const FeaturedProducts: CustomBlock.Section = ({ data }) => {
  const products = data?.products ?? [];

  if (!products.length) return <Text p="md">No products selected.</Text>;

  return (
    <Flexbox flexDirection="row" gap={10} p="md">
      {products.map((product) => (
        <Flexbox key={product.id} flexDirection="column" gap={4} flex={1}>
          <Image src={product.images[0].src} aspectRatio={1} width="100%" borderRadius={8} />
          <Text numberOfLines={1}>{product.title}</Text>
          <Money price={product.variants[0].price} fontWeight="Bold" />
        </Flexbox>
      ))}
    </Flexbox>
  );
};

export default FeaturedProducts;

How it works

• multiple: true on a product field is the only change from the single-product settings panel - the merchant now picks (and reorders) several products instead of one.
• data.products is an array, each item the same full ShopifyProduct shape (title, images, variants, actions, ...) documented on Product List Item Display Card - render each one the same way you would a single picked product, keyed by product.id.
• Guard the empty case with !products.length before mapping, for when the merchant hasn't picked anything yet.