Menu Sheet Overlay
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!
                <ProductDetailsHeading />
                <ProductDetailsCarousel />
                <ProductDetailsAddToCart />
                <ProductDetailsDescription />

    Save your files and open 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.