Skip to main content

Styling Pages with CSS

The same storefront page is shown both on your website and inside the mobile app. Inside the app, some things don't make sense - a "Download our app" banner, a newsletter popup, a sticky cart bar that duplicates the app's cart button. The simplest way to clean these up is plain CSS scoped to the app.

The evlop-mobile-app-embed class​

When the SDK initializes inside the app, it adds the evlop-mobile-app-embed class to <body>. The class is never added on the regular website, so any rule scoped to .evlop-mobile-app-embed only applies inside the app.

.evlop-mobile-app-embed .your-selector {
  /* these styles only apply inside the app */
}

CSS rules also apply to elements that are added after the page loads - for example popups injected by third-party apps - so there's no need to wait for them with JavaScript.

For worked examples, see Common Use Cases.

Where to put the CSS​

  • Theme stylesheet: add the rules to any stylesheet your theme already loads (for example assets/base.css).
  • Theme editor: themes that support Custom CSS in the theme editor work too.
  • App-only stylesheet: keep all your app styles in a separate file that is only loaded inside the app - see below.

Loading an app-only stylesheet​

Instead of mixing app rules into your theme's stylesheets, you can keep them in their own file and load it only when the page is opened in the mobile app. On the regular website, the file is never downloaded.

Add a <link> tag with rel="stylesheet+evlop-mobile-app" and put the stylesheet's URL in data-href (not href):

<link rel="stylesheet+evlop-mobile-app" data-href="https://example.com/app-styles.css">

Browsers ignore links with an unknown rel, so on the regular website this tag does nothing. Inside the app, the SDK turns it into a regular stylesheet with href set to your data-href, and the stylesheet loads.

Because the file only loads inside the app, rules in it don't need the .evlop-mobile-app-embed prefix.

Using a theme asset​

  1. In your Shopify admin, go to Online Store → Themes → ⋯ → Edit code, and add a new file under Assets named evlop-app.css:

    assets/evlop-app.css
    /* this file is only loaded inside the mobile app - no .evlop-mobile-app-embed prefix needed */

  2. Add the tag to layout/theme.liquid, inside <head>, using the asset_url filter for the file's URL:

    layout/theme.liquid
    <link rel="stylesheet+evlop-mobile-app" data-href="{{ 'evlop-app.css' | asset_url }}">

    If you also load app-only scripts, you can put this tag in the same snippet instead.

note

The tag must be part of the page's HTML (for example rendered by Liquid, as above). Tags added to the page later by JavaScript are not picked up.

Need to do more than restyle - remove elements, change text, or turn off scripts? See Running JavaScript in the App.