Product Components

The product component tool is a tool that will help you customize the product list and product details pages. With this tool you will be able to design elements of the product list area, the product list card, and elements for the product details page. The tools consist of a components folder, a product list component area, and a product card component.

Through this documentation we will explain the concept of product components, the manual setup, a walkthrough of the content columns and their uses, and some examples to help explain the concept.

Figure 1.1 The product components tool in the Visual Editor

The purpose of the product components tool is to allow an easy customization of elements on the product list page and the product details page. Until now, the design of each card in the product list and the product details info column has been predetermined by our design team. As the tool has a lot of different opportunities, we recommend checking out our examples at the bottom of this guide, as these will help explain the different ways the tool can be used.

The tool consists of three elements. The component folder helps keep the pages organized and sorted. The Product list area component is for designing elements for the product list page. The product card component is both for designing product cards for the product list, but the same type of page is also used when designing elements for the product details page.

As Swift is based on a grid as seen in our Visual Editor (Figure 2.1), you previously couldn’t have vertically overlapped columns. This gave some design restrains.

Figure 2.1 The grid structure not using the product components tool

With the product components tool, you can design a new custom component column consisting of different content columns. As an example, this means that you can place a Group product poster, Group list, Selected facets, and Product list item component repeater in the same column on the product list page (Figure 2.2).

Figure 2.2 The structure when using the product components tool

This is also possible on the product list card. Maybe you sell products with tall product images, like wine bottles, and want the product image to be next to the information instead of above or beneath it, which would make the product card taller. With the component tool you can create a custom component column that could consist of the badge column, specifications, and add to cart column. This custom component column can then be placed next to the product image as shown on Figure 2.3. This example is explained in the example section at the bottom of the page. 

Figure 2.3 An example of how to use the product component tool on Product list cards

The product card component and the product list area component has some simple configuration. When clicking on the pages in the content pane and clicking the page icon in the top menu bar, you can enter the page settings of the pages. On both pages you should choose a dummy product or product group. This is the product (or group) shown in the Visual Studio, when editing the component. The product list card component also allows you to select how the grid should look in the Visual Studio. This does not affect how the real grid is shown on the online shop, as this is controlled in the product list item repeater.

You can also choose a default theme for the component. This works the same way as choosing a default page theme for “normal” pages like the frontpage.

As the product card component will act as a column when chosen by the components column, you can set the Space around settings in the page settings of the product card component. This is done at the bottom of the settings page. Remember to hit save and close.

The product component tool should be ready as default on the newest Swift solution, however if it is not or if you want a walkthrough of how to set it up manually – here is the guide.

The first step is to create a component folder. This should be done in the Swift tools folder.

  1. Add a new page to the Swift tools folder.
  2. Choose the components folder and call it “Components”. Make it hidden in menu.

The component elements: product list area component and product card component can only be created in the component folder

We will start by creating the product list area component.

  1. Create a new page in the component folder
  2. Choose the Product list are component and name it “Product list area”. Make it public.
  3. On the Page edit page, choose a dummy product group.
  4. Hit Save
  5. Go to the Paragraph edit page and enter the Visual Editor.
  6. Create the design you want for the product list area component. You can look at our examples at the bottom of the page to get some inspiration.

When all this is done, you have created the product list area component. To get this integrated with your current product list design you will have to use the column called Component instead of the ecommerce column you were using to display your product list (Product list: Compact view, Product list: Grid view or Product list: List view).

As mentioned, you might also want to design the product list card for the product list page. The product list card is the individual item in the product list. This is done by using the other type of component page: product card component.

  1. Create a new page in the component folder
  2. Choose the Product card component and name it “Product list card”. Make it public
  3. On the Page edit page you should choose a dummy product
  4. You can also choose a Visual Editor grid layout; this is to help you visualize the result. You can still only design one card.
  5. Hit Save
  6. Go to the Paragraph edit page and enter the Visual Editor.
  7. Create the design you want for the Product list card. You can look at our examples at the bottom of the page to get some inspiration.

When all this is done, you have created your product list card component. To get this integrated with your current product list design you will have to use the column called Component instead of the ecommerce column you were using to display your product list (Product list: Compact view, Product list: Grid view or Product list: List view).

Lastly you can also design the product detail card for the product details page. This is done by using the other type of component page: product card component.

  1. Create a new page in the component folder
  2. Choose the Product card component and name it “Product detail”. Make it public
  3. On the Page edit page you should choose a dummy product
  4. As this is for the product details page, it doesn’t make sense using a grid layout in the Visual Editor. Change the layout to a single column
  5. Hit Save
  6. Go to the Paragraph edit page and enter the Visual Editor.
  7. Create the design you want for the Product detail card. You can look at our examples at the bottom of the page to get some inspiration.

