Introduction

This video tutorial will show you how to create a new storefront page from scratch in your Intershop Commerce Management. For this, we build a new page template, containing slots and components. Then we use it to define a new Page Variant and assign it to our website. In the end we will add some content in the Design View.

Everything starts with a page. A page represents an entry point to your storefront.

Intershop Commerce Management uses different page types for different parts of the shop. Some of them, for example Category Pages, Family Pages, Product Pages and Content Pages can be created during run time. Other, so called, System Pages like the Homepage or the Cart Page are created during server startup and are always present.

In order to bring content to a page, a so called Page Variant is needed. Page variants own the actual content. A page needs to have at least one page variant assigned to it in order to display content in the storefront. There might be several page variants assigned to a page for the purposes of personalization, promotions, campaigns, A/B tests, and versioning.

Page variants are based on so called page templates. These templates define the basic page layout and what kind of content can be added to the page later on by defining slots, placeholders and component structures. You can create different page templates to define different page variant layouts. Examples are category or product pages.

The default “Standard Page” page template offers three predefined slots: header, content and footer.

Every slot can be filled with components in order to create a page structure. Intershop offers the functionality to fill components with additional components by using their slots. In this way you can easily set up your page layout in many levels.

Depending on the type, each component may require a specific set of configuration parameters, for example a link to a product or an image. The values for configuration parameters, however, can be edited in Data View of the ICM or directly in the storefront, using the Design View.

References

• Concept - CMS - Introduction

Video Tutorial

Guidance

Walkthrough

How to create a page variant from scratch: At first we create a page template to define the stup of our page:

1. Go to the B2C Responsive Application in the inTRONICS Channel.
2. Click on Content -> Page Templates.
3. Click on the New Button.
4. Name: New Template.
5. ID: NewTemplate.
6. Choose Standard Page as Template.
7. Click Apply.

You should now see your new template with predefined slots for Header, Content and Footer.

Templates act as a blueprint for the pages you see in the store. Recurring content like Header and Footer should be added as static content for the respective slots in order to create a basic and streamlined layout for your shop.

1. In the Header Slot click Assign and assign the Header component
2. Do the same for the Footer Slot

Now, we need a placeholder for the content slot. This is due to the fact that we want to add content there from within the page variant later on.

1. Click on the small symbol right to the Content Headline to create a Placeholder
2. Name: Content Slot
3. ID: ContentSlot
4. Click Apply
5. Click Back

The placeholder should now be listed in the outgoing placeholder section at the bottom of the screen.

To sum it up, we already created a new page template and added Header and Footer as static components to create a basic page layout. For the Content Slot, we created a placeholder.

Create a Page Variant

 We will now use our page template to create a new page variant.

1. Switch to Content -> Page Variants.
2. Click on New.
3. Name: New Page Variant.
4. ID: NewPageVariant.
5. As template, select the created New Template. By the way, you need to expand the tree to find it.

You should now see your newly created page variant. There is only one slot available - for content. This is where we just created a placeholder!

Assign Page Variant

We are now going to assign the page variant to a page. We will do this in the Design View so you can see the changes immediately.

1. Make sure you are still in the B2C Responsive Application.
2. Click on the Design View Tab on top of the screen.
3. In the lower left corner you will see a content tree of the page that is displayed.
4. The content tree gives you information on the actual page and the page variant that is assigned to it.
5. Click on Homepage.
6. You will now see some options on the right bottom of the screen.
7. Click on Page Variants and click on Assign.
8. Assign your newly created Page Variant New_PageVariant.
9. The page should now change instantly.

You should now see your new page in the storefront. There should be a Header and a Footer section and an empty Content placeholder

Add content to your Homepage

You can now use the drag and drop functionality of the design view to create your individual page. As soon as you grab a component, the suited slots and placeholders on the homepage are highlighted.

1. Drag an Image Component to Content Slot and assign an image ( you can use an image from the teaser folder).
2. Drag an HTML component to the Content Slot and add some text.

It is also possible to add content to the page variant directly in the backoffice. When you take a look at the page variant there, you will see the recently assigned components.