Main Icons of the App (eCommerce App)

Main Icons of the App (eCommerce App)

The Icon step is mandatory to generate your native applications and highlight your brand.
You should integrate an icon that will illustrate your Progressive Web App (PWA) and your native apps.

The icon is a key visual element of your app. Web browsers use it as a favicon, it's displayed in push notifications to identify the sender, and it's displayed on the phone's home screen.

Note:
 Depending on the plan you are subscribed to, only images for the available platforms will be asked for in your back office.  

To set up your Icons: 
1. Go to the left swipe menu Content & Design > Design > General Design
2. Click "Icon" on the right column 



1. Custom Icons

1. Click the Custom Tab

2. Create your icons following the right size and the format specified. Make sure you have the files on your computer

3. Upload them to your back office

*Size and format:

PWA:
- Site Logo: 512 X 512 px (.jpg, .jpeg, or .png)
- Apple Touch Icon: 192 X 192 px (.jpg, .jpeg or .png)
- Push icon: 72 x 72 px - Attention, this icon has to be a .png file monochrome on a transparent background.
- Favicon: 48 X 48 px (.jpg, .jpeg, or .png)

Android:
- Google Play: 512 X 512 px (.jpg, .jpeg, or .png)
- Home screen: 192 X 192 px (.jpg, .jpeg, or .png)
- Push icon: 72 x 72 px - Attention, this icon has to be a .png file white (#FFFFFF) on a transparent background (no other color will be accepted to respect Android guidelines).

iOS:
- App Store: 1024 X 1024 px (.png) Beware, transparent png is not allowed by Apple.
- Home screen: 180 X 180 px (.jpg, .jpeg, or .png)



2. The Wizard

Use to wizard to create your icons directly from the back office. 

1. Click the Wizard Tab

2. Create your icons directly from the back office:
- You can create an icon with text, or upload a photo of your choice. 


- Select a color for the background or add a background image
- Set the font, color, and effects of your text

3. Click "Generate"


4.  If you already have a defined icon, confirm by clicking on "Continue" in the red warning to be able to automatically generate all the formats required for your application.



3. The Title

This title will appear under the icon of your app when it is installed on your users' devices.
For this reason, It's preferable not to write a very long title. In this example, the title is "My Shop".




    • Related Articles

    • Main Icons of the App

      The Icon step is mandatory to generate your native applications and highlight your brand. You should integrate an icon to illustrate your Progressive Web App (PWA) and your native apps. The icon is a key visual element of your app. Web browsers use ...

    • Section Design (eCommerce App)

      1. How to modify the design of your sections By default, your shop has a global style  applied to all your app's pages. For more info, please refer to this online help. You can modify the default design of each section to fit the image of your brand. ...

    • Header (eCommerce App)

      The header (logo and title) is the upper part of the app that is always visible and accessible in all sections. The header serves 4 purposes : to display your app's identity to give the section a title to display shortcuts to navigate in the app To ...

    • Section Design

      By default, your application has a global style applied to all your app's pages. To modify colors, fonts, backgrounds, formats, etc... of each element of your application: 1. Go to the menu Design & Structure > Structure > Sections, which will show ...

    • Customize the Icon of your Navigation Menu (eCommerce App)

      When setting your navigation menu, you can choose to display icons. Those icons can be displayed in your shortcuts, or in the main navigation depending on the template you chose. To set your navigation menu: 1. Click "Menu " from the right panel in ...