When all this is done, you have created your product detail card component. To get this integrated with your current product detail design you will have to use the column called Component instead of the ecommerce column you were using to display your product or make the customer add it to cart.

When designing the different components pages you have a range of different ecommerce columns. Some have already been described in our ecommerce column documentation, while others have been created for the Product components tool.

The columns already documented are:

Depending on which kind of page you are designing, Product card component or Product list area component, you will have different product component columns available. We have made a walkthrough of the different Product components columns below.

The add to cart column is used when you design either the product list card or product detail.

Figure 9.1 The add to cart column in action

You have some design options for the add to cart column:

Figure 9.2 The settings of the add to cart column

You can:

  • Name the paragraph
  • Choose the default behavior of the column
    • Show/hide add to favorites
    • Show/Hide favorites selector for master product
    • Show/hide quantity selector
    • Show/Hide Unit selector - This does require that the product has Units created in the backend. You can read more about this in our PIM or Ecommerce documentation. 
    • Choose what happens when a product has variants
  • Choose the horizontal alignment
  • Show/hide the button text
  • Choose an icon for the column
  • Set the button size

The download cart is a feature used for the Digital asset portal. Where the product files can be downloaded.

Figure 10.1 The add to download cart column

Just like the order add to cart columns you have some configuration options:

Figure 10.2 The settings of the add to download cart

You can:

  • Give the paragraph a name
  • Choose the Context cart
  • Set the horizontal alignment
  • Show/hide the button text
  • Choose the icon

The add to favorites columns are used when designing for products to be added to the favorites list

Figure 11.1 The add to favorites column

With this column you have some configuration options:

Figure 11.2 The settings of the Add to Favorites column

You can:

  • Give the column a name
  • Show/Hide favorites selector for master product
  • Choose the button style and size
  • Show/Hide the button text
  • Set the horizontal alignment for the column

The Add to Quote cart is used for our Quote request feature and will add the product to the customer Quote cart.

Figure 12.1 The add to Quote cart column

For this column you have some configuration options:

Figure 12.2 The settings of the add to quote column

You can:

  • Give the paragraph a name
  • Choose the default behavior of the column
    • Show/hide the quantity selector
  • Set the horizontal alignment
  • Show/hide the button text
  • Select an icon for the button

The advanced section is optional as the fields have been configured by default. However you do have the options to specify some settings:

  • Choose a context cart
  • Select a Variant list service page

The badge feature is a tool to show the customer if a product is new, on sale or included in other types of campaigns. In ecommerce components badges have gotten their own column however the Default product image column can also display them.

Figure 13.1 The badge column

The badges column has some different configurations:

Figure 13.2 The settings of the bagdes

You can:

  • Give the column a name
  • For general settings you must configure the different campaign badges, you can read more about that here

For styling options have a few options:

  • Choose the badge font size
  • Set the horizontal alignment

The general purpose of the component column is to create custom designed columns to be used however you want. This column is for example used when you have designed the product list card and want to include it on the product list area design. It can also be used, as shown below, to build more complex product list cards.

Figure 14.1 An example of the Components column

For the component column you only have to options:

Figure 14.2 The settings of the components

You can:

  • Name the column
  • Choose the source for the component

The default product image is a column that will display an image of the product. This could either be in the product list card and the product detail.

Figure 15.1 The default product image

The default product image gives you a few configuration options:

Figure 15.2 The settings of the default product image

You can:

  • Name the column
  • Choose the image aspect ratio
  • Set the image width
  • Show/Hide an add to favorites button
  • Show/Hide Favorites selecter for master product
     

In the badge section you must configure your badges, you can read our badge documentation here.

For styling options, you can choose a theme.

The name column displays the product name.

Figure 16.1 The name column

For configuration options you only have a few options:

Figure 16.2 The settings of the Name column

You can:

  • Give the paragraph a name
  • Choose the font size
  • Choose the heading level of the tag around the title. This will help on your SEO. You can read more about this in our SEO documentation
  • Set the horizontal alignment

The price column will display the price of the product.

Figure 17.1 The price column

The price column configuration is mainly about styling:

Figure 17.2 The settings of the price column

You can give the column a name.

For styling options, you can:

  • Select a theme
  • Choose the display size of the price
  • Set the layout
  • Choose the horizontal alignment

