🎉 Check out DevCenter, our new documentation site for v2.0! (Or keep using this site for earlier versions.)

Switch to DevCenter

Menu Sheet Overlay

Mobify Progressive Web SDK Docs

Let's start with a simple development exercise to get you started with making progressive web apps: adding a banner to the Merlin's Potions homepage using the Banner component from the Progressive Mobile Web SDK.

Before you begin #

Complete the Quick Start guide to install all required software, generate your project files, and start your development server.

1. Setting up #

The Banner component is not included in your project by default, so you will have to add a couple import statements.

Add the following to web/app/styles/themes/_pw-components.scss:

@import 'node_modules/progressive-web-sdk/dist/components/banner/base';

Add the following to web/app/containers/home/container.jsx:

import Banner from 'progressive-web-sdk/dist/components/banner'

2. Updating the home page #

Open web/app/containers/home/container.jsx and insert the following code after <div className="t-home__container"> in the JSX for the Home component:

<Banner icon="info" title="info">
    Save 20% on your order with the code SAVEBIG

Save the file and open the preview URL in your browser (or just reload the home page if you already have it open).

It should look like this:

Home page with banner

You may have noticed that the banner you added doesn't have a background color that matches the theme of Merlin's Potions. This is because SDK components only include a set of default styles.

3. Styling the component #

To create our own styles for the banner on top of the base SDK theme styles, we need to create a new file under web/app/styles/themes/pw-components called _banner.scss.

Let's edit web/app/styles/themes/pw-components/_banner.scss:

.pw-banner {
    background-color: #0288a7;
    color: #fff;

Now let's open web/app/styles/themes/_pw-components.scss and add an import statement for our new styles. Under // [BBB] Progressive Web SDK Custom Styles, add:

@import 'pw-components/banner';

Reload, and you'll see your banner with the new background color.

Home page with styled banner

Next steps #

To learn more about how to use the Banner component, or any of the other components in the SDK, see the Web Components documentation.


Was this page helpful?