Welcome to Front-Commerce!

Documentation

You can find the full documentation in the developers documentation.

If you can't find what you are looking for, feel free to reach us! We will gladly help and improve our documentation.

Start hacking!

If you're more like an adventurer, you could:

copy node_modules/@front-commerce/theme-chocolatine/theme/pages/Home/Home.jsx in app/theme/pages/Home/Home.jsx
refresh your app by restarting npm run start
and customize this home page.

Do you need a carousel?

Your design may include a Carousel on the homepage. There are several concerns about them but you may have no choice.

Front-Commerce's Chocolatine theme contains accessible components to help you with this.

View the code (carousel + reassurance)

import MegaHeading from "theme/components/atoms/Typography/Heading/Mega";
import Carousel from "theme/components/organisms/Carousel";
import FeatureList, { Feature } from "theme/components/organisms/FeatureList";
import Icon from "theme/components/atoms/Icon";
import { CAROUSEL_IMAGE_SIZES } from "./HomeConstants";

const HomeReassurance = () => {
  return (
    <FeatureList>
      <Feature
        icon={<Icon appearance="block" icon="cube" title="" />}
        title={"Free Shipping"}
        description="On purchases over $199"
      />
      <Feature
        icon={<Icon appearance="block" icon="smile" title="" />}
        title={"99% satisfied customers"}
        description="Our clients' opinions speak for themselves"
      />
      <Feature
        icon={<Icon appearance="block" icon="lock" title="" />}
        title={"Originality Guaranteed"}
        description="30 days warranty for each product from our store"
      />
    </FeatureList>
  );
};

const HomeCarousel = () => {
  const slides = [
    {
      key: "1",
      title: (
        <MegaHeading as="h1">First Sale of the summer collection</MegaHeading>
      ),
      to: "/venia-bottoms.html",
      linkTitle: "Shop now",
      imageSrc: "/images/resized/carousel-background.png",
      priority: true,
    },
    {
      key: "2",
      title: (
        <MegaHeading as="h2">Second Sale of the summer collection</MegaHeading>
      ),
      to: "/venia-bottoms.html",
      linkTitle: "Shop now",
      imageSrc: "/images/resized/carousel-background.png",
    },
    {
      key: "3",
      title: (
        <MegaHeading as="h2">Third Sale of the summer collection</MegaHeading>
      ),
      to: "/venia-bottoms.html",
      linkTitle: "Shop now",
      imageSrc: "/images/resized/carousel-background.png",
    },
    {
      key: "4",
      title: (
        <MegaHeading as="h2">Fourth Sale of the summer collection</MegaHeading>
      ),
      to: "/venia-bottoms.html",
      linkTitle: "Shop now",
      imageSrc: "/images/resized/carousel-background.png",
    },
  ];

  return (
    <Carousel
      slides={slides}
      content={<HomeReassurance />}
      imageSizes={CAROUSEL_IMAGE_SIZES}
    />
  );
};

Push content

You may want to push content or main categories to visitors so that they could access them faster.

Front-Commerce's <Grid>, <Cell> and <PushBlock> components will allow you to create this layout.

View the code (push blocks)

import PushBlock from "theme/components/organisms/PushBlock/PushBlock";
import Grid from "theme/components/templates/Grid/Grid";
import Cell from "theme/components/templates/Grid/Cell";

import MegaHeading from "theme/components/atoms/Typography/Heading/Mega";
import Carousel from "theme/components/organisms/Carousel";
import FeatureList, { Feature } from "theme/components/organisms/FeatureList";
import Icon from "theme/components/atoms/Icon";
<div className="container">
  <Grid>
    <Cell size="desktop-2">
      <PushBlock
        imageSrc="/images/resized/hoodie.png"
        format="pushBlockWide"
      >
        <H2>New arrivals are in!</H2>
        <Link buttonAppearance="default" to="/venia-bottoms.html">
          Show collection
        </Link>
      </PushBlock>
    </Cell>
    <Cell size="1">
      <PushBlock
        imageSrc="/images/resized/black-t-shirt.png"
        format="pushBlock"
      >
        <H2>Basic t-shirts $29,99</H2>
        <Link buttonAppearance="default" to="/venia-bottoms.html">
          More details
        </Link>
      </PushBlock>
    </Cell>
    <Cell size="1">
      <PushBlock
        imageSrc="/images/resized/sale-push.png"
        format="pushBlock"
      >
        <H2>Sale this summer</H2>
        <Link buttonAppearance="default" to="/venia-bottoms.html">
          View all
        </Link>
      </PushBlock>
    </Cell>
  </Grid>
</div>

Feature products

You may want to display your new products or the best sellers directly from the homepage.

Front-Commerce's <FeaturedProducts> component allows you to display products from a category id.

View the code (featured products)

import FeaturedProducts from "theme/modules/ProductList/FeaturedProducts";
import { FEATURED_PRODUCTS_IMAGE_SIZES } from "./HomeConstants";

<Section title={<H2>Products in today</H2>}>
  <FeaturedProducts
    categoryId="8"
    imageSizes={FEATURED_PRODUCTS_IMAGE_SIZES}
    prioritizeTop={0}
  />
</Section>

Reassure visitors

You must assure the customer that both the store and your products are unique. It is important to highligh your difference and show them what you do to ensure a smooth buying experience.

Front-Commerce's <FeatureList> and <Feature> components allows you to visually highlight what makes you unique.

View the code (reassurance)

import Icon from "theme/components/atoms/Icon";
import FeatureList, { Feature } from "theme/components/organisms/FeatureList";

<Section title={<H2>Why should you choose us?</H2>}>
  <div className="container">
    <FeatureList>
      <Feature
        appearance="big"
        icon={<Icon size="big" appearance="block" icon="cube" title="" />}
        title={"Free Shipping"}
        description="All purchases over $199 are eligible for free shipping via USPS First Class Mail."
      />
      <Feature
        appearance="big-primary"
        icon={<Icon size="big" appearance="block" icon="cash" title="" />}
        title={"Easy Payments"}
        description="All payments are processed instantly over a secure payment protocol."
      />
      <Feature
        appearance="big"
        icon={<Icon size="big" appearance="block" icon="lock" title="" />}
        title={"Money-Back Guarantee"}
        description="If an item arrived damaged or you've changed your mind, you can send it back for a full refund."
      />
      <Feature
        appearance="big"
        icon={<Icon size="big" appearance="block" icon="star" title="" />}
        title={"Finest Quality"}
        description="Designed to last, each of our products has been crafted with the finest materials."
      />
    </FeatureList>
  </div>
</Section>