Create Product Layout

A new layout of the type “Product” is essential for your online shop.

          Create product layout

          Create a new layout and select the type “product”. This is important, because only sites based on product-layouts get the shop specific site settings e.g. price.

          Set the language of your site in the properties of the root module. After publishing, this language will be used for all shop modules.

          Create Layout with Type Product

          Layout Structure

          In this example the layout is structured in header, content and footer. The Header includes the logo and the navigation. The footer contains links and some additional information.

          The content contains the page block area. It holds the page-blocks you can add flexibly to the different pages.

          For the online shop you need at least the page blocks “Product detail”, “Product list” and “Shopping Cart”.

          Layout structure

          Page Block: Product Detail

          For the product sites nest several “Product Property” modules in a grid module. Rename the grid module to “Product detail”

          Depending which properties you want to show, add more modules to the grid.

          Page Block Product detail

          Afterwards simply select the desired product property within the module. The following are available:

          • Name
          • Description
          • Date
          • Link
          • Image
          • Price
          • Add to Cart
          Page Block Product Property Image

          Page Block: Product List

          To display a list of products on your homepage you have to build a product list.

          Put a “Product list” module into the Page Block Area. Then nest the „Product property” modules you want into the Product List.

          In edit mode, only the first page will show up.

          Page Block Product list

          Page Block: Shopping Cart

          For your online shop you need a site with a “Shopping Cart” module. That’s why you add a “Shopping Cart” module into the Page Block Area.

          Use selectors to style different parts of the shopping cart the way you like.

          Page Block Shopping Cart
          Built with pride in rukzuk © 2018 rukzuk AG