Illustration by Dark Cube Studio

From Brick and Mortar to Ecommerce in 2 Hours: Setting Up Your First Online Store In An Afternoon

A tutorial — and some expert tips — for leveraging tools that require no coding and get your business online ASAP.

With social distancing taking effect, local shops, stores, and restaurants are struggling to get online fast enough. We see the Instagram Stories and know they want to be there for their customers — we see you, we love you and miss you!

At Invoke, we specialize in helping organizations identify opportunities and validate and launch digital solutions. It’s made us very familiar with producing the type of prototypes that can help get businesses online fast.

There are so many quality services that can help with the transition from offline to online; To move fast without being code-savvy, we recommend Typeform and Stripe. They are good, wallet-friendly options that can get customers placing orders on your site within just a few hours!

This post will show you how to get your business online with these two no-code tools. In the end, it could look something like this — and better!

Typeform — Your Product Menu And Ordering

Typeform is an online tool that lets you create surveys. They have a few templates that support ecommerce, so we can leverage this as a cost-effective way to get a quick win. It requires a bit of jerry-rigging, but we’ll make it work!

Depending on the size of your business, you could be paying between $35–70 USD per month for Typeform. The free plan works for accepting up to 100 submissions a month, but if you upgrade to a paid plan you’ll have no limits on the number of orders you receive, no limit on the number of questions you can ask, and you can ditch the Typeform branding. Read more about their pricing plans on the Typeform website.

Constraints

• No hours of operation. The survey will only close when it hits the response limit, not at a specific time. This means if you’re a restaurant and your kitchen can handle 60 orders between 12pm-2pm, you can only set the response limit to 60. Typeform cannot tell time.
• No modifications. Typeform is meant to be simple, so if you’re setting up a menu, you won’t have options like add-ons or a-la-carte changes to items.
• Works best for limited products/menu. Things can get tricky, so if you don’t want to spend a lot of time with the logic functions of Typeform, you should keep your options narrow. Keep this in mind: If you want customers to be able to order multiples of the same product, make it an Image question. If you want customers to choose one of several products, make it a multiple choice question.
• If you want to offer more, encourage your customers to place multiple orders.

Stripe — Your Payment Processor

Stripe is an online payment processor used by hundreds of services. This is what you can use to collect payments from your online orders for a minimal cost. Their pricing structure is structured to benefit you — they make money when you do. They have a flat fee of 2.9% + C$0.30 per successful transaction. Read more about their pricing plans and options on the Stripe website.

Constraints

• No itemized receipts. The receipts that Stripe sends to customers only includes the total amount of money that was processed. They will not include line item information or order summaries.

How To Set Up Your Online Store

Getting Started

Setting up your accounts and choosing a template will help you get started fast — and with these platforms you’ll be able to edit them in the future as you get accustomed to online ordering and learn what works for your business.

1. Get your tools ready: Set up your Typeform account + Set up your Stripe account
2. Open Typeform and get started fast with the “T-Shirt Orders Form” template — or browse their templates: You can change this at any time, but the t-shirt order form will help you get started quickly and avoid starting from scratch. Or you can explore the template gallery to see what will work best for you, your brand, and your business.
3. Customize your welcome screen. The welcome screen is a Typeform requirement. Use it to introduce your brand so customers are reassured they’re making a purchase from you — and make it clear that people need to click the button to start placing their order.

Edit the Welcome Screen to showcase your brand and set expectations for the ordering flow for your customers.

Pro Tip: Throughout Typeform, you’ll notice that you can manage the question content from the main edit view, the settings by clicking the wrench, the logic and conditions by clicking the branch icon, and the math/totals by clicking the calculator.

Products and Pricing

This is where you will spend the most time setting up, because you’re adding products and prices. Remember to keep it simple; you can edit anytime.

1. Set up a multiple choice question to let customers buy multiple items. You can include titles and ingredients of your menu items, but not images. I recommend this one for online shops that are likely to have more than one product per order — like restaurants. Sure, images are nice, but customers are used to not seeing images on online ordering platforms like Foodora and Doordash.
2. Set up an image question to let customers buy one item at a time. The default is set to “Image Question”. This lets you show off your product. However, Typeform only lets your customer choose one item at a time to buy. This is okay if your customers are willing to submit more than one order to make purchases of multiple items. The logic is already set up for you to jump to the next question (which is about quantity of that one item). You can modify this if you like, or leave it as is.
3. Add prices to all of your options. You can do this by clicking the calculator icon to get into the logic of your products and add prices there. You can choose between “Price” or “Score” for any numeric values, so make sure you’re always selecting “Price”, or the form won’t work.

You can manage the order of questions by editing the logic jumps.

Pro Tip: If you’re selling clothing, leave the logic jumps as-is. The next jump will be to ask your customer what size they are purchasing. If you’re an apothecary, plant shop, or restaurant, you don’t need to know sizes, but a restaurant may change the next question to be about a scale of spiciness. Typeform has helpful resources on what logic jumps are, and how to set them up.

Set up the Checkout/Cart

