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.

The Product Components Tool

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.

The Product Component Tool is comprised of three elements. Firstly, the Component Folder is used to keep the pages organized and sorted. Secondly, the Product List Area component is specifically designed to create elements for the product list page. Lastly, the Product Card Component serves a dual purpose: it's utilized not only to design product cards for the product list page but also to create elements for the product details page.

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

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 below. This example is explained in the example section at the bottom of the page.

Product Component Pages Configuration

The product card component and the product list area component come with straightforward configuration options. Here's how you can access and utilize them:

• Access Page Settings: Click on the desired page in the content pane, then click the Edit page in the bottom right corner to enter the page settings.
• Select a Dummy Product or Product Group: On both pages, choose a dummy product or product group. This is what will be displayed in Visual Studio when you're editing the component.
• Customize the Grid Layout: In the product list card component, you can select the grid's appearance in Visual Studio. Please note that this doesn't impact how the grid will appear in your online shop. The real grid's look is controlled in the product list item repeater.
• Choose a Default Theme: You can select a default theme for the component, similar to how you'd select a default page theme for standard pages like the front page.
• Adjust 'Space Around' Settings: The product card component can act as a column when chosen by the component's column. In the page settings for the product card component, you can adjust the 'Space Around' settings. This option is located at the bottom of the settings page.

Remember to hit Save and Close after making any changes.

Manual setup

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.

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

Product List Area

We will start by creating the product list area component.

1. Create a New page in the component folder.
2. Choose the Product list area component and name it Product list areal. Make sure it's published, under the Publication tab in the page settings.
3. In the General tab in Page settings, choose a Dummy product group.
4. Hit Save and close.
5. 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).

Product List Card

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. Enter the Edit page by clicking the pink circular button in the bottom right corner.
3. Give the Product card component the title: “Product detail”.
4. Choose a Dummy product.
5. You can also choose a Visual Editor grid layout; this is to help you visualize the result. You can still only design one card.
6. Make sure it's published, under the Publication tab.
7. Hit Save and close.
8. 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 the 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).

Product Details Card

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. Enter the Edit page by clicking the pink circular button in the bottom right corner.
3. Give the Product card component the title: “Product detail”.
4. Choose a Dummy product.
5. 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.
6. Make sure it's published, under the Publication tab.
7. Hit Save and close.
8. 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.

Product Component Content Columns

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:

• Description long
• Description short
• Specification
• Product slider/grid view

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.

Add to Cart

The Add to Cart column supports Stock validation notification. This does require some configuration which has been documented here.

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

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

You can:

• Name the paragraph.
• Choose the default behavior of the column
  • Show/hide add to favorites
  • Show/hide quantity selector
  • Show/Hide Unit selector - Choosing this allows customers to add units to the cart. It also shows the stock status of the units. This does require that the product has Units created in the backend. You can read more about this in our Ecommerce documentation.
  • Choose what happens when a product has variants - Hide, Disable or a modal selector. If a modal selector is chosen a section at the bottom will appear. Here you can link to a modal selector service page
• Choose the horizontal alignment
• Show/hide the button text
• Choose an icon for the column.
• Set the button size

Add to Download Cart

The download cart is a feature used for the Digital asset portal. Where the product files can be downloaded. Just like the order add to cart columns you have some configuration options:

You can:

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

Add to favorites

The add to favorites columns are used when designing for products to be added to the favorites list. With this column you have some configuration options:

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

Add to Quote Cart

The Add to Quote cart is used for our Quote request feature and will add the product to the customer Quote cart. For this column you have some configuration options:

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

Back in Stock Notification

The product component column called Back In Stock Notification is using the Back-in-Stock notification email feature. This column will let customers sign up for email notifications to inform them, that the product is back in stock. As notification system is email based, we've created a column specifically for emails as well. This columns mainly allows styling options:

For configuration you have the following options:

• Give the column a title
• Write a notified message - this will show after the customer has submitted for the notification
• Choose an icon for the button
• Set the horizontal alignment
• Choose the button size

Badges

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. The badges column has some different configurations:

You can:

• Choose what badge you want displayed.
• Choose the badge size
• Set the horizontal alignment

For general settings you must configure the different campaign badges, you can read more about that here

Components

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. For the component column you only have three options:

You can:

• Name the column
• Choose the source for the component
• Choose te layout

Default Product Image

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. The default product image gives you a few configuration options:

You can:

• Name the column
• Choose the image aspect ratio
• Set the image width
• Show/Hide an add to favorites button
• Show/Hide Alternative image on hover - If checked a section of where to get the alternative images from will appear. The alternative image is based on Assets categories

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

