For existing users: 

• If the Smart App Banner was already enabled on your store, it has been automatically updated to the latest version. You can now adjust the new UI settings by following the instructions in this article. 

• If your banner was previously disabled, we recommend contacting the JMango360 team to assist with the reactivation and setup.

For assistance with finding your App IDs or general configuration, please contact our support team:

• Email: support@jmango360.com

• Helpdesk: support@jmango360.zohosupport.com

Key improvements and technical updates

No website performance impact 

New user interface and configuration options 

The updated Smart app banner solution includes a refreshed user interface and expanded configuration options, giving you more control over how the banner appears on your website. You can configure the banner alignment at the top or bottom of the page, choose between a square or rounded button style, set the button colour, and select either a dark or light theme. In addition, the banner text can be fully customised to better match your brand voice and messaging. 

Configuration of the Smart App Banner 

The Smart App Banner is integrated directly into the Shopify Theme Editor as an App Embed. To access it, follow these steps:

1. Navigate to themes: From your Shopify admin side menu, go to Online Store > Themes.

2. Open the Editor: Click the Customize button on your current live theme.

3. Access App Embeds: On the top-left toolbar, click the App embeds icon (the third icon from the top).

4. Locate the Extension: Find Smart App Banner (created by JMango360) in the list.

5. Expand Settings: Click on the extension to open the configuration fields to configure and customize your Smart App Banner.

Settings

General Settings

• Mobile app name [Required]: Enter the exact name of your application. This will be displayed as the main title on the banner.

• Author: Enter your developer account name or company name (e.g., JMango360). This appears right below the app name.

• Icon: Click to select an image from your Shopify library or choose from Shopify's free stock images. This icon represents your app on the banner.

• Placement: Choose between Top or Bottom. 

Call-to-Action (CTA) & UI Customization

• Button label: Define the text displayed on the action button (e.g., GET, VIEW, INSTALL).

• Button Background Color: Choose between a transparent background or select a specific color from the color palette to match your branding.

• Rounded corners: Use this toggle switch to alternate between rounded or square button edges based on your store's UI style.

App Store Specifics (iOS)

• App Store ID (iOS) [Required]: Enter your unique Apple App Store identifier. This is a mandatory field required to route iOS users correctly.

• App Store Language: Enter the two-letter country code for your primary store location (e.g., us, nl).

• App Store Text: Enter the marketplace subtitle (e.g., On the App Store).

• App Store Price: Define the price text (e.g., FREE).

• Theme: Select iOS to apply the native Apple system-style rendering.

Google Play Specifics (Android)

• Google Play ID (Android) [Required]: Enter your app's unique package name (e.g., com.company.app). This is a mandatory field required to route Android users correctly.

• Google Play Text: Enter the marketplace subtitle (e.g., In Google Play).

• Google Play Price: Define the price text (e.g., FREE).

Global activation toggle

Each banner includes a toggle switch next to its name. This acts as a master "On/Off" switch. To disable the banner without deleting your settings, simply turn this toggle off and save your changes.

Real-time preview in design mode

The updated configuration allows for real-time visualization within the Shopify Design Mode.

• Instant Feedback: Changes to colors or text are reflected immediately in the preview window, eliminating the need to publish and check on a physical mobile device during setup.

• Display Logic: While in Design Mode, the banner is set to always visible for configuration purposes. However, once Live, the banner will only display on mobile browsers (Safari on iOS, Chrome on Android) and remain hidden on desktop browsers.