Overview

👍 Heads up

If you are using Starter Kit, there's no need need to manually create the Components and Sections below.
All the code examples below are just an implementation suggestions. For brevity, the styles are omitted.
For this guide, we will be creating Sections and Components locally. Make sure you have your Local Development Environment ready.

👉 Remember to commit and push newly created Sections and Components to your remote repository to sync the changes with Shogun Frontend.

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:

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

We can now create our first Components and Sections.

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:

On your local environment, create a new folder inside src/sections and name it as ProductGrid.
Create an index.js file inside the ProductGrid folder.
Create a styles.module.css file inside the ProductGrid folder.

You can also create Sections and Components via Shogun Frontend IDE:

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

📘 Tips

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 IDE 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:

On your local environment, create a new folder inside src/components and name it as ProductGridItem.
Create an index.js file inside the ProductGridItem folder.
Create a styles.module.css file inside the ProductGridItem folder.

Components can also be created using Shogun Frontend IDE.

📘 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.

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.

components/ProductGridItem/index.js

// 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.

sections/ProductGrid/index.js

// 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

Committing to repository & Shogun Frontend

Once we have the ProductGrid and ProductGridItem created, we can commit and push the changes to our remote repository. Shogun Frontend’s GitHub integration should automatically pick up the changes you made make them available inside the Shogun Frontend.

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

To create a variable:

Click on the Sections icon on the sidebar.
Select ProductGrid from the list of Sections
Click on the the + icon on the right side of the IDE sidebar.
Enter the VARIABLE NAME, which must match the prop name created in the Component, collection.
Select Reference as the TYPE and select ProductCollections as the CONTENT TYPE.
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

Navigate to the Experience Manager (XM) by clicking the Pages icon on the sidebar.
Search for "Homepage".
Click Homepage to open.
On the sidebar, click + labeled "Add sections to start building your page".
A list with all Sections will appear, search for and select ProductGrid.
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.
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).