Skip to main content

Webview Bridge SDK

Whenever the mobile app shows a page of your online store (a policy page, a blog post, a third-party app page, a chat widget, ...), it loads that page in a webview. The Webview Bridge SDK is a small JavaScript library that runs on your storefront and connects that webview to the native app. It:

  • detects that the page is running inside the mobile app,
  • hides the website's own header, footer and other chrome, since the app already has native ones,
  • opens product, collection and cart links as native app screens instead of in the webview,
  • syncs the customer's login and cart with the app,
  • lets you run your own code to optimize the page for the app.

Enabling the SDK​

The SDK ships with the Evlop Shopify app as a theme app embed. To turn it on:

  1. In your Shopify admin, go to Online Store → Themes → Customize.
  2. Open App embeds in the left sidebar.
  3. Enable Mobile app embed and save.

Once enabled, the SDK is loaded on every storefront page but only activates when the page is opened inside the mobile app - regular website visitors are not affected.

Embed settings​

The app embed has a few settings that tell the SDK which parts of your theme to show or hide inside the app. The defaults work for most Online Store 2.0 themes.

SettingDefaultWhat it's used for
Container element CSS selectorbodyThe element whose children are hidden when a specific embed (e.g. a chat widget) is opened, so only that widget is visible.
Main content element CSS selectormain, #MainContentThe part of the page that stays visible for regular pages.
Header element CSS selectorheader, .shopify-section.shopify-section-group-header-groupThe theme header - hidden in the app.
Footer element CSS selectorfooter, .shopify-section.shopify-section-group-footer-groupThe theme footer - hidden in the app.
Elements to hide CSS selector.evlop-mobile-app__hiddenAny additional elements that should be hidden in the app.

What happens when a page loads in the app​

  1. A white loading overlay covers the page, so customers never see the desktop layout flash.
  2. Once the DOM is ready, the SDK initializes: it adds the evlop-mobile-app-embed class to <body> and hides the header, footer and "elements to hide".
  3. The SDK adds your app-only stylesheets and scripts to the page.
  4. The SDK dispatches the evlop-mobile-app:ready event on document and removes the overlay.

These are the supported ways for your own code to detect the app and adjust the page:

  • the evlop-mobile-app-embed class on <body>,
  • the evlop-mobile-app:ready event,
  • app-only stylesheets and scripts, loaded with <link rel="stylesheet+evlop-mobile-app"> and <script type="text/javascript+evlop-mobile-app"> tags.

Learn more:

  • Styling Pages with CSS - hide or restyle elements in the app using the evlop-mobile-app-embed class, or an app-only stylesheet.
  • Running JavaScript in the App - run app-only code with an app-only script file, or inline on the evlop-mobile-app:ready event.
  • Common Use Cases - worked examples, such as disabling the cart drawer or preventing popups inside the app.