5.1 Content Creation

#Overview

#Assets

During schema building, we modified our Assets system model so the images would have alternative text and a caption. If we go to the Assets tab of our Hygraph project, we'll notice that already contains images. We've provided these images from the get go so you would't have to upload them yourself. If you're interested in learning more about asset upload, check out this document.

Our assets table should look like this:

Assets table with images

We need to manually add the Alt text and Caption for each image. Let's do the first one together: We'll write “colorful socks” in the search filter to find the images we're looking for, and we'll click on the pencil icon of the first result on the list to access the edit mode.

We'll fill in the following information:

We'll click on Save & Publish, and once it's saved, we'll go back to the assets table by clicking the arrow icon at the top left corner of the edit screen.

You'll repeat this for the other two images that you get when you search for "colorful socks".

After you're done with this set of three images, you can click on the X next to the “colorful socks” search reset it, and you'll be ready to repeat the process for the rest of the images.

#Product categories

In earlier lessons of this tutorial, we created the Product Category model and a reference linking it to the Product model. The goal was to let us select categories for products when creating a listing, while also giving customers the option to browse items by category.

Once we have created content entries in both models, we can begin to establish relations between them, but at the moment, our Product Category model doesn't have any.

The content table in the Content editor is empty for now:

Product categories in the content editor

Each content entry that we create here will become a category that we can later relate our products to.

However, since we haven't created any product entries yet, we cannot establish these relations. For now, we will only create the categories and then, later on in the tutorial, we will relate those categories to product entries.

Let's do the first one together. To create a new entry, navigate to the Product category model in the content editor, and click + Add entry at the top right corner of the screen.

Use the following information:

Remember to Save & Publish after you're done.

We'll create one entry for each of the categories we want to have in our e-commerce. We'll use the following information:

For our shoes category

For our sportswear category

For our urban category

For our new arrival category

For our decor category

For our accessories category

We've purposely created some overlapping categories - i.e. a product can be both a new arrival and sportswear - since we created a reference type where one product can be related to more than one category.

Now that we've created our categories, our Product Categories view in the Content editor should look like this:

Product categories in the content editor - with entries

#Seller information

Now let's create some content for our Seller information model. This model will contain information about our e-commerce business, so we'll create a single entry here.

Please follow the same process as in the previous lesson to create your entry. Your entry should have the following information:

Click on Save & publish

Our Seller information view in the Content editor should look like this:

Seller information content editor view with entry

#Products

Next, we're going to work on our product entries. These will be the product listings of our e-commerce. Because we currently have no entries for this model, we will work on this in two steps: first, we'll create a basic product listing, and then we'll add the related products by editing our initial entries.

We'll navigate to the Product content model in the content editor and click on + Add entry.

Add product content entry

We'll use the following information:

At this point, because we have no other products published to relate, we'll just go ahead and click on Save & publish at the top right corner of the screen. We'll come back to our entries later to add relations.

Product content entry

Now it's time to practice. We'll create some additional content so we can query it later when we work with the API Playground. You'll create three more content entries, following the same process we just went through together, using the following information:

Blue running shoes

Plaid shirt

Necklace

Headband

#Related products

Now that we have all our basic content entries, we should add related products to each one.

Just like before, we'll go over the first one together, and then you can work on the rest:

We'll click on the pencil icon of the Headband product entry; this will take us to the edit view. We'll scroll down to where we have our Related products component, and we'll click on + Add Related products.

Remember that when we configured this component, we wanted the title section to be read-only to ensure it'd be the same throughout our e-commerce, so we can now see that the title “Related products” is grayed out and can't be edited.

Next, we have the products section, which says “Add 4 related products here”. This is exactly what we'll do. We'll click on Add existing products and use the checkboxes to select the black leather shoes, necklace, blue running shoes, and plaid shirt. We'll click on Add selected products, and that's it. We can now see the 4 products that we related to our content entry listed in our component:

Component with related products

We'll click Save & Publish at the top right corner of the screen to save the updated entry.

Now, please follow the same steps for our other product entries. Here's a table containing each product entry and the products you should relate them to:

#Blog post

Let's also create a blog post entry that we can later display for promotion on our landing page.

We'll open the Blog post model in the content editor and create a new entry using the following information:

Our entry should look like this:

Blog post complete entry

Let's click Save & publish to finish.

#Landing page

We'll create two landing pages for our e-commerce project: One that will be our homepage, and another one that will hold information for our summer campaign.

#Homepage

Let's create our homepage. We couldn't have created this page earlier, because we configured it to contain mostly related content, so we needed the rest of the content to be created before we could get into it.

We'll open the Landing page model in the content editor and create a new entry with the following information:

Call to action

Product Grid

You would normally use a many more products here, but our e-commerce only has a few for now. Now that we're done, let's click Save & publish.

Our entry should look like this:

Homepage complete entry

#Summer campaign

The landing page model we created allows us to create other pages as well. We want our e-commerce to have a dedicated section for the summer campaign, so we'll create it using this model.

We'll follow the same steps as for the homepage, using the following information:

Call to action

Product Grid

#Navigation

In a previous lesson, we added a Link component to our Navigation model. That model allows us to add links to a Navigation content entry, that can later be used by our frontend.

We want our e-commerce to have a main navigation that displays some of our important categories - such as clothes, shoes, accessories, and decor - as well as the Summer Campaign page we created in the previous step.

We'll open the Navigation model in the content editor and create a new entry with the following information:

Clothes link

Our first navigation link is ready, time to add the rest of the Nav Link components. We'll click on + Add another Link to start and we'll repeat the process for each link with the following information:

Shoes link

Accessories link

Decor link

Summer Campaign link

Now our Navigation content entry has all the links the frontend needs to show. We'll see them later on when we integrate our content with our frontend.