How to create an e-commerce website with Durable

Service entrepreneurs already understand how easy it is to start a business with Durable’s AI website builder. But did you know you can use Durable to create an e-commerce website so you can sell physical and digital products online? All you have to do is generate a website using artificial intelligence and add in a link from a secure service called Stripe. Soon you’ll be stocking, selling, and shipping your way to e-commerce excellence. Here’s how to do it, step-by-step.

For these instructions, we’re going to look at an example website created by Durable co-founder Ross, where he can sell camera equipment. That guy really loves cameras.

For reference (and inspiration!), here's a link to his website.

And if you'd rather listen to Ross's soothing voice guide you through the process, he put together an in-depth video right here:

‍

1. Generate a Durable website

Head on over to the AI website builder, enter your business type and your business name, then click next and watch the artificial intelligence go to work on your new website.

When it’s ready, feel free to make any tweaks or customizations using the website editor. Add your logo, photos specific to your business, and anything else that you feel is critical to have on your homepage.

If you already have a Durable website, SKIP THIS STEP and log in to your dashboard instead.

2. Create a Stripe account

Visit Stripe and create an account.

In most cases, getting set up on Stripe takes just a few minutes.

3. Add a product to Stripe

Log in to your Stripe account dashboard. Click Payments from the menu at the top of the screen.

Click CREATE A PAYMENT LINK. Enter a name for your product, then click ADD. You then have the opportunity to enter product details, an image of your product, and the price. When you’re done, click ADD PRODUCT.

In the top right corner, click the CREATE LINK button. On the next page you’ll see a unique link to this specific product. You’ll need this link in the next step, so keep this tab open.

4. Create a product page

The most basic part of any e-commerce website is a single product. So we’ll start by creating a page for one product that you want to sell. 

Make sure you are logged in to your Durable dashboard. Click WEBSITE from the left menu, then click the EDIT WEBSITE button on the top right.

From the drop-down menu at the top right of the website editor, click the CREATE button.

Enter a name for your product as the page title. This is where you can also add information about your page that will help your website appear in search results but you don’t have to worry about that right now. Click SAVE.

Your new product page will have the same header, menu, and footer as your homepage, but the middle section will be blank and ready for your input. Click ADD SECTION and choose the TEXT + IMAGE block.

Next, move your mouse over the block and click the edit icon (pencil) to open the TEXT + IMAGE menu.

Enter the name of your product, details about it, and pricing in the CONTENT section. Make sure the information you enter here matches the details you entered in Stripe.

Add a photo of your product. If you don’t have product photos yet, no worries, you can use the SUGGEST button from the TEXT + IMAGE menu and the AI will find something suitable to use for now. If you do have photos, make you use the same photo here as you did in step three.

Turn the BUTTON toggle on. Give the button a great name like BUY or BUY NOW. Under LINK, choose the EXTERNAL option and paste in the unique Stripe link from step three.

Click SAVE. You’ve now added a product page with a link to Stripe so that customers can purchase from your website. Way to go!

5. Create a shop page

Your website needs a home for your products. So we’re going to create their very own shop page. From the drop-down menu at the top right of the website editor, click the CREATE button.

Add a name for your shop page. You might call it CAMERAS like Ross did with Shuttershop, or even just SHOP if this will be your only shop page. Under SHOW LINK, make sure that HEADER and FOOTER are toggled on so that visitors to your website can navigate to your shop page. Click SAVE.

In the blank area of your shop page, click ADD SECTION and choose the LIST block.

The AI will automatically generate three entries in the list block, but you'll probably want to manually add the specific products you'll be selling. You’ve just created your first product page. Well done!

6. Add products to your shop page

Now it’s time to populate your shop page with your product. Start by moving your cursor over the list block and click the edit icon (pencil) to open the list customization menu.

From this menu, you can customize the look and feel of your product listings. Use the toggle buttons to choose which features you want for each listing—we recommend choosing IMAGE, HEADING, CONTENT, and BUTTON. You can also choose how the text will be aligned, and the background color.

Under LIST ITEMS in this menu, you’ll see three placeholder entries that were generated by the AI or that you uploaded. Add more products using the ADD LIST ITEM button. 

Click the edit (pencil) icon next to each product to customize it. Add the same photo and title that you used in the previous steps. You also may want to write a short description of the product here. Include a button with a custom label, like DETAILS, VIEW, or LEARN MORE. Use the LINK dropdown menu to select Page, then choose the appropriate product page and the link will be created automatically.

If you need to delete a product, just click the trash can icon next to it on the LIST ITEMS menu.

When you’re happy, click SAVE. Holy moly, you just set up your e-commerce store.

7. Add more products

So, you might have only one product to sell. If that’s the case, get yourself a cup of tea and relax. But if you have more products or services that you want to set up on your site, just go back through steps three and four, then add each product to your shop page using the ADD LIST ITEM button that we used in step six.

Recap—all you have to do to add more products is:

• Add another product to Stripe using the CREATE A PAYMENT LINK button
• Copy the unique link for the product
• Create a product page in Durable for the new product
• Under BUTTON, paste the unique link from Stripe into the EXTERNAL link field
• Add the new product to your shop page by using the ADD LIST ITEM button

Add one, add twenty, add products, add services, it’s all up to you and completely under your control, because you’re an e-commerce entrepreneur now. Awesome!

Bonus step: Add a featured products section

Let’s say you want to highlight some of your products or services. Maybe they’re new or on sale and you want to increase their visibility for customers visiting your e-commerce website. No problem, this is easy to do with a featured products section.

From the Durable website editor, use the dropdown menu on the top right to ensure you are on your HOME page. Move your mouse over your homepage to the place you’d like to add your featured products section. You’ll see the ADD SECTION button appear. Click it.

Next, choose the LIST block like we did in step five. The AI will generate three list items. Mouse over the list block and click the edit (pencil) icon to open the LIST menu. Give it a heading like FEATURED PRODUCTS or BIG SALE, then customize the block the same way you did when setting up your shop page, this time adding only the products you’d like to feature. Be sure to click SAVE when you’re done. Feel free to add or remove products and change the heading whenever it suits your sales goals.

For service professionals scheduling appointments…

We recently released an integrated scheduling block for Durable that gives you access to the Calendly scheduling platform. This allows your customers to book appointments directly through your website. If you haven’t seen this feature yet, you can find the block in the ADD SECTION menu.

With Calendly's Stripe integration, your customers can book and pay for service in a single step, which is easier for them and less work for you when it comes time to collect. See how it works:partnership between Calendly and Stripe

Stripe Integration | Calendly

With these handy integrations from Calendly and Stripe, Durable offers a complete e-commerce solution whether you’re selling physical products, digital items, or real-world services. So get out there and start selling!