Products can be listed, either through a filter view grid, using a list view grid (category menu) or as grouped products (by category). Products will be listed in alphabetical order.
Products can be found by selecting 'List' in the control panel and the storage folder in the page tree (in this example the products are devided into separate forlders). You can add a new product by clicking the plus icon in the section ‘Product’. The content in the product is dynamic, meaning that if you leave a field empty, it will not show up in the frontend (unless an attribute has been set as a required field, and then it will not be possible to save the product without filling out this field). (3.1)
In the ‘General’ tab you will find the mandatory ‘Name’ field (1) showing as the title of the product. The ‘SKU’ (2) stands for article number, and is a field that can be left blank. The ‘Description’ field (3) contains the body text of the product. (3.2)
The second tab, ‘Categories’, is where you set which categories the product should belong to. Note that for the filter view option, it is very important to also select the parent category, otherwise the product will not show in the filtered view. (3.3)
After you have selected the categories, make sure to save the product, to apply the correct attribute sets. Now you will be able to see each attribute set as a separate tab in the product, and in this example attributes are separated into Options and Car information. Fields that are not required, can be left empty to exclude them from the frontend. The attributes will be listed in a table below the product description, in the frontend.
The example tab 'Options' shows the attribute types Dropdown (1) and Multi select (2). (3.4)
The example tab 'Car information' shows attribute types Input (1), Checkbox (2) and Date Time (3). (3.5)
Product images are added below the tab ‘Images’. Depending on what type of listing function, the image can have different sizes in the frontend. Keep in mind that product images will look their best with a white or transparent background. For the product single view, it is possible to add an unlimited number of images per product, they will be listed 7 images per row, and these will show in a slider. You can add a title in the title field, but no other field will have effect on the frontend. (3.6)
If you have multiple images, each image has 2 checkboxes in the backend. One for ‘Use in product listing’ (1) and the other one for ‘Main image in single view’ (2). This means that you can decide which images to use in the different views. The listing boxes for products has a max height/max width setting, so it will never crop the images. But if you have a very high portrait image it will be shown as very little in the box, due to adjusting to the max height. You should also add an 'Alternative text' (3), to ensure a good validation of the website.
On the right hand side of each added image, you have a number of icons to handle them. See image information, edit metadata, remove image, hide/un-hide and move (3.7)
The tab ‘Relations’ handles related products, subproducts, accessories, files and links.
For the first two options, selection is made in the right hand field, by clicking the titles, and adding to the left field. All of these types are based on regular products elements. Related products (1), will be listed below the product information, in the frontend. Subproducts (2) refers to having a base product, and then listing for example different types of sizes of a product. The subproducts are not clickable individually. Accessories are listed as separate products, below product information. (3.8)
Files (1) are added by clicking ‘Add file’, and then selecting files from the filelist. If you don’t wish the file name to be the link text on the frontend, you can use the Title field to specify the link text. You can also use the Description field, to add a short describing text of the file. Both fields are activated with the checkboxes. There are no limits to number of files, and they will be listed in a separate section in the product view.
Links (2) are added by clicking ‘Create new’ in the ‘Links’ section. The link is created by adding Name, Link address and a Description which is optional. The name will show as the link text on the frontend. There are no limited number of links. (3.9)
The ‘Metadata’ tab, containing the search engine oprimization (SEO), has regular metadata information, including description (1), keywords (2) and Alternative text (title-tag) (3). The field 'Speaking URL pat segment' (4) allows you to change the address for the product, and is left blank to use the title of the product. (3.10)
Finally the ‘Access’ tab has the publishing option, but also a checkbox for excluding single view of a product. (3.11)
On the frontend, the different options are displayed as follows; 1. Product title, 2. Product description, 3. Listing of attributes, 4. Images, 5. Links, 6. Files and 7. Related products. (3.12)