Customizing The Home Page

The content and layout of the home page is entirely driven through configuration. Meaning you don't have to edit the ReactJS code to change the look of your home page. It is controlled by the homeLayout option in .altrc.ts located at the root of the project. This option is a list of the sections that make up your home page in a vertical order. This means that the first item on the list goes to the top of the page and so on. Let's see an example snippet used on the Alt Storefront demo site.

// .altrc.ts
// ...
const altConfig: AltConfig = {
  // ...
  homeLayout: [
    {
      // a banner/carousel section at the top of the page
      type: "banner",
      // it should take up the full width of the screen
      fullWidth: true,
      // and have a height of 400px
      height: "400px",
      // it is controlled by a menu object called "navbar" managed from the saleor admin dashboard
      menuName: "navbar",
      // it should show the name of each menu item over the image
      showTitleOverlay: true,
    },
    {
      // an empty section used as spacing between other sections
      type: "vertical-spacing",
      spacing: 24,
    },
    {
      // a "featured products" section below the banner above
      type: "product-list",
      // it should use products from the saleor category with this slug
      categorySlug: "groceries",
      // it should fetch the first 10 products in the category
      firstNProducts: 10,
      // and shuffle them up to pick the ones it will display
      shuffle: true,
      // it should have a custom title, not the name of the category
      title: "Go Groceries",
      // display our title, don't hide it
      showTitle: true,
      // there should be 4 rows on mobile devices, 3 on tablets, 1 on big laptops, etc.
      rows: {
        xs: 4,
        sm: 3,
        md: 2,
        lg: 2,
        xl: 1,
        xxl: 1,
      },
    },
    // ...other sections go here
  ],
  // ...
};
// ...

Section Types

All the configuration options are fully typed and contain comments to guide you. Here is some extra descriptions on what the options do.

Banner

A large image (if one item) or image carousel (if multiple items). It supports the following options.

• type must be set to "banner".
• height is a string of valid CSS height or an object containing heights for different screensizes: xs, sm, md, etc.
• fullWidth: boolean controlling whether the banner should take up full screen width on larger screens. Note that it always takes up full screen width on smaller screens.
• showTitleOverlay?: boolean lets you display or hide the title of the menu item over the image.
• menuName?: string lets you specify which saleor menu object to use for the banner. The content of the menu can then be easily controlled from the saleor admin dashboard.
• images can be used in the absence of menuName to provide a list of images to display.

Split Banner

Very similar to Banner above, but supports showing only 2 images, with a small gap between them. One image can be configured to be twice the width of the other, or both can be the same width. Note that on smaller screens, each image takes up the full width, and they are vertically stacked instead. The split banner introduces the following new options.

• type must be set to "split-banner".
• layout controls the split ratio of the 2 images. For example, value of "1-2" will make the 2nd image twice the width of the 1st, and "1-1" will make them the same width.
• gap?: number is the amount of spacing between the 2 images in pixels.

Product List

A list of featured products organized into a single or multiple rows.

• type must be set to "product-list".
• rows controls the number of rows to show on different screen sizes.
• shuffle: boolean specifies whether the products should be shuffled
• firstNProducts: number lets you choose how many products to fetch. For example, you may want to fetch 10 products and select 4 at random each time to display to users. In that case, this option should be set to 10. Note that it should always be greater than or equal to the number of products you will display in this section.
• collectionSlug?: string specifies which collection to fetch products from. Either this or categorySlug must be specified.
• categorySlug?: string specifies which category to fetch products from. Either this or collectionSlug must be specified.
• title?: string lets you control the section title. The category/collection name is used if this is not provided.
• showTitle: boolean lets you show or hide the section title.

Catalog List

A list of featured categories or collections organized into a single or multiple rows.

• type must be set to "catalog-list".
• rows controls the number of rows to show on different screen sizes.
• menuName: string is the name of the saleor menu to use for this section.
• title?: string controls the title of the section. Leave empty to hide title.
• useMenuNameAsTitle?: boolean lets you use the name of the menu object as the section title.
• showNames: boolean controls whether the names of the categories/collections are displayed under the images.
• justify?: "start" | "end" | "center" | "space-around" | "space-between" controls the placement of the categories/collections along the row(s).
• gap?: number | string lets you specify how much spacing should be placed between the items in the row(s).

Sign Up

Encourages anonymous users to sign up. It is hidden if user is already logged in.

• type must be set to "signup".
• message?: string is a short text encouraging users to sign up.
• buttonText?: string controls the text shown on the sign up button.

Vertical Spacing

An empty section used as spacing between other sections.

• type must be set to "vertical-spacing".
• spacing: number | string should be set to a valid CSS height.