People are most productive when the tools they use are simple, efficient and beneficial to their end goals. Building a native application gives the best experience overall for Ecwid merchants, and presents you the opportunity to have your service right inside the Ecwid Control Panel.
If you want to create that kind of functionality of your app, it’s important to know how it works and where to begin.
After a user installs a native application, Ecwid will direct them to the new tab that this app will have created. A new tab in Ecwid control for your application is basically just an iFrame with your external page loaded in it.
Create an HTTPS page for the tab
The Ecwid Control Panel works only through the secure HTTPS connection. When an app adds a new tab into it, the tab content is loaded in an iframe window. In order for the content to be displayed, the iframe URL of your app must be loaded over HTTPS protocol, or in another case the browser will just block the insecure content on the page.
Full native application source code example for Custom URL for Thank you page app from the Ecwid App Market is available here:
Initialize the app
When the application tab is opened by a user, the URL will have a format like this:
Important: Ecwid will be checking for app initialization on the page that is specified in your application only. If that page doesn’t initialize the app and it performs an immediate
Sign the user in
One of the most important things about native applications is to avoid requiring the user to sign in to your interface manually. When a user opens your tab, Ecwid will provide an access token for that store. This allows you to get all required data to set up an account for them. Please make sure your app works this way before submitting it for review.
Client-side and server-side
All new applications are registered as
More details about the difference between these types is available in Authentication section.
Because you are embedding a single page of your website or just an isolated page, created specifically for this application, it’s important that this page have a design similar to Ecwid control panel to create a seamless user experience for merchants.
Here are some requirements that will help get you on the right track:
- Use Ecwid CSS Framework
This will make the page look authentic and provide user with a consistent, familiar experience. Ecwid CSS Framework
- No header or footer
The Ecwid Control Panel already has them, so your app should be clean and give the appearance of a native feature.
- Mobile ready
Ecwid Control Panel is responsive, so it can be used by both desktop and mobile devices. Your app interface must have a
mobile-readyversion for mobile users and other cases.
- Keep it simple
Make sure your interface is simple and intuitive for users to understand. Provide descriptions and prefill the fields for the user whenever possible.
We suggest you check out other live apps and use them as an example. There are many great native apps that are already published in the Ecwid App Market, so feel free to find inspiration from existing examples. The less actions a user needs to take to set up the app, the better.
How to create a new tab
There are several things that are requested when you wish to create a tab for your application:
- Application’s name to be displayed
- iFrame URL
This page must be available over HTTPS to avoid mixed content when opened in the Ecwid Control Panel.
- Ecwid Control Panel section
Explain where your tab will be shown in the Ecwid Control Panel (Sales, Catalog, Settings, Design)
- Using add_to_cp access scope
Your app must require this access scope to add a new tab to the Ecwid Control Panel
More details are available in set up your application section.
- Native apps in Ecwid API Documentation
- Get cheap SSL certificates for your server
- More information about SSL Certificates
- Custom URL for Thank you page app source code