Picture of Kit Products | BG_052

Kit Products | BG_052

Here, we'll take a look at Kit products. Kit Products allow you to give the user the choice of adding multiple products to the basket through a single landing page. This can be useful in allowing the user to select different orderline quantities and can theoretically serve as an alternative to using a category. An example use case would be a product such as a jumper, with the option to select multiple sizes and colours in different quantities, and see the stock of each size/colour at a glance. When you're using a Kit Custom Product, you will be creating one parent product - the Kit Custom Product itself, and one or more child products that are linked to it.

Tutorial Video Transcript

00:00:05:15 - 00:00:05:23
Here.

00:00:05:23 - 00:00:08:08
We'll take a look at kit products.

00:00:08:08 - 00:00:08:18
Kits.

00:00:08:18 - 00:00:12:15
Products allow you to give the user
the choice of adding multiple products

00:00:12:15 - 00:00:16:03
to the basket
through a single landing page.

00:00:16:06 - 00:00:20:14
This can be useful in allowing these
to select different order quantities

00:00:20:21 - 00:00:24:21
and can theoretically serve
as an alternative to using a category.

00:00:24:23 - 00:00:29:11
An example use case would be a product
such as, let's say, an item of clothing

00:00:29:14 - 00:00:34:06
with the option to select multiple sizes
of multiple colors in different quantities

00:00:34:08 - 00:00:39:12
and to see the stock of each size
and color at a glance.

00:00:39:15 - 00:00:41:26
When you're using a kit custom product,

00:00:41:26 - 00:00:47:25
you will be creating one parent product,
which is the kit custom product itself,

00:00:47:27 - 00:00:53:10
and one or more child products
that are linked to it.

00:00:53:12 - 00:00:56:14
Firstly, we must ensure
that the kit product is activated

00:00:56:14 - 00:01:02:23
on our particular storefront,
so we do this via the admin area settings.

00:01:02:26 - 00:01:04:25
So here
we just have a list of product types

00:01:04:25 - 00:01:06:20
that are activated on our storefront.

00:01:06:20 - 00:01:09:29
Make sure that you have Kit selected

00:01:10:02 - 00:01:13:02
and then click on Safe.

00:01:13:06 - 00:01:15:01
Next will create a new product

00:01:15:01 - 00:01:20:05
as normal via
our product management screen.

00:01:20:07 - 00:01:23:05
I just go into that screen
and click Add new upon on the top right

00:01:23:05 - 00:01:30:01
hand side
will add a new name for our product.

00:01:30:03 - 00:01:33:03
I'm just identifying this
as the parent product for our kit.

00:01:33:07 - 00:01:34:18
You can name this whatever you like.

00:01:34:18 - 00:01:39:10
You don't need to have any specific text
within the name of that product,

00:01:39:12 - 00:01:42:06
and then we're just going to go
to this product type dropdown.

00:01:42:06 - 00:01:45:01
Click on custom that releases a

00:01:45:01 - 00:01:49:08
the option for you to choose some of the
or between the custom products.

00:01:49:10 - 00:01:52:06
And in there I can select kit

00:01:52:09 - 00:02:00:10
and then I'll click create.

00:02:00:12 - 00:02:02:12
You will
then be taken to the standard product

00:02:02:12 - 00:02:07:14
detail screen, which you'll be familiar
with from other product types, most likely

00:02:07:17 - 00:02:07:27
in order

00:02:07:27 - 00:02:12:04
to get to these specific settings
to do with our kit product configuration.

00:02:12:06 - 00:02:17:15
We're going to go up to the top right of
the screen and click on kit config.

00:02:17:18 - 00:02:20:11
Now we'll go through all of the options
that are available on here.

00:02:20:11 - 00:02:24:01
So first, want to draw your attention
to the available products list

00:02:24:04 - 00:02:29:12
down on the bottom left.

00:02:29:14 - 00:02:32:22
This allows us to add different products
to put inside the kit.

00:02:32:24 - 00:02:34:07
So you can multi select in here.

00:02:34:07 - 00:02:37:21
So you can select as many
or as few products as you like.

00:02:37:23 - 00:02:40:02
Click on the right arrow

00:02:40:02 - 00:02:43:02
icon to move them
to the assigned products list

00:02:43:06 - 00:02:46:14
And what you'll then see is that once
those products are in the assigned product

00:02:46:14 - 00:02:50:10
list, you'll get additional details
to do with those assigned products.

00:02:50:12 - 00:02:56:05
Further down the screen

