Creating CompStore content

Once the new theme is activated, it's time to handle the content by creating some options and configuring the products and categories.

To create new categories, you will need access the Admin area (http://localhost/packt/admin_packt) and follow this recipe:

Navigate to the Products | Categories menu.
Delete all the subcategories of Default Category by clicking on them and pressing the Delete Category button.
Create three new subcategories of Default Category named Notebook, Desktops, and Peripherals. Be sure to set to Yes the Include in Navigation Menu option for each category.

In the Add Category option, you have option to fill the Description, Page Title, and Meta Information areas for SEO purposes, as shown in the following screenshot:

To create new products, you will need access to the Admin area (http://localhost/packt/admin_packt) and follow this recipe:

Access the Admin area (http://localhost/packt/admin_packt) and navigate to Products | Catalog.
Click on the Add Product button.
In the New Product page, enter all the required Product Information input.
Set the values of Price and Quantity categories.
Choose an image to upload.
Choose In Stock for the Stock Availability field.
Choose Main Website in the Websites tab.
Save your new product.
You can add three to nine products for testing purposes.

Magento has a widget management system that allows the flexibility of the content. The widget helps create a specific list of new products in the home page. To create a new widget, follow these steps:

Navigate to Content | Widgets
Click on the Add Widget button
Then, in the StoreFront properties, perform the following:
1. Select CMS Static Block as Type and Compstore Electronics as Design Theme.
2. Type Home Page in the Widget title field.
3. Select the All Store Views option.
4. In Layout Updates, select the following options:
- For the Display on field, select the Specified Page option
- In the Page field, select the CMS Home Page option
- In the Container field, select the Main Content Area option
- The Template field should be CMS Static Block Default Template
In Widget Options, perform the following:
1. Select Home Page Block.
2. Then, click on the Save button.

The default block configuration contains the images and products of the Luma theme. Let's change it via the following steps:

Navigate to Content | Blocks.
Click to edit Home Page Block

In the Content field, enter the following HTML code:

<div class="blocks-promo">
<a class="block-promo home-main" href="{{store url=""}}notebook.html">
<img src="{{media url="wysiwyg/home-main.jpg"}}" alt="" />
<span class="content bg-white"><span class="info">New Desktop available!</span> 
<strong class="title">New Brands</strong> 
<span class="action more button">Shop New Desktop</span> </span> </a>
</div>
<div class="content-heading">
<h2 class="title">New Products</h2>
<p class="info">Here is what`s trending on CompStore now</p>

Position the cursor under the last line of the HTML code and click on the Insert Widget icon, as shown in the following screenshot:
Select Catalog Products List as Widget Type.
Select all the categories created earlier in the Conditions field.
Click on the Insert Widget button.
If you prefer, you can change the image of the block.
Finally, click on the Save Block button.

Go to the Home page to see the final result:

Previous Chapter

Applying the theme

Next Chapter

Customizing Magento 2.0 templates

Table of Contents for Magento 2 - Build World-Class online stores

Creating CompStore content

Table of Contents for
Magento 2 - Build World-Class online stores