Menu
Menu Sheet Overlay
Search
Search Sheet

      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?