Creating Products and Categories | SRBG_003
Make how-to guides like this one in a snap.
SW

Sam Webster

Created Sep 04, 2023

Creating Products and Categories | SRBG_003

This tutorial will introduce you to products and categories within Infigo.

Products come in various different types, ranging from basic Stock products (akin to pick-and-pack products) to fully customisable and design ready products using Infigo's template editor.

Here, we will create two of the simpler product types and group them together within a category. We'll also discuss some of the critical settings associated with these areas.

35
1

Click on Product Management

To begin, navigate to the area of Infigo where all of your products are managed.

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
2

Click on Add new

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.

#

Creating your first product

17 Steps
3

Create your product

Enter a name for your new product and select the type of product you wish this to be.

The default list contains Stock, Static PDF and MegaEdit type products. More are available, but require enabling before they appear in this list. We'll cover that a little later on.

For a Stock product that we'll select here, no additional configuration or inputs are required prior to clicking Create.

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
4

Product Details page

Your product is now created and you'll be taken to the Product Details page.

The product details page is used to design and populate the front-end landing page for that particular product.

Every product, regardless of type, will have a Product Details page, and a correspond front-end product landing page.

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
5

Check Show on home page

This is not a requirement, but will add the product to a special section on the home page called Featured Products.

During the development stage of your storefront, it gives easier access to your key products.

On a live site, it is used to draw attention to particular products.

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
6

Description Editors

There are several description editors on the product details page, allowing you to design different areas of the page.

Each of these will be populated by a Rich Editor input by default. However, like we've seen in previous tutorials, this can be switched to a Code Mirror Editor (for fluent HTML users) or the Content Template editor tools.

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
7

In our example, I'll populate text in some of these editors so we can determine their location on the product landing page.

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
8

Click on Save and Continue Edit

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
9

Click on View product page

This will take you to the front end of your site, directly to the landing page of the product currently being edited.

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
10

Product Landing Page

We see the beginnings of our product landing page.

At this stage quite basic due to a lack of input information, we can see the product name, along with some of the descriptions we have input.

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
11

Return to the admin area and click Pictures

Next, we will add one or more images to our product

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
12

Select an image from your computer using the upload tools

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
13

Click on Add product picture

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
14

Click on Save and Continue Edit

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
15

Navigate back to or refresh the product landing page

The image will now be displayed.

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
16

Return to the admin area and click on Display settings

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
17

Product display settings

This page can be used to change the design and layout of your product landing page for this product.

It contains settings such as changing the location of different description boxes and showing additional links.

We will not be describing these settings in detail as part of the rapid build tutorial series.

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
18

Click on (back to product list)

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
19

Click on Add new

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.

#

Creating a Static PDF product

11 Steps
20

Create a Static PDF product

Enter a product name and select Static PDF from the list of Product types.

An additional button appears asking you to upload the PDF associated with this product.

Static PDF products allow users to purchase a static piece of printed artwork which is not editable. For example, an artists print or a static brochure.

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
21

Select the PDF to include as the artwork for the product

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
22

Click on Create

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
23

You will be presented with a near identical product details page to that of the Stock product.

The product details page is still dedicated to the design of the product landing page

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
24

Check Show on home page

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
25

Click on Save and Continue Edit

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
26

Click on Static PDF config

Settings related to the specific product type can often be found at the top right of the product details page, accessed via a lighter coloured button.

These will take you to product type specific configuration options, for this particular product.

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
27

Static PDF product configuration

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
28

Click on Product config

You can return to the main product details page with this button.

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
29

Click on View product page

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
30

Static PDF product landing page

The default layout of Static PDF product landing pages will show the uploaded PDF as a preview, instead of the product image.

Everything else is largely the same.

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.

#

Enabling additional product types

2 Steps
31

Navigate to Admin Area Settings

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
32

Admin Area Settings

Under the Product Types section, you can enable other types of products available within Infigo.

With the exception of MegaEdit products, these will not be covered as part of the rapid build series, however many of them have additional tutorial resources available in the Infigo Academy.

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.

#

Creating categories

8 Steps
33

Navigate to Manage Categories

Categories are a means of grouping product that you wish to be associated with one another on your Storefront.

For example, you may have a "Stationary" category, or a "Brochure" category, containing related products.

Like products, categories have a customisable landing page.

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
34

Click on Add new

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
35

Category details page

You will be presented with a category details page, very similar to the product details page.

On this page you can input imagery and descriptions. As with product detail pages, you can also construct these pages utilising the Content Template functionality.

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
36

Check Show on home page

As with products, this isn't a requirement.

However it will make the category more easily accessible whilst we set up our Storefront.

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
37

Parent category

Categories can be sub categorised inside other categories (also known as Parent categories).

Use this option to specify the category you wish to have as the PARENT category (i.e. the next level up).

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
38

Input a category name

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
39

Upload a category image

This is not a requirement, however uploading no image will result in an "Image not found" placeholder on your storefront.

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
40

Click on Save and Continue Edit

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.

#

Add products to categories

5 Steps
41

Click on Products

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
42

Click on Add a new product

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
43

Select the products to be contained within the category

Products can be placed in multiple categories.

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
44

Click on Save

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
45

Click on Display settings

As with products, the layout of the category landing page can be modified using the Display settings tab.

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.

#

View your handiwork!

5 Steps
46

Click on Public store

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
47

If you selected "Show on home page" your category will be shown on the home page

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
48

Click on Show products in category Sample Category

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
49

Click on Show details for Sample Stock Product

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
50

Congratulations! You've created 2 new products and structured them inside a category!

This image is temporarily unavailable

Our servers may be down. Try waiting a few minutes before refreshing the page.
Well done!
Create how-to guides like this in a snap. Get Tango now.