If you already have an app and want to expand its functionality, adding a product list is a great way to do it. This allows you to turn your app into a convenient space where customers can browse, select, and purchase products without having to navigate elsewhere.

Integrating a product list not only enhances the user experience but also streamlines the entire ordering process—from product discovery to checkout. Whether you’re offering physical items, digital downloads, or services, this feature helps you present your offerings clearly, organically, and accessibly.

With just a few steps, you can seamlessly incorporate a product list into your existing app and start accepting orders directly, making your app more dynamic, engaging, and business-ready.

Adding a Product List Element

Adding the Product List element to your existing app takes no time at all—here’s how:

1. In App Builder, click on the Plus icon on the left side of the page.

2. Now, in the App Elements menu, under the Payment Elements section of the Basic tab, click on Product List to add it to your app. Or drag and drop it into the area where you want it in your app.

Adding Product Items to Your App

The next step is to populate the Product List by adding your products—complete with names, prices, images, and any other relevant details—so customers can start browsing and placing orders right away. Here’s what to do:

1. In App Builder, click on the List icon on the right side of the Product List element.
2. Then, in the Product List menu that opens, under the General tab, click on Add Product at the bottom.

3. Next, under the Basic tab, set up these things:
   1. Name — Enter the name of your product.
   2. Price — Set the item’s price.
   3. Description — Provide a clear and engaging description of the product.
   4. Image — Upload one or more images to showcase your product.
   5. Auto Scale Images — Toggle this option on or off to automatically adjust your images so they fit neatly within the Product List layout. 

4. Now, go to the Options tab, and configure these things:
   1. Add Quantity Selector — Enable this option to let customers choose how many units of the product they want to purchase.
   2. Add Product Option — Use this to include product variations, such as size, color, or other customizable options.

That’s it! You’ve now successfully added a product item to your app.

Setting up the Store Properties

Customers won’t be able to complete the order process without a payment gateway, so make sure to set one up to enable successful transactions.

You can also enhance the experience by customizing the Product List layout in the product settings and tailoring the checkout page to collect important customer details for a smoother, more organized ordering process.

Adding Payment Connection

Adding a payment connection to the Product List only takes a second—here’s what to do:

1. In App Builder, click on the Credit Card icon on the right side of the Product List element.
2. Then, in the Store Properties menu that opens, under the Payment tab, click on Add Payment Connection.

3. Next, in the Payment Connections window that opens, select from one of the available connections—for example, Stripe and click on Next. 

4. Now, give the connection a name and connect it to your app.

5. Finally, click on Save to start using it on your app.

That’s it for adding a payment connection! Based on the payment gateway, you’ll see a set of options at the bottom of the Payment Connection section. 

Configuring the Product Settings

For a better visual presentation, you can choose to display your product items in different column layouts. You can also add a search box. Here’s how to get going:

While still viewing the Store Properties menu, go to the Product Settings tab, and configure these things:

1. Product List Title — Set a clear and descriptive title for your Product List to help customers quickly understand what you’re offering.
2. Product List Layout — Choose whether to display your items in a single, two, or three-column format to improve organization and visual appeal.
3. Enable Search — Let users quickly find specific products by adding a search bar to your Product List.
4. Use Decimals — Enable this option if your product prices include decimal values.
5. Decimal Separator — Select Point or Comma to separate whole numbers from decimals, based on your preferred or regional format.

Setting up the Checkout Page

The checkout page is a vital part of your app, as it’s where customers finalize their orders and provide essential information. By customizing your checkout page, you can collect key details such as contact information, delivery address, and special instructions—making it easier to manage orders efficiently while providing a better overall experience for your customers. Here’s how to set it up:

1. While still viewing the Store Properties menu, go to the Checkout Page tab, and select what you want to do:

• Express Checkout — Optionally enable this option to streamline checkout and let customers complete their orders faster with fewer steps.

2. Then, scroll to the middle part of the tab, and click on Add Element to add new fields to the checkout page.
3. Next, in the Dropdown menu that opens, select a field to add it.

You can also edit an existing field by simply hovering your mouse over the element and clicking the Pencil icon. You can also delete by clicking the Trash Can icon. But note that you cannot delete the Full Name and Email fields.

That’s it! You’ve successfully added a Product List element and set it up in your existing app. Your app is now ready to showcase products and accept orders in a more organized and user-friendly way.