Your Homepage

The Homepage

Most customers will land on the homepage, which will typically feature one or multiple products, navigation, and hero banners.

When your store is created in Shogun Frontend, you will have access to a CMS group called ProductCollections if you are using Shopify or Categories if you are using BigCommerce under the Content section on the sidebar menu. We will be using one of the collections to showcase products on our homepage.

To create a page named Homepage:

  1. Click on the Pages icon from the sidebar.
  2. Click ADD PAGE on the top right corner.
  3. Enter the PAGE NAME: Homepage.
  4. Leave PAGE PATH blank to set the root URL of your store.
  5. Click ADD PAGE.

We can now create our first ComponentsComponents - Components are pieces of a user interface. They are developed using JSX and CSS in the Shogun Frontend Integrated Development Environment (IDE). and SectionsSections - Sections are the building blocks for your store's pages. Like components, sections are also developed using JSX and CSS in the Shogun Frontend IDE. A section receives data via variables that must match its props..

Creating a grid of products

Our first Section will display products that allow customers to navigate to the product pages for more information.

To create a Section:

  1. Click on the Sections icon on the sidebar.
  2. Click ADD SECTION on the top right corner.
  3. Enter the name for the Section, in this example we will call it ProductGrid.
  4. Click SAVE SECTION.

📘

We recommend using PascalCase for naming your Components and Sections.

🚧

Do not use dashes! For example: use ProductGrid instead of product-grid.

After creating the Section, you will be automatically redirected to the Shogun Frontend IDEIDE - Integrated Development Environment. with the Section you just created open.

Creating ProductGridItem Component

Before actually adding code to the ProductGrid Section, we will create a Component called ProductGridItem. This Component is an abstraction of an item inside of our grid, in this case, a product inside of our grid.

To create a Component:

  1. Open any Section.
  2. Click on Components on the left side of the screen.
  3. Click on the + button to create a new Component.
  4. The IDE should be refreshed with a sample code in it.
  5. Name your Component by clicking on the pencil icon button in the top left corner of your screen. When complete, click the checkmark icon to save the name.
  6. Click SAVE to save the Component.

📘

Components can only be used inside another Component or Section and they can't receive variables from the IDE, only props from another Component or Section. Only Sections can be used directly in a Page or Template.

👍

Heads up

  • If you are using the Starter Kit, there's no need need to manually create the Component and Section below.
  • For this guide, we will be using code samples without any styles.

The ProductGridItem Component will receive as prop an object called product, an object that contains the information needed for creating this Component. For this example, we need access to the product name, slug, an array of variants and an array of media objects.

// ProductGridItem Component
import * as React from 'react'
import Link from 'frontend-link'
import ResponsiveImage from 'frontend-ui/ResponsiveImage'

const defaultImage = {
  name: 'Default Image',
  src: 'https://f.shgcdn.com/3e439e58-55b0-417d-8475-9b8db731b619/',
  width: 720,
  height: 480,
}

const getFirstImage = media => {
  if (!media.length) return defaultImage

  return media[0].details
}

const ProductGridItem = props => {
  const {
    product: {
      name,
      slug,
      variants: [firstVariant],
      media,
    },
  } = props

  const { price } = firstVariant
  const firstImage = getFirstImage(media)
  const { src, width = 720, height = 480 } = firstImage

  return (
    <Link
      to={`/products/${slug}`}
      aria-label={`Navigate to ${name} product page`}
    >
      <ResponsiveImage
        src={src}
        alt=""
        width={width.toString()}
        height={height.toString()}
        sizes="400px"
      />
      <h3>{name}</h3>
      <strong>
        ${Number(price).toFixed(2)}
      </strong>
    </Link>
  )
}

export default ProductGridItem

Below is an example of a ProductGridItem using the code from above.

Creating ProductGrid Section

With our ProductGridItem in place, we can use it inside our ProductGrid Section. This Section will render a grid of products. To do this, we use an array of products as a prop, for this example, we will name this prop collection and then loop through the data in the array creating a grid of products.

// ProductGrid Section
import * as React from 'react'
import ProductGridItem from 'Components/ProductGridItem'

const ProductGrid = ({ collection }) => {
  if (!collection) return null

  const { name, products } = collection

  return (
    <section>
      <h2>{name}</h2>
      <div>
        {products.map(product => (
          <ProductGridItem key={product.slug} product={product} />
        ))}
      </div>
    </section>
  )
}

export default ProductGrid

Next, we need to create a variable in our IDE to sync the data from our CMS to the Section.

To create a variable:

  1. Click on the + icon on the right side of the IDE sidebar.
  2. Enter the VARIABLE NAME, which must match the prop name created in the Component, collection.
  3. Select Reference as the TYPE and select ProductCollections as the CONTENT TYPE.
  4. To choose the data we want to access, under products, select name and slug and then under variants select price. The images are nested under the option details under media.

It's important that both the variable and the prop have the exact same name; otherwise, the data won't be passed to our Section.

After following the steps above, your Variable should look like the image below.

Now that we have our first section, it’s time to connect it with the homepage.

Adding a Section to a page

  1. Navigate to the Experience Manager (XM) by clicking the Pages icon on the sidebar.
  2. Search for "Homepage".
  3. Click Homepage to open.
  4. On the sidebar, click + labeled "Add sections to start building your page".
  5. A list with all Sections will appear, search for and select ProductGrid.
  6. Click on the ProductGrid Section and link the desired collection in the COLLECTION variable. In our example, we are using a collection named frontpage, but feel free to use any collection.
  7. Click SAVE before moving on.

You should now have a beautiful grid of products. Each product image will link to the corresponding product detail page (PDP).


What’s Next
Did this page help you?