Preview

Storefront page

A finished storefront page that combines merchandising and commerce routing.

The storefront page example strings together store navigation, category previews, and promo sections into one base page.

Store nav

Category routing and utility actions.

Collection cards

Featured category previews for the homepage.

Promo block

Merchandising campaign CTA and offer frame.

Built from: Store navigation, category previews, promo sections, incentives, and product lists.

Use this example as the base for an always-on ecommerce homepage.

Variants

Campaign storefront

Storefront with promo emphasis and featured collections.

Editorial storefront

Story-led storefront with more content and proof.

Source

Copy this source into your app and own it. The theme imports are already included.

svelte

<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { Badge, Button, Card, Container, DescriptionList, Grid, Heading, Stack, Text } from '@dryui/ui';
</script>
<Container>
  <Stack gap="xl">
    <Badge variant="outline">Storefront page</Badge>
    <Heading level={1}>A finished storefront page that combines merchandising and commerce routing.</Heading>
    <Text as="p">The storefront page example strings together store navigation, category previews, and promo sections into one base page.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open storefront page</Button>
        <Button variant="outline">Use promo sections</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Store nav</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Category routing and utility actions.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Collection cards</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Featured category previews for the homepage.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Promo block</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Merchandising campaign CTA and offer frame.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Built from</DescriptionList.Term>
        <DescriptionList.Description>Store navigation, category previews, promo sections, incentives, and product lists.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Text as="p">Use this example as the base for an always-on ecommerce homepage.</Text>
  </Stack>
</Container>

DRYui

Storefront Page Example