For styling options, you can choose a theme.

Name

The name column displays the product name. For configuration options you only have a few options:

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
• Set the horizontal alignment

Price

The price column will display the price of the product. The price column configuration is mainly about styling: 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
• Show/Hide Informative price

Price Table

Some products have different prices depending on the quantity of the product. For configuration options you can:

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

Product Component Slider

The product component slider is, as the name suggest, based on the product component tool to customize the design of the product slider. This means that you can design your own product slider cards, which then can be used in this product component slider; similar to how the product component list card works with the product list page. As this is a product slider based on components a lot of the settings will be the same as the Product slider/Grid view. For configuration options you can:

• Give the column a title
• Choose the source of the components for the slider
• Choose how many products you want to showcase
• Select what type the products for the slider should be based upon – The different types have been descripted in our documentation on the Product Slider/Grid view

The product component slider is, as the name suggest, based on the product component tool to customize the design of the product slider. This means that you can design your own product slider cards, which then can be used in this product component slider; similar to how the product component list card works with the product list page.

Selectable Variant Options

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.

For configuration you can:

• Name the column
• Hide/Show the group headers
• Choose the default layout of the variant groups
  • Button – Displays the variants as buttons. Choosing this layout will open a Button settings section. Here you can choose the button layout and the horizontal alignment
  • Dropdown – Displays the variants in a dropdown menu. This is especially useful when variant groups have a lot of options
• Show variant group options – This is for styling options only. No variant group sorting set up can be changed here

  • All – Choosing All will apply the default layout chosen above on all variant groups. Meaning no matter what type of different variant groups your products have they will all be displayed like the default design.

  • Selected variant group – Opens a Variant groups section where you can choose specific variant groups that should have a different layout than your chosen default. Adding new variant groups will open a pop-up where the specific group can be selected along with the layout of the specific variant group.
    As an example, should you want all variant groups except from “Colors” to appear as dropdown menus, you choose “Dropdown” in the default layout setting. You then choose “Selected variant group”. In the Variant Groups section you add “Colors” and change its layout to buttons

  • If you are using our Visual Editor to design, please remember that the example page only shows the variant groups belonging to the dummy product. If you are wondering why a specific variant group does not show on your example page, this might be the problem. Instead head to the actual page in frontend to see the changes

  • The order of the selected variant groups can not be sorted in these settings as it is based on the setup inProducts

  • If you add the same variant group twice only the first one will be shown

Choosing the button layout allows some further customization as the variant display type can be changed in the backend. This can be located at Settings -> Products -> Relations -> Variants -> Variant groups. From here you enter the variant group you want to edit.

To give an example, let's pick colors under variant groups.

In the Variant Display Type Select, you have four options:

1. Variant options name
2. Variant options color
3. Variant options image
4. Product variant image

The output of this setting will depend on the variants setup. Most of the data is collected from the Variants table. Here you can enter information about the name, color and variant option image. The product variant image will, as the name suggest, show mini images of the actual variant product.

Static Variant View

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. The static variant view you have a few configuration options:

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

Stock

The stock column will show the stock state of the product. You do not have that many options when configuring the stock column: You can give the column a name. For styling you choose the horizontal alignment.

Stock Locations

The stock locations column gives the customer information about stock status and location of a specific product. The column doesn't have a lot of settings: You can give the column a name. For styling you can choose the horizontal alignment.

More importantly this column does need backend configuration to work properly.

1. For this feature to work properly, you need stock locations configured. If you want addresses shown, you need to add a user with an address to the stock location
2. Configure product units on the specific product. This is used to show the stock status for different locations. This is done in the stock setting found in the ribbon bar on the product settings

Examples

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

Example: Product List Card

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 below.

For this example, we will have to create a custom component column containing the badge, specifications, and an 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 Swift tools -> Components folder
2. Create a New page in the components folder. Choose the Product card component
3. Click the Edit page button in the left corner and name it something like "Product list card"
4. Select a dummy product. In this example it's the Terry Velocity Short Sleeve Jersey
5. Select the light theme under styling
6. Set the Visual editor grid layout to one column
7. Go to the Publication tab, and make sure the Publication is set to Published
8. Hit Save and close.

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

1. Add three 1 column rows to the page
2. In the top column, add a Badges column
3. In the middle column, add a Specification column
4. In the bottom column, add a Add to cart column and select the badges you want

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 out this guide on how to set it up.

1. Click on the Product list card page in the Component folder
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.