Make Money Online using Python + Streamlit | Build a Sales Page to sell Digital Products 🤑

Category: Streamlit

Introduction

In this tutorial, I will guide you through building a sales page from scratch using Python and a bit of CSS. On this website, you can sell your digital products, just like in my example. The first section will briefly describe the product, and we will implement an animated call-to-action button that redirects to the checkout form. Additionally, we will list the main features, embed a video, create a FAQ section, and include a fully functional contact form. This website is live on the internet, and you can find the link in the description.

Setup the payment gateway

Before coding the website, we need to take care of the payment processing. A great solution for this is Stripe. Head over to stripe.com and set up an account. Once your account is set up, navigate to your dashboard, click on Payments, and then go to “payment links”. To create a new payment link, click “new” in the upper corner. Here, you can enter your product details and preview how the checkout form will look.

Stripe Payment Links Setup

Click on “Add a new product” and enter your product name and description. For this tutorial, I will ask for a coffee donation and set the price to 2 EUR. You can also add an image. After setting up the product, check the other options, and then switch over to the confirmation page. You can provide a download link or write a thank-you message for your customers.

Creating a Payment Link

Setup the project files

Now that the payment link is ready, let’s set up the project files. Start by installing Streamlit. Open your terminal or command prompt and type pip install streamlit pillow and hit enter. Pillow is needed to insert images into our web application.

Installing Streamlit and Pillow

On my Desktop, I’ve prepared an empty folder. Inside this folder, create another folder named “assets” for all the images. For now, paste one photo called “product.png” here. Next, create a styles folder and a new file called “main.css” within it. Leave the CSS file empty for now, but we will return to it later. Finally, create the main Python file and name it “streamlit_app.py”.

Setting Up Project Files

Import the dependencies

Open the “streamlit_app.py” file with your preferred text editor. First, import the necessary dependencies:

Import Path from pathlib.
Import streamlit as st.
Import Image from PIL.

With our imports in place, let’s set the paths to the different folders we’ve created.

Importing Dependencies

Path settings

To get the file path to the current directory (where the Python file is located), use the pathlib module. Construct the file paths for the assets and styles folders. We will also need the product image from the assets folder.

Setting Up File Paths

General settings

Next, set up some general settings. Define product-related information like the Stripe checkout link, contact email address, product name, tagline, and description. You can use markdown in the product description for formatting.

General Settings

Page configuration

Now, let’s configure the page by using st.set_page_config. Specify the page title, icon, layout, and sidebar status. You can use emojis for the page icon, and choose between wide or centered layout.

Page Configuration

Main section

Let’s code the main section of the page. Start with a header for the product name, followed by a subheader for the tagline. Create two columns, with the left column being larger than the right. Insert a blank line in the left column for padding, followed by the product description. For the checkout button, use an HTML link styled as a button, setting unsafe_allow_html to True. The right column will hold the product image.

Feature section

In the next section, list the product features. Create a dictionary with the feature images, headings, and descriptions. Loop over the dictionary to display the features in a two-column layout.

Demo video

If you have a demo video, you can embed it using st.video. Create a new section for the video, add a subheader, and insert the video link.

FAQ section

Create an FAQ section by making a dictionary of questions and answers. Loop over this dictionary and display the questions in expandable elements to show the answers.

Contact form

Add a contact form to your page using HTML within a markdown element. You can use a free service like “form submit” to receive messages from the contact form.

Add CSS

To style the page, write custom CSS in the “main.css” file. You can find a final CSS file on GitHub to copy. This will define styles for buttons, the contact form, and hide Streamlit branding.

Add Streamlit theme

Create a new directory named “.streamlit” and a file called “config.toml” inside it. In this file, set up your theme colors for background, elements, and fonts. Restart your Streamlit session to apply the changes.

Deployment

To deploy your website, consider using Streamlit Community Cloud or any web hosting service. I have a video on deploying a Streamlit site, which you can check out for more details.

Outro

That’s it! You’ve now built a functional sales page using Python and Streamlit. You can customize it further to fit your needs. Thanks for following along!