Create an App for a store
Ecommerce from mobile devices skyrocketed since the beginning of 2020 due to the Covid Pandemic19 and continues to grow at rates of 45% annually.
Today, having a Store App is a must for any Ecommerce or Retail business:
- 35% of users make purchases from their cell phones.
- In 2021, 72.9% of all ecommerce sales globally were made from mobile devices.
- More importantly, Mobile Apps have a 157% higher conversion rate than mobile or responsive Websites.
n this step-by-step guide we are going to create in a very simple way an App with features as advanced as those of the big Retail companies:
- Shop with cart and order history
- Registration of users
- News section
- Push messages for offers and promotions
- Loyalty system with discount codes
- And a function to share the App and promote business viralization
If you follow this article step by step, even if the store you want to create is very different from our example, you will master the Scoreapps builder and you will know how to customize your App and include many other features to boost the profitability of your business. Let's get started.
If you wish, you can preview the App we have based this guide on by scanning the QR code with your phone.
First Steps
Once inside the dashboard, on the left hand side menu you will find the 'a' icon for the app builder.
Here you can create a new app and name it.
Once you are on the Apps Management screen, click on 'Create App':
Once you have created and named your app, you will see a screen where you can choose from several templates.
These are predefined designs so that you don't start from scratch, but in reality, you will be able to modify absolutely everything afterwards. In fact, you will be able to change the template you choose now. And if you do not fit any of them, click on 'Blank Template' to start from scratch to design your App.
For this example we will choose a blank template
The process of creating Scoreapps applications is very simple. Just follow the steps in the builder.
These steps are represented in the progress bar that you will always have at your disposal at the top of the builder and that will allow you to easily navigate between the different pages, just by clicking on the icon.
First step. Designing the App
In the design tab, you will find all the options related to the information of the menu and the initial screen of your App.
Layout election menu
The Home Screen Options section displays the options you have available according to the chosen Layout style.
Adding a slider or animated image carousel to your App is very simple and can be set up in less than 10 seconds.
Please note that not all navigation styles (Layouts) support the use of Sliders.
If you do some scrolling you will find a new section called 'Home Slider Options':
- Indicate if you want the images to loop.
- Specify the duration of your Slider.
- Adjust the opacity of the images.
- Choose the height of the images.
If you want the Slider images to fill the entire screen, be sure to check 100% in the Image Height selector. We recommend that they have a size of 1432X2732 pixels.
Finally click on 'ADD IMAGES'.
Images should not exceed 3000 pixels and it is recommended that they weigh no more than 500kb (the more optimized they are, the faster your app will be).
This section below helps you choose an image that looks good on all devices and screen ratios. Use the overlay tool to check if the important information in your design falls within the recommended safe zones depending on the screen orientation your App is designed for.
To learn how to design the images properly you can download the template with the measurements, available in both .png and .psd format.
Now let's watch a 5 minute video to learn how to design the App Home Screen:
Choose the language and the currency of your app.
This will be used for different aspects such as time zone and currency symbol.
To change the font of your app you can select one of those that appear in the builder menu, or import one from Google Fonts. To do this it is as simple as typing the font name.
Second step. Colors
Choose the main colors of the app.
- General: applies to the background (if there is no specific image) and to the general text.
- Home: applies to the navigation menu and its elements.
- Header: applies to the navigation header of the app.
- Card: applies to the elements displayed in card format.
- List: applies to items displayed in list format.
In addition, if you already have web programming knowledge, at the bottom of the dashboard you can add CSS code and customize your app even more if you wish.
Third step. Features
Once the home screen has been designed and the main colors of the App have been chosen, let's move on to the features step.
The templates incorporate by default some functions that we consider interesting for each sector. You can see them in the features carousel. But if you want to remove any of them, just click on the "X".
But show you how easy it is to add new features to your App, let's remove and re-add the Custom Page feature that we have named NEW IN (to show what's new in the store).
Custom page
For this particular App example, we wanted to create a section that would allow us to present to the clients some news about the store, talk about new trends, etc. using images, texts, videos, etc. For this reason, we have included the Custom Page feature and called it "New ins".
This feature offers you multiple options to create an informative page.
You can write an article with an image, you can publish a photo gallery, you can publish a video directly on this page and you can add CTA buttons or links to any external websites.
Here´s. video that shows you how to configure the "Custom page" feature.
Discount (Promos)
This feature will allow your clients to keep up to date with your store's promotions.
You will be able to display all your offers in a single section and keep them updated to increase customer loyalty. But you should know that this function is not connected to the Shop function that we will configure next.
It is an informative section to offer Discounts that are later redeemed in a physical store.
If you want to generate discounts for your online store, you will have to do it in the Shop/Delivery feature that we will show you next.
Here´s a video that shows you how to create discounts:
If you set the offer as "use only once", a button like the one in the image with the text "Use this coupon" will appear. Once clicked, the offer will no longer appear on the screen. For the offer to become effective, you must enter the discount code, which you have configured in the "store" feature.
Shop/Delivery (Shop)
This feature allows you to create one or more stores, put all your products on sale by categories, displaying prices, sizes, etc. and customize the sale, delivery or shipping options. You can also configure various payment options and discounts.
This is how you configure the discount we have shown you in the previous feature in the store.
Learn how to sett up the shop/delivery feature by watching this short video.
Share (share app)
This feature will allow your customers to share the app in just one click.
We are talking about a key feature when it comes to making your business viral.
Jobs (Jobs)
This feature allows you to publish offers and receive job applications.
Learn how to configure this feature by watching the following video.
Click on this link and access see a step-by-step article about the job offer feature.
Links (RRSS)
This feature will allow you to create a direct access to all your social media profiles through the app. This allows you to carry out cross-channel strategies, i.e... to bring followers from one network to another.
Your customers will only have to click a button.
In our example we have set upInstagram and Facebook.
Learn how to configure this feature by watching the following video.
Click on this link and you could see an article explaining step by step on the roleLinks†.
Push Messages
Push messages represent the most efficient marketing system today.
They have a 99% opening rate.
And adding this powerful tool to your App is very simple:
All you have to do is publish the app in a native Android or iOS version.
Then, once the app is published on the App Store and/or Google Play, you can send messages to you users directly form this feature.
Other suggested features
In this guide we have included a series of features that we consider useful for a Shop, but there are many more that could also provide value to your users:
Step 4. App icon and settings
From here you can choose the icon to be displayed on the user's device screen, as well as the design of the "back" button.
If you want to send push messages, this is where you can customize the icon or background color.
This tool will help you choose a home screen image that´s compatible with all screen sizes of different devices.
This image will be displayed when the app is loading.
Step 5. Advanced
If you wish, you can monetize your app by adding an ads banner that will be shown to the users of your app.
To do this you need to configure the Admob advertising system.
Publishing your App
Depending on the Plan you choose (Starter, Business, Growth or Reseller) you will have different types of Publishing options:
- Native Android version.
- Native iOS version.
- Web app HTML5.
- PWA mode(Progressive Web App).
To publish the native version of your App on Appstore or Google Play, you need a Business, Growth or Reseller plan, while the Web App and PWA version can be published with a Starter plan or even during the free 14-day Trial.
Promoting and launching your App
At this point you should already have a initial version of your App.
Remember that if you have any questions you can contact Helpdesk or write to the Support team (soporte@scoreapps.com) )
Popular Articles
How to build an App for a Restaurant
Text Enter First Steps Once inside the platform, from the main dashboard you will find a series of icons on the left hand side menu. Just click on 'Apps'. Then click on 'Create App' and give it a name. Then you'll get to a screen where you choose the ...APPS: Webhooks
The advanced Webhooks feature lets you connect certain events that occur in your App by sending them to a URL called Webhook. You can use a free Webhooks service as Zapier to create automations that can help you with your App business. For example, ...Audio & Music
To add this feature to your app go to the step "Features" and click on the icon "Audio": Then give a name to this new app section. Then click on the + icon to add a new Playlist Then place a title and image on the Playlist and click OK to save your ...APPS: Contact
This feature allows you to create a contact page for your business. Add important data such as Address, Phone Number and Email. To add this function to your application go to the "FEATURES" step and click on the "Contact" icon: Settings. Within ...APPS: Custom page
This functionality gives you several options for creating an information page. You can write an article with an image, you can publish a photo gallery, you can post a video directly on this page and you can add call buttons or a link to any external ...
Related Articles
How to create an App for Attendance
What functions should be added in the App? - Lock - Form v2 It would be necessary to add theGoogle Maps APIso that the App can geolocate the User/Worker at the time of signing. - Lock This function should be configured as follows: - Form V2 It could ...Create an App for Courses
When you´re building an Infoproducts App, that requires a membership area, it´s very important to include a "Starter" section. This way, if the Membership is already available, the Login can be linked directly. In the following video we show you the ...How to create ANY KIND of App
With Scoreapps you can build almost any kind of App, without having to program a single line of code. But to make things even easier for you, here are a series of Step-by-Step Guides to help you build the most common kinds of apps: - App for an ...Create an App for a Service based business (Clinics, Gyms ...)
The use of mobile devices for booking services has only grown since the beginning of 2020 due to the Pandemic and continues to do so at a rate of 45% per year. Today, having a Mobile App is essential for any service business: 35% of users make ...Create an App for gyms or fitness trainers
If you follow in the footsteps of this guide, in just over half an hour you will be able to launch a stunning Fitness App capable of competing with any tailor made app you can imagine within your industry. In this example we show you how to set up an ...