Some products have different prices depending on the quantity of the product. You can read more about the price matrix here.

Figure 18.1 The price table column

For configuration options you can:

Figure 18.2 The settings of the Product Table

You can give the column a name. For styling you can choose between a list or table for layout.

The selectable variant options column is for products with variants. As seen on the example below it will display the variant options for the product. This column is only usable when you are designing for the product detail page.

Figure 19.1 The Selectable Variant Options column

For configuration you can:

Figure 19.2 The settings of the Selectable Variant Options

You can name the column. For styling you can choose the horizontal alignment.

The static variant view column can be used to display the variant available for each product. As the Selectable Variant Options is used on the product details page, for the customer to select a variant of the product, this column is meant for the product list page. The static variant view column allows you to display the different variants on the product list page as seen on Figure 20.1:

Figure 20.1 The Static Variant View

The static variant view you have a few configuration options:

Figure 20.2 The settings of the Static Variant View

You can:

  • Write a title for the column. This will not be visible in frontend
  • Choose what group of variants to show and whether the group headers should be hidden or not
  • Choose how many variants to render

In the Styling section you can:

  • Choose the layout of the variants
  • Set the horizontal alignment

The stock column will show the stock status of the product.

Figure 21.1 The stock column

You do not have that many options when configuring the stock column:

Figure 21.2 The settings of the stock column

You can give the column a name. For styling you choose the horizontal alignment.

We have created some different examples to help visualize how the component tool can be used.

This example shows the possibilities for the Product list design. This is just one example of how to include custom component columns in the design of product list pages.

Figure 23.1 The product list area used on the product list page

For this example, we will create a custom component column containing a Group poster, Group navigation, Selected facets and the Product list item component repeater. This is done on the Product List area page in the component folder. The custom component column will then afterwards be implemented on the Product list page.

  1. Go to the Components folder in the Swift tools folder
  2. Click on the Product list area and enter the Visual Editor

As mentioned, the design will include several ecommerce columns.

  1. Add four 1 column rows to the page
  2. In the top row add a Group poster
  3. In the second row add a Group navigation
  4. In the third row add a Facets(selected) column
  5. In the last row add the Product list item component repeater. Make sure to choose the right product list card page as the List component source

Now the Product list area component column is done. To implement it to your Product list page, you must add the Component column on the Product list page. It should be replaced with the ecommerce column used to display the product list (Product list: Compact view, Product list: Grid View, Product list: List view).

  1. Click on the Product list page in the content tree. Enter the Visual Editor
  2. Delete the ecommerce column used to display the product list
  3. In the empty column, add the Component column and select the Product list area as Component source

When that is done, your Product list page will now include the custom designed Product list area component column.

This example is based on products with long product images. To create a more balanced product list card you might want a design with info, product number, etc on one side and the product image on the other side as seen on {figurereg}.

Figure 24.1 A product list card designed with the product component tool

For this example, we will have to create a custom component column containing the badge, specifications and add to cart. Later we will create a new custom component column containing the info custom component and a product image. Using the component tool this way allows us to build custom column inside other columns.

  1. Go to the Components folder in the Swift tools folder
  2. Create a new page in the components folder, choose the Product card component and name it something like “Product list card (left)”. Make sure it is public
  3. Go to the Page edit page and choose a dummy product.
  4. Let the Visual editor grid layout be one column
  5. Hit Save

Now we will have to design the left part of the Product list card.

  1. Click the Paragraph edit page and enter the Visual Editor.
  2. Add three 1 column rows to the page
  3. In the top column, add a Badges column
  4. In the middle column, add the Specification column
  5. At the bottom column, add an Add to cart column

Now we will design the actual Product list card. This is done on the Product list card. As this page is part of the manual setup guide, the Product list card page should already exist on your solution. Otherwise check the guide on how to set it up.

  1. Click on the Product list card page in the component folder and enter the Visual Editor
  2. Add two 1 column row and one 2 column row to the empty Product list card
  3. In the first 1 column row add a Name column
  4. In the second 1 column row we’ve added the specification column and chosen to only show the producer of the wine
  5. On the left column in the 2 column row add the column called Component. When this is added you must choose what Product card component you want shown. Choose the “Product list card (left)” you have just designed
  6. On the right column in the 2 column row add a Default product image column to display the product image

When this is done you should have something like the Product list card shown on the image above. As mentioned in the setup guide at the top, you must use the component column on the Product list page to implement this newly designed product list card.