Smart Web App is a feature that uses Google’s Progressive Web Apps (PWA) technology to display websites as apps. It is similar to the Add to Home screen feature, but instead of loading your store's PC home page in a web browser like Google Chrome or Safari, Smart Web App gives the store a mobile app-like feel and look. For example, when using Smart Web App, you can add a splash screen that is displayed right before the home page, just like a mobile app.
Shortcut settings
- Go to Themes (Mobile)>Smart Web App>Shortcut settings.
- Set Enable shortcut feature to Yes.
- Check the current primary domain (address) in use. If you want to use a different domain, go to My Store>General>Domain and change your primary domain.
- Click Save.
Info
- When enabling the shortcut settings for the first time, your current primary domain will be displayed as the primary domain.
- Your primary domain is the most recently selected domain on your store. When a user accesses your store through the shortcut feature, your primary domain page will be loaded.
- Browsers that can be used to create a shortcut are listed below.
- Safari 11.3 or above
- Google Chrome 62 or above
- Samsung Internet 4.0 or above
- Firefox 58 or above
- Opera 46 or above
- UC 11.8 or above
Note
- For iOS devices, you can only use the shortcut feature on Safari.
- To use the shortcut feature, your store's URL must begin with https://. To add https:// to your website, go to My Store>General>Domain and install an SSL certificate.
- If you change your primary domain after enabling the shortcut feature, you must enable auto-redirect to your new primary domain for users who are already using the app feature.
- If you are currently using the Progressive Web Apps (PWA) feature through a third party service, you cannot use the shortcut feature on Cafe24.
- Usage of the shortcut feature may vary depending on current support by Google and individual web browsers. Styles such as size and color cannot be changed other than the settings provided by Google.
Banner
You can enter up to 12 characters for the banner name. This will appear on the shortcut's banner and will also appear as the app's name on the device's home screen when the shortcut is added.
- Go to Themes (Mobile)>Smart Web App>Shortcut settings.
- Enter a name for your shortcut.
- Click Save.
Banner requirements
- Google Chrome: Banner will appear for users who have visited your store two or more times within a five-minute timeframe through Google Chrome.
- Samsung Internet: Banner will appear for users who have visited your store three or more times within a two-week timeframe through Samsung Internet.
- Users who close the shortcut banner will not see the banner again for up to three months.
- Shortcut banners will not appear on Safari on iOS devices.
Splash screen
A splash screen is a screen that will appear for 2-3 seconds when an app is launched.
- Go to Themes (Mobile)>Smart Web App>Shortcut settings.
- Under Splash screen, enter the Text to appear on your store's splash screen.
- Select your splash screen's Background color. This will be used for the whole splash screen, and the color of the text will either be black or white depending on the background color selected.
- Select a screen style for your splash screen. When Full screen is selected, the shortcut app will use the entire screen including the top portion where the time and remaining battery life is usually displayed. When Show status bar is selected, the top portion will be displayed as normal.
- You can also change the Status bar background color, which is usually located at the top of the device.
- Click Save.
Note
- Splash screens will not appear on Safari on iOS devices.
Icon
You can add an icon which will be used as the shortcut banner, shortcut icon, and splash screen icon.
- Go to Themes (Mobile)>Smart Web App>Shortcut settings.
- Under Home screen/splash screen icon, click Choose File.
- Select an image file for the splash screen icon.
- Click Save.