Product Sticker

A small overlay badge rendered on top of a product image/card - for example a "New", "Sale", discount percentage, or custom promo badge. It layers on top of the Product List Item Display Card, it does not replace it.

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

Data

data is { product: ShopifyProduct; variant: ShopifyProductVariant } - the product (and, where applicable, the specific variant) the sticker is layered on top of.

Common uses: a "Sale"/"New" label, a discount percentage computed from data.product/data.variant compare-at price vs. price, a stock/availability badge.

Loading metafields

To drive a badge off a metafield value, 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 data.product.metafields.custom.vendor - see Showing Metafields on a Product Display Card for a worked example of the same pattern.

Example

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

const ProductSticker: CustomBlock.ProductSticker = ({ data }) => {
  return (
    <Box
      bg="red-600"
      px={8}
      py={4}
      borderRadius={4}
      style={{ position: 'absolute', top: 8, left: 8 }}
    >
      <Text fontSize="xs" fontWeight="Bold" color="gray-0">
        Sale
      </Text>
    </Box>
  );
};

export default ProductSticker;

Implementation notes

• Position the root element to overlay a corner, e.g. a <Box> with style={{ position: 'absolute', top: 8, left: 8 }} as above.
• Keep it visually compact (a short label, a discount %, an icon) - never render a full product layout (image, title, price, add-to-cart) here.