This step may require you to check your math. After all your products are set up, you should go through the flow and test to make sure the prices you’ve set up are adding up to the correct total amount. You can test the flow by interacting with the “Live Previews” on the right side of the builder view.

1. Calculate your prices and manage taxes: Click on the “Calculator” on the left hand side of the menu. This will take you to the questions that require calculations; in this case, adding up the sum of the online order. In addition to basic prices,we also recommend including the math for taxes in here so it can be included in the total.
2. Include curbside pickup information. If you’re doing curbside pickup, you can change the questions to include information around when your shop is available for people to come and pick up their orders. Otherwise, you can stick with the template that has address information for orders to ship.

Click through the calculator to find the question where you can add prices.

You can make sure your math works by testing in the “Live Preview” section.

Pro Tip: You can remove the Country option if you’re sticking to local orders. Otherwise, to make sure a country you want to ship to appears as a dropdown, add the country with a hyphen in front of it.

Enabling Payments

Once you’re satisfied with the flow, and have tested to make sure all the math works out correctly, you can connect Stripe to handle payments. If you haven’t set up Stripe yet, that’s okay! You can still click “Connect to Stripe” for now and you’ll be prompted to create your account.

1. Add payment question: The t-shirt template does not have payment processing as part of it, so make sure to add this after you collect shipping details. You can add a new question by hovering in the space between two questions and clicking the plus sign that appears — select “Payment” from the list of options (this will be selectable if you’re using a paid Typeform Plan).
2. What about receipts? When the orders are submitted, your customers will receive a confirmation their payment was processed from Stripe, and a summary of their form submission from Typeform (sent to the email they entered earlier in the flow).

Click the “+” icon to insert new questions into your flow.

Connecting to Stripe allows you to collect payments. You can set Stripe up before your Typeform account, or when you click “Connect to Stripe” from Typeform.

Design Your Form

1. You can modify the aesthetic of the Typeform by clicking on the raindrop icon on the left hand side. If you paid for a Premium Plan, you will not see Typeform branding anywhere. To match your brand, click “Customize” and start picking your colours. Any changes you make will show up straightaway on the right-hand side in the Live Preview.

You can customize your design, or use some out-of-the-box solutions from Typeform.

Pro Tip: Test. Test. Test. Make sure your orders go through. Order all combinations, make test payments, and make sure everything is working as you expect it to. You can change anything anytime, so entering a temporary email and trying it out with some friends is a-okay. Typeform lets you conduct testing within the build “Live Preview” section without triggering payment. Send this to your friend, open the link on your mobile device (you can get the link to this by clicking on the eye icon), and try it in incognito mode so you can see the same experience your customers will see when this is live.

When you’re happy with everything, click Publish.

Tell Your Customers

Share on Your Social

You don’t even need a website to collect orders! Share the Typeform URL on Twitter or Facebook, put it in your Instagram bio, add it to your Google Business Profile, and more! You can find your URL under the “Share” link in the top navigation of Typeform.

Copy and paste the URL Typeform provides and add it to your Instagram bio, stories or any other social network your customers find you on!

Add to your Website

If you already have a website, that’s great! You can embed the Typeform so customers can get shopping right from your existing website.

1. Click on “Sharing” — this will give you options for how to add the Typeform you’ve just built to your site.
2. If you click on “Embed to a webpage”, you can select how you want the form to appear. If you already have a website, you can dedicate a full page to “Shopping” and select “Full Page” — this will take over your existing site design. Remember, the Typeform welcome screen you set up will be the first thing your customers see.
3. With the embed code, you’ll have to add it to the <body> of your website. Depending on what type of site host you use, this will vary. Popular building and hosting platforms often provide instructions for this; here you can find them for Squarespace, Wix, and Wordpress.

The embed code is what you’ll need to have your Typeform appear on your existing website.

Now you’re set up VOILA! You’re up and running, congratulations!

Now that you can engage your customers through ecommerce and an online ordering platform, you can start to recognize trends and learnings. People are often quick to give feedback on things they feel strongly about (positively or negatively). You can get an understanding for how your customers are using your online ordering setup, and modify it based on what you learn.

Maybe your customers are more concerned about time of pickup, maybe they’re interested in purchasing in bundles, or maybe they don’t want to buy anything online at all — you have the opportunity now to recognize these things quickly, with an afternoon’s investment in getting online.

This is an example on how you can quickly prototype an idea, make it live, gather some insights, and look into taking this to the next level in the future.

It is an approach we often take at Invoke — focus on the root thing we want to solve (e.g., Do customers want to buy from me online?) and discover the most efficient and impactful way to prove or disprove a theory.

Got questions? Talk to us! Feel free to leave a comment below, Tweet to @invoke or @ohdubz or send me an email at olivia.bell@invokedigital.co.

We want to see what you’ve set up! Tell us who you are, we’d love to show it off in the community. If you have enhancements, or new things you’ve tried too, we’re keen to see them.

Also, if this works for you and you’re ready to take your ecomm to the next level, give us a shout.