How to design my Homepage

In this article, you will find out what options are available for creating your shop with the help of different layouts.

Create layout

As described in our documentation about shopping experiences, Shopware 6 offers the possibility to create different layouts. This tutorial is about how you can make your shop diversified and interesting by using different category layouts.
 
In order to be able to assign layouts to the categories, they must first be created. To do this, go to Content > Shopping Experiences and create a new layout there. You can find the available options for creating a layout here.

• You can start creating a new layout by clicking on the Create new layout button (1).
  
• Here you select the kind of layout you want to create. Since you need the layout for a category/listing page, select Listing page (2).
  

• At this point, you can determine the structure of your layout, which can also be changed afterwards.
  

• Next, you can design your layout as you wish. To do this, you can add new elements via the plus (1).
• As an example, the sidebar (2) is selected here, but you can also select many other block categories and objects. Information about the different possibilities of the layout editor can be found here.
• In the next step you can select which element you would like to add to your layout, whereby the product filter (3) has been selected here.
  

• You can then drag the block element you have selected (1) to any free space in your layout so that it is displayed as in the screenshot.
• When you are finished with your layout, you must save it by clicking on the Save button (2).

Assign Layout 

In order to assign the layout to a category, first you have to go to the module that can be found under Catalogues > Categories.
There you will find the appearance of your selected category under the Layout tab. Under Assign Layout you can assign the layout you created in the Shopping Experiences. You can also switch directly to the Shopping Experiences editor by clicking on the Create New Layout  button and create a completely new layout there.

As soon as you have selected a layout, all segments of the selected shopping experiences are displayed in the Layout area. Initially, the content of the layout is displayed like block groups. The type and number of blocks vary depending on the layout. Here you have the option of directly adjusting the content to be displayed without having to switch to the shopping experiences and create a separate category page for each category.

Assign the same layout with different content

If you have created a layout that should be seen in several landing pages with different content, you can duplicate and customize it.

To do this, go to Content → Shopping Experiences and click on the three dots at the desired layout and then on "Duplicate".

Now you have an exact copy of your previously created layout, which you can modify and assign as desired.