How does the new layout designer look?
Below you see an image of the Editor. On your left, you have the layout with its placeholders, where all the changes are made. On the top right, you find the preview window that tracks every change you make to your layout. The layout preview gives a precise visualization of what the layout will look like with a specific product. The placeholders (@Model… ) on the Editor side will be filled up with the real product data in the preview window. In the bottom right you find the selection panel, where you can search for products.
We will go through the different parts of the Editor below:
Start customizing your layout by selecting a product from the search bar. The product you choose will be displayed in the preview folder. You can use either a product id, name, or category.
In the editor, you customize your layout and its placeholders. You can resize the actual image, change the color, size, font, and shape of the call-to-action button, scale the image and the button, or add a description to the placeholder. All your changes will be visible in the preview window.
If you need further options, you can always visit the header for Size, HTML, or additional Functions.
When you are done customizing your layout, you need to Save and Publish it. If you are not ready to Publish, save it and come back to it later.