00:02:56:08 - 00:02:58:23
now in our
example, we've added a range of products

00:02:58:23 - 00:03:03:02
as child products will assign
a different available option

00:03:03:08 - 00:03:07:12
to each of those child products and review
this on the front end of the storefront

00:03:07:14 - 00:03:10:12
to see how those settings
affect the product,

00:03:10:12 - 00:03:13:17
appearance and interactivity.

00:03:13:20 - 00:03:15:16
So of course, in a realistic scenario,

00:03:15:16 - 00:03:19:14
you can select multiple of these options
per child product.

00:03:19:16 - 00:03:23:20
In this example,
I'm just going to select one for each year

00:03:23:25 - 00:03:27:28
so it can be nice and clear about what
it's doing.

00:03:28:01 - 00:03:31:13
Now, briefly
talking through what these options do.

00:03:31:15 - 00:03:34:10
And then of course, we'll see them
on the frontend in a little moment.

00:03:34:10 - 00:03:37:06
So first of all, we have optional.

00:03:37:06 - 00:03:39:19
So if enabled,
the user will be able to choose

00:03:39:19 - 00:03:40:16
whether or not they want

00:03:40:16 - 00:03:47:12
to add this product to the basket
so it doesn't have to be part of the kit

00:03:47:15 - 00:03:49:02
can change quantity.

00:03:49:02 - 00:03:51:12
So if enabled,
the user will be able to decide

00:03:51:12 - 00:03:57:25
how many of these items
they would like to add to the basket

00:03:57:28 - 00:03:58:22
promo.

00:03:58:22 - 00:04:02:06
If enabled, this product
will always appear before the products

00:04:02:11 - 00:04:04:06
which do not have this enabled.

00:04:04:06 - 00:04:08:03
Regardless of the display order
which has been specified.

00:04:08:06 - 00:04:12:06
If you have multiple promo products,
then they will all load first

00:04:12:12 - 00:04:15:07
and will respect the display order
of other

00:04:15:07 - 00:04:19:10
promo products.

00:04:19:12 - 00:04:20:11
We've got price.

00:04:20:11 - 00:04:25:19
So if enabled, the price of this product
will be shown in a price column.

00:04:25:21 - 00:04:27:24
And you must note
that this column is hidden

00:04:27:24 - 00:04:32:25
if there are no products
with this setting enabled SKU.

00:04:32:26 - 00:04:36:09
So if enabled, the SKU of the product
will be shown in the SKU column.

00:04:36:16 - 00:04:40:11
And again, that column will not be visible
if none of the products have that

00:04:40:11 - 00:04:44:09
option selected.

00:04:44:12 - 00:04:45:25
We have short description.

00:04:45:25 - 00:04:47:05
So if enabled, the short

00:04:47:05 - 00:04:50:29
description of this product will be shown
in the short description column.

00:04:51:01 - 00:04:54:22
And again, that will be hidden,
if not required.

00:04:54:25 - 00:04:56:08
Product Details Link.

00:04:56:08 - 00:05:00:06
So a link to the landing page for
this product will be shown in a separate

00:05:00:06 - 00:05:03:29
link column again,
which will be hidden, if not required.

00:05:04:02 - 00:05:06:07
And then we have stock message.

00:05:06:07 - 00:05:09:24
So if enabled, the stock message for this
product will be shown in the stock

00:05:09:24 - 00:05:10:26
message column.

00:05:10:26 - 00:05:14:07
And again,
that will be hidden, if not required.

00:05:14:09 - 00:05:16:28
Now, I've mentioned already
that we have display order here.

00:05:16:28 - 00:05:18:25
It isn't necessary to do this,
if you don't mind

00:05:18:25 - 00:05:20:08
which order there displayed.

00:05:20:08 - 00:05:23:01
But it works the same as the display order
everywhere else.

00:05:23:01 - 00:05:24:08
You've seen in Infigo.

00:05:24:08 - 00:05:29:24
So the lower the number,
the higher up the list, it will appear.

00:05:29:27 - 00:05:30:09
Once that's

00:05:30:09 - 00:05:34:04
all configured to the top and click,
save or save and continue.

00:05:34:04 - 00:05:36:15
Edit.

00:05:36:15 - 00:05:37:23
Now, before we leave this page,

00:05:37:23 - 00:05:41:01
I want to talk a little bit
about grouping.

00:05:41:03 - 00:05:44:01
It's useful to group order line
so that you can easily

00:05:44:01 - 00:05:48:05
keep track of which products
were added by a particular kit

00:05:48:07 - 00:05:51:26
and what they were added alongside.

