Platfio Blog
Fundamentals

Products

Lesson 6• May 6, 2024

[Intro] In this lesson we’ll be discussing setting up the products for your app. Let’s get started.

[Editor] Click on the Platfio Editor, then click on 'Products'.

You will be directed to the ‘Product Collections Editor’.

Collections are used to keep all the products in your app organised. Every product must be placed in a collection.

To add a new collection. Click on the plus icon to access the ‘Product Collection Editor’.

Let's give our new collection a “Name”. Then click on save.

Once you’ve created a collection, we can add a product.

Click on the plus button at the top right.

Then give the product a name, description and price.

We can also add an image and an icon.

Now that we have our product set up, let's add it to navigation so our users can purchase it.

Click the helper at the lower right corner and click on the Windows icon. You can then choose where to add the product. This time we will add it to the Left Hand Side Menu.

If you want to set up shipping, you can go to Settings… Store… Shipping… Setup… and then toggle on Requires Shipping, then click save.

Go back to Shipping and then Methods, you can then set up the shipping method. Click the plus icon, and let’s say pick up instore and then toggle off the Requires Address and click save.

Next add another one. Let’s say standard shipping set the price and toggle on the Requires Address then save.

[Emulator] Next with our Emulator let’s test the product from the perspective of the user.

Open the left-hand side menu.

We will see here that the product we have added is available.

They can then change the quantity, then press Add To Order so that it will be added to the cart. Then proceed to checkout.

They can then choose between the shipping methods you created, the user can then also add their card details to pay for the product. Let’s choose Pick up in store, then press checkout.

[Manager] Now if we go to the Manager, we can go to Orders, and we can see the order that just came in. You can click on the order and review it, mark the order as completed. Then you can archive the order.

[Editor] If you want to customize the product further, you can go back to the product. Then under the Options tab, click on the plus button, then, set a Group... Category... Name... and Price... then assign those options to your product... We can then repeat this 3 more times to create other options for our product.

Then, click on the box beside it, to activate the options for your product.

[Emulator] And now if they select the product, they can choose those options when ordering.

[Outro] Thank you for watching!

Ready to build your app?

Put what you've learned into practice with Platfio.

More Lessons