Join Makerpad today

Makerpad is home to over 9,000 folks. Access members-only content, build real projects & get expert support
Tutorials
/
🛍 Simple eCommerce mobile app with Glide

🛍 Simple eCommerce mobile app with Glide

Link to Demo

Today we live in a time where it has never been easier to set up a business and start taking payments from people who want to buy what you have to sell.

Through incredible products like Glide Apps you can build markerplaces, directories, discovery and social apps without the need for any coding knowledge at all.

In this tutorial I will show you how to set up a simple store and integrate Stripe so you now start earning from your own apps.

What you'll need before.

  • Glideapps Account
  • Pro Glide App
  • Stripe account
  • Google Drive + Google Sheets

Step 1 - Setting Up Google Sheets With Glide.

The first thing we want to do is go to Glide and sign into your account. If you are going to use an existing app and just want to setup payments then skip ahead to Step 2 of this tutorial. If however you're going to start a brand new app then follow along. For new apps let's head over to Google Sheets and Create A New Sheet. Open the sheet and give it a name so as not to confuse things.

Next we'll want to have two worksheets, one called Home and the other Products. Next on the home worksheet add the following column headers, Name, Tagline and Image. We'll use these for our applications Home Screen. Fill in these now if you would like (use a Google Drive sharable link for the image URL as it works nicely with Glide).

Now move the Products sheet. Add some more headers which will tell Glide about our products. We'll want the following, Title, Description, Image, SKU and Price.

Once that is done head back to Glide and click '+New App'. You should now see a pop up which will ask you to connect your app to the Google Sheet we just created. Once you've done this you should see the app builder in front of you containing the Home sheet info and have the 'Layout' tab selected on the left with some information. Drag and drop the components on the right to organise the information how you wish adding a Shop button pointed at the Products screen.

When you're done move onto the next step.

Step 2: Adding Products And Integrating Stripe.

For this next step lets go back to Google Sheets and add in some product information. Each field should be self explanatory and as we did before make sure you are using Google Drive sharable links for your Image URL's as they play nicely with Glide.

Once you've done this, head back to your Glide app and reload your sheet to pull in the new information. Open the product screen and modify the information layout as you see fit. I went for Image, Title then Price.

Next, add the Buy Button by navigating to a newly added product and clicking the blue + icon next to the Components header on the right of the screen. Search or scroll to find the Buy Button and upgrade your application if necessary. Now you should be able to add a Buy Button and upon clicking for the first time you will have the option to Connect Your Stripe Account. Once you've done this, clicking your Buy Button should present you with the fields necessary to checkout and purchase your item natively inside the app.

That's it!

Share your app with friends or users and start collecting money for whatever it is you're selling from right inside of your app!

I hope you've enjoyed this tutorial and let me know if there is anything you would like us to cover in future tutorials.

Tom

You must be a member to view the full lesson

Join Makerpad today

Makerpad is home to over 9,000 folks. Access members-only content, build real projects & get expert support

If you'd like this template, message @bentossell on Slack with your email for the account to send this template.

Ready to get started?

Join the community and start turning your ideas into solutions