00:05:51:28 - 00:05:54:25
You can accomplish this
with the Enable grouping option

00:05:54:25 - 00:06:00:00
is here.

00:06:00:02 - 00:06:02:25
Underneath here you've also got
a couple of additional options.

00:06:02:25 - 00:06:07:17
One is group name available on product
landing page two that allows your users

00:06:07:17 - 00:06:11:07
to give the group a specific name
before adding to the basket.

00:06:11:10 - 00:06:17:16
And then the same with a description.

00:06:17:19 - 00:06:21:14
Let's go ahead and save that.

00:06:21:16 - 00:06:23:08
Now I'm going to actually go
and take a look at this

00:06:23:08 - 00:06:27:18
on the front end of our storefront to see
what these options have actually done.

00:06:27:20 - 00:06:32:09
So we do this by going back
to the main product landing page details.

00:06:32:10 - 00:06:35:18
So if I go back to product config,

00:06:35:21 - 00:06:39:27
then I can click view product page.

00:06:39:29 - 00:06:40:25
Now please do note

00:06:40:25 - 00:06:43:25
at the time of recording,
one or two of those options

00:06:43:27 - 00:06:47:09
don't quite work as expected,
but this will be rectified.

00:06:47:11 - 00:06:49:16
Okay, so what you can see
over on the right hand side

00:06:49:16 - 00:06:53:08
is that all of the child products,
along with their associated options,

00:06:53:08 - 00:06:57:24
will be visible on the landing page
of the specified parent product.

00:06:57:26 - 00:07:00:29
You see that we have the option to search
between different products within a kit

00:07:01:00 - 00:07:04:00
if we have a great number, for example.

00:07:04:05 - 00:07:07:08
And then based on what we've specified,
we'll have different columns

00:07:07:08 - 00:07:08:21
available in this chart.

00:07:08:21 - 00:07:11:29
We'll have the ability to select or select
certain items,

00:07:12:01 - 00:07:14:25
change the quantity on certain items.

00:07:14:25 - 00:07:17:03
And then of course, down at the bottom,
we have the ability

00:07:17:03 - 00:07:30:08
to specify
a group name and group description.

00:07:30:10 - 00:07:30:29
Once you're ready,

00:07:30:29 - 00:07:35:05
go ahead and add this to basket.

00:07:35:07 - 00:07:38:18
With a grouping applied,
all of the child products will be grouped

00:07:38:18 - 00:07:43:05
underneath an entry of the parent product
within our basket.

00:07:43:07 - 00:07:45:22
If we want to see more details
on what was included

00:07:45:22 - 00:07:48:12
under this parent product
as part of this kit,

00:07:48:12 - 00:07:51:01
we can go ahead and click expand.

00:07:51:01 - 00:07:53:29
You also note on the parent level
that we've got the name

00:07:53:29 - 00:07:57:13
and description of the group
as well as a total of the items

00:07:57:13 - 00:08:01:16
contained within it.

00:08:01:19 - 00:08:04:19
now we'll take a look
at how this waste order

00:08:04:25 - 00:08:09:15
appears to both the customers on their
My Orders page and to administrators

00:08:09:15 - 00:08:14:26
viewing shared print operations.

00:08:14:28 - 00:08:16:02
That order has been placed.

00:08:16:02 - 00:08:20:02
I'm now going to go as my customer to my
my orders page.

00:08:20:02 - 00:08:22:29
So this is the page
that the customer will be able to see

00:08:22:29 - 00:08:28:06
and then expand that particular order.

00:08:28:08 - 00:08:30:28
So this is a view seen in the my order
screen.

00:08:30:28 - 00:08:37:06
Each child is listed independently

00:08:37:08 - 00:08:38:19
on the administrator side.

00:08:38:19 - 00:08:43:20
Each of the child products is listed as
a separate job in shared print operations.

 

Incomplete
Step by Step Guide

Kit Products | BG_052

Here, we'll take a look at Kit products.

Kit Products allow you to give the user the choice of adding multiple products to the basket through a single landing page.

This can be useful in allowing the user to select different orderline quantities and can theoretically serve as an alternative to using a category.

When you're using a Kit Custom Product, you will be creating one parent product - the Kit Custom Product itself, and one or more child products that are linked to it.

Creation Date: Jan 04, 2024
Created By: Sam Webster

1. Navigate to Admin Area Settings

Firstly, we must ensure that Kit products are activated on our Storefront. We do this via the Admin Area Settings menu.

Navigate to Admin Area Settings

