Most mobile sites will use a hamburger-style modal for navigation. amp-sidebar can be used effectively to keep this task within the AMP document (e.g. Merlins Potions), however this solution is problematic if the menu contains dynamic content such as logged in messaging or nested navigation. In this case a better user experience may be for the menu button to link to the PWA before opening the menu (e.g Lancome)
A combination of amp-lightbox and amp-form can be used to create a search experience similar to most non-AMP pages. Certain behaviours such as automatically triggering the keyboard or displaying suggested search terms are not possible in the AMP document.
AMP-font can be used to render custom fonts in an AMP document, however as explained in the limitations page, these fonts should be used sparingly and system fonts should be favoured. These fonts are faster to load reduce code complexity that may cause failures in the AMP validator.
Amp-form contains a ‘select’ element that allows the user to choose a sorting option within the AMP document. This then loads the PWA version with the new option applied. Seamless AMP -> PWA pathways such as this are UX examples to follow.
The product filtering experience is presented in the Mobify SDK via a modal. Currently AMP only supports 1 amp-sidebar per document. If this is used for the navigation drawer then the ‘filter’ action should transition to the PWA experience. If not then amp-sidebar can be used to display the filtering options instantly without leaving the AMP page.
Selecting product options on the PDP is made possible through amp-bind. Selecting available swatches can update the product image and price, allowing the user full functionality before adding to cart.
Add to cart
Choosing a quantity and adding to cart is made possible through amp-bind. The add to cart action is presented to the user on the AMP page but performed on the PWA. When a user taps 'add to cart', their product options and quantity are captured and used to populate the user's shopping cart with that item. The user is redirected to the cart page instead of staying on the PDP with a confirmation dialog. This is to ensure a fluid checkout experience.
Static product information such as the description, specifications and shipping info can be organized like they are on the PWA using amp-accordion.
Provided related items are available in the HTML, they can be presented on the AMP document using amp-carousel. If this is not the case, a seamless AMP -> PWA pathway should allow the user to access this content.