Product Details

The Swift example website ships with a product details design which shows off a single product to a customer, with more information and more product images than shown on the product list (Figure 1.1).

It consists of a number of content elements created using ecommerce columns – such as:

  • A gallery of images
  • An main info panel with an add to cart button and essential information like:
    • Name
    • Number
    • Price
    • Variants
    • Etc.
  • A description panel
  • Etc.

Just like on the product list page the various columns are dependent on a paragraph with a Product Catalog for ViewModel making product data available on the page – in the standard setup this is done by the Products app paragraph. The overall idea is that this setup allows you a great deal of freedom to design beautiful product details pages suited to many different types of ecommerce solutions, since the data is simply made available for all the various ecommerce columns to use as you please.

When you’re using Swift you have three options

  • You can use the existing setup – in which case you  don’t need to do much
  • You can use the page presets as a starting point for creating a new product details page
  • You can do a complete manual setup

If you use the existing setup you don’t really need to do much – except for a few minor things:

  • The products app paragraph used to make data available for the other ecommerce columns allows you to select a dummy product to show when viewing the page using the visual editor. By default this is a bike, but since you will at some point remove the example product you should set this to something else.

If you want to explore more of the options available to you when using Swift you can use one of our page presets (Figure 3.1) to create a new product details page.

To create a product details page using a page preset:

  1. Open the backend and locate the Product list page
  2. Open a context menu for the product list page and click New page
  3. Under the Product Details section select a page preset

Each page preset contains a different preconfiguration of how the product details page can look and what it can contain – so it’s easy to find one that fits and base your details page on that.

If you want to setup the product details page manually – or want to see check whether an existing setup is correctly configured – follow this guide.

First you must create the product catalog which all other item types in the product details page are dependent on for data:

  1.  Create a new page using the Product details page type
  2. Open the visual editor and add a new empty row
  3. Add an empty column of the type Product catalog details app to the row – then configure it:
    1. Select a dummy product – this is the product shown when the product details page is being edited using the visual editor
    2. Switch to the App tab and attach a Product Catalog for ViewModel app
    3. In the app settings under Query select the Products.query
    4. In the app settings under Templates select the following templates:
      1. List: ProductViewList.cshtml
      2. Product: ProductViewDetails.cshtml
      3. Compare: CompareProducts.cshtml

Next set up navigation and urls:

  1. Close the visual editor and go to Properties > Options and open the Navigation-tool and configure it:
    1. Add the navigation tag ProductDetailsPage
  2. Under Properties > Options  also open the URL-tool and configure it:
    1. Select the Ecommerce provider
    2. Under parameters specify how you want the URLs to behave

Once the paragraph delivering data has been created and the navigation and urls have been configure, you can create the paragraphs which render the facets & product list content.

This is done using our various ecommerce columns – the following column types are typically used:

  • Product details gallery
  • Product details image
  • Product details info
  • Product long description
  • Product specification