Menu
Menu Sheet Overlay
Search

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
</Banner>

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.

Feedback

Was this page helpful?