How to Add New Product List to an Existing App

January 10, 2023

If you already have your app on Jotform platform and you want to add a product list to the app so customers can buy products right from your app, this instruction will show you how to implement this.

  1. From the My Forms page, click on the arrow button in the top left corner and select My Apps.
How to Add New Product List to an Existing App Image-1
  1. Once you on the My Apps page, hover over an app where you want to add your product list and click edit.
How to Add New Product List to an Existing App Image-2
  1. After that, choose a place for your Product List, drag & drop the Product List element.
How to Add New Product List to an Existing App Image-3

Once you added it, you will need to create your product cards and authorize preferred payment integration.

Adding Product Cards to your Store

  1. Select your Product List and click on the Product Settings button.
How to Add New Product List to an Existing App Image-4
  1. Once Product List Properties opened, click on the +Add a New Product button.
How to Add New Product List to an Existing App Image-5
  1. Under the Basic tab of the product card, you can add the following parameters:
    • Name
    • Price
    • Description
    • Images
    • Autoscale Images
How to Add New Product List to an Existing App Image-6
  1. Under the Options tab, you can set up the following:
    • Add a Quantity Selector
    • Add a Product Option
How to Add New Product List to an Existing App Image-7

Setting up the Payment Method and Customer Information

The Product List doesn’t come with a payment method by default, so you’ll need to add the preferred payment getaway in the Product List’s settings.

  1. Open the Store Settings of the Product List element.
How to Add New Product List to an Existing App Image-8
  1. Under the Payment Method tab, you can set up the following:
    • Payment Integration
    • Customer Information
  2. Click the Add Payment Integration button to add a payment method for your Store.
How to Add New Product List to an Existing App Image-9
  1. Please select your preferred gateway. We will use Stripe as an example.
How to Add New Product List to an Existing App Image-10
  1. Connect your Stripe account. Once connected, you should see the button in Green that says Connected:
How to Add New Product List to an Existing App Image-11
  1. In the Advanced tab of the Stripe Integration Settings, you’ll find the Authorization Only toggle. Keep this on if you wish to charge customers at a later date, or toggle this off if you want to charge customers immediately. Also, there you can select when you wish to create Stripe Customer Records.
  2. Click the Save button to save the payment gateway.

After setting up your payment integration, you can choose the Customer Information you would like to collect from your customers on checkout.

How to Add New Product List to an Existing App Image-12

Setting up the Product Settings

In the Product Settings, you can set up the following options:

  • Product List Layout. You can choose Single, Two, and Three Columns.
  • Currency. Your Store will only display the currencies supported by your chosen payment gateway.
  • Enable Search. Make it easier for your customers to find a specific product using a search box.
  • Enable Sort. Allow your users to sort products on the form according to their name or price.
  • Use Decimals. To display decimals to both the product price and the total.
  • Decimal Separator. You can choose Point or Comma.
How to Add New Product List to an Existing App Image-13
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments:

  • Danielle Gines - Profile picture
  • Vykon Supplements - Profile picture
  • Daniel Zuniga - Profile picture
  • Sonya King - Profile picture
  • Mark Hess - Profile picture