2. Click on Kit Enabled

Click on  Kit Enabled

3. Click on Save

Click on Save

4. Navigate to Product Management

Next, we'll create a new product as normal, via our Product Management screen.

Navigate to Product Management

5. Click on Add new

Click on Add new

6. Select Custom as the Product Type, the Kit as the Custom Product Type

Select Custom as the Product Type, the Kit as the Custom Product Type

7. Enter a name for the product

Here, we are creating the PARENT product. Later on, we will assign other products to this parent product (child products).

These child products can be a range of product types. Only the parent product is required to be a kit product.

Enter a name for the product

8. Click on Create

You will then be taken to the standard product details screen, which you will be familiar with from other product types.

Click on Create

9. Click on Kit config

Use this button to access settings specific to the Kit product type.

Click on Kit config

10. Select the products to add to the kit

Towards the bottom of the Kit Config screen, you will see a list of available products to add to it.

Select the product(s) you wish to add to the kit.

Select the products to add to the kit

11. Click on >

This will add the products to the kit.

Click on >

12. Underneath this menu, you will see a separate set of options appearing relating to each of the child products

In our example, we have added a range of products as child products. We will assign a different available option to each child product and review this on the front end to see how the settings affect the product appearance and interactivity.

Underneath this menu, you will see a separate set of options appearing relating to each of the child products

13. Optional

If enabled, the user will be able to choose whether or not they want to add this product to the basket.

Optional

14. CanChangeQuantity

If enabled, the user will be able to decide how many of this item they would like to add to the basket.

CanChangeQuantity

15. Promo

If enabled, this product will always appear before the products which do not have this enabled, regardless of the display order. If you have multiple "Promo" products, then these will all load first and will respect the display order of other "Promo" products.

Promo

16. Price

If enabled, the price of this product will be shown in the "Price" column. Note: this column is hidden if there are no products with this setting enabled.

Price

17. SKU

If enabled, the SKU of this product will be shown in the "SKU" column. Note: this column is hidden if there are no products with this setting enabled.

SKU

18. Min/Max

If enabled, the stock message for this product will be shown in the "Stock message" column. Note: this column is hidden if there are no products with this setting enabled. 

Please also note that if neither "Display stock availability" nor "Display stock quantity" are enabled on at least one child product, this column will remain hidden.

Min/Max

19. Short Description

If enabled, the short description of this product will be shown in the "Short Description" column. Note: this column is hidden if there are no products with this setting enabled.

Short Description

20. Product Details Link

If enabled, a link to the landing page for this product will be shown in the "Link" column. Note: this column is hidden if there are no products with this setting enabled.

Product Details Link

21. Stock Message

If enabled, the stock message for this product will be shown in the "Stock message" column. Note: this column is hidden if there are no products with this setting enabled.

Stock Message

22. Display Order

This column allows you to control the order in which the child products are displayed on the parent Kit product's landing page.

Display Order

23. Click on Save and Continue Edit

Click on Save and Continue Edit

24. Grouping

It's useful to group orderlines so that you can easily keep track of which products were added by the kit, and what they were added alongside. You can accomplish this with the Enable Grouping button.

Enable "Group Name available on Product Landing Page" to allow your users to give the group a name.

Enable "Group Description available on Product Landing Page" to allow your users to give the group a description.

Grouping

25. Click on Save and Continue Edit

Click on Save and Continue Edit

26. Click on Product config

Next, let's take a look at the product on the front end.

Click on Product config

27. Click on View product page

Click on View product page

28. Kit Product

All of the child products along with their associated options will be visible on the landing page of the parent product.

Kit Product

29. If grouping has been specified, you can input a group name and description in the fields shown.

Once products within the kit have been added to the basket, they will be grouped and will display these details (we will see this shortly).

If grouping has been specified, you can input a group name and description in the fields shown.

30. Click add to basket

Click add to basket

31. With grouping applied, all the child products will be grouped under the parent product within the basket

With grouping applied, all the child products will be grouped under the parent product within the basket

32. Click on Expand

This will show you details on all of the products added as part of that group, under the parent kit product's umbrella.

Click on Expand

33. Let's proceed through the checkout and place an order

We'll take a look at how this placed order appears to both the customer in their My Orders page, and to administrators viewing Shared Print Operations (SPO).

Let's proceed through the checkout and place an order

34. My Orders view

This is the view seen in the My Orders screen. Each child product is listed independently.

My Orders view

35. SPO view

On the administrator side, each of the child products is listed as a separate job in SPO.

SPO view
Alternate Search Terms