Menu
Menu Sheet Overlay
Search
Search Sheet

      Adding a Component

      Let's start with a simple exercise: adding a product availability notice to the AMP version of the product details page using the ListTile component from the AMP SDK.

      Before you begin #

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

      1. Setting up #

      Open amp/app/containers/product-details/container.jsx

      Import the ListTile and Icon components:

      import ListTile from 'mobify-amp-sdk/dist/components/list-tile'
      import Icon from 'mobify-amp-sdk/dist/components/icon' // import Icon component to use for startAction prop

      2. Updating the page #

      Replace the existing ProductDetails component with the following:

      const ProductDetails = () => {
          return (
              <div className="t-product-details">
                  <ListTile className="u-margin-top u-padding-start-md u-padding-end-md" startAction={
                      <Icon name="store" title="Store" />
                  }>
                      Available in store!
                  </ListTile>
                  <ProductDetailsHeading />
                  <ProductDetailsCarousel />
                  <ProductDetailsAddToCart />
                  <ProductDetailsDescription />
              </div>
          )
      }

      Save your files and open http://127.0.0.1:3000/eye-of-newt.html in your browser. Now you'll see your product availability notice at the top of the product details page.

      3. Styling the component #

      Let's say you want to change the text color in the product availability notice.

      Open amp/app/styles/themes/amp-components/_list-tile.scss

      Now we can customize the theme styles for the ListTile component:

      .a-list-tile__primary {
          font-size: $font-size + 1; // 1
          color: $success-color;
      }

      Save your files and reload the the product details page. Now you'll see the new text color.

      Next steps #

      To learn more about the ListTile component, Icon component, or any other components in the AMP SDK, see the AMP Components documentation.

      Feedback

      Was this page helpful?