Landing Page Guidelines and Components
We maintain high standards for the content and functionality of Campaign Landing Pages on Amazon. This page describes the creative guidelines and available components for building Campaign Landing Pages.
Campaign Landing Page Creative Guidelines
Campaign Landing Pages are required to use high-resolution (@2X quality) images on desktop and tablet devices, and @3X quality images on phones. This requirement guarantees that advertisers’ brands will be represented on Amazon with the same level of detail and crispness in the graphics on the Amazon home page.
Campaign Landing Pages come with built-in support for web browsers on desktops, tablets, and phones, and are accessible within the Amazon shopping apps for iOS, Android, and Fire OS. This ensures that our customers can access the pages no matter where they encounter ads or other media drivers.
Some landing page features are not compatible with all mobile and tablet devices - specific compatibility issues are noted below.
Campaign Landing Pages always display Amazon’s global navigation menu. Amazon’s shopping apps treat them like native content, preserving customers’ logged-in status and providing access to commonly used features like search and cart. Advertisers are not permitted to hide or alter these navigation elements.
Provide Customer Value
Amazon’s product detail pages are a trusted and effective source of shopping information for our customers. Campaign Landing Pages for link-in, product-focused campaigns should offer a clear customer benefit or serve an educational purpose above and beyond the information listed on your product’s existing detail page. The same principle applies to other Campaign Landing Pages for offers and services not provided by Amazon.
Campaign Landing Page Components
A large hero image is the most common component of a Campaign Landing Page. Three versions of each hero image are required to support multiple platforms, as specified below. The image for each platform has a different “safe zone” where content is guaranteed to be legible and not cropped, based on the minimum width of the Amazon navigation for that platform.
Hero Image Guidelines
Desktop image specs: 3000px wide image designed at 2X resolution, with all text and important content contained in the center 1800px (edges will be cropped off depending on browser width). JPG or PNG only. Maximum file size: 500kb.
Tablet image specs: 2560px wide image designed at 2X resolution, with all text and important content contained in the center 1260px (edges will be cropped off depending on the width of the device). JPG or PNG only. Maximum file size: 500kb.
Phone image specs: 1242px wide image designed at 3X resolution, with all text and important content contained in the center 960px (edges will be cropped off depending on the width of the device). JPG or PNG only. Maximum file size: 500kb.
Hero images must include valid alt text for use by screen readers.
Hero images have an optional background color property that creates “sleeves” behind the image to support wide screens.
Animated Hero Guidelines
On desktop browsers, a hero component can also use a video file to create an animated effect. Animated hero components are not supported on tablets and phones, so a static hero image following the standard specs above must be uploaded for those platforms.
- Acceptable video formats: .mp4, .m4v, .mov, .mpeg, .avi, .dv.
- Recommended video dimensions: 1500x300px.
- Maximum video file size: 500mb.
- Animated heroes have an optional background color property that creates “sleeves” behind the video to support wide screens. Alternatively, the video can be set to match the full width of a desktop browser window.
- Animated heroes are muted and cannot include sound.
- Animated hero videos can be set to loop, or to play once when the page first loads.
In addition to the standard background image, a hero image component may also contain video players, Buy Boxes, or linked images.
See below for more details. Videos inside hero images must be located within the center safe zone of the image. The same video and thumbnail assets will be used across all platforms.
Hero images can contain a Buy Box that displays live product information, including a product’s photo, title, price, star rating, and Prime eligibility. Customers can add eligible products directly to their Cart from the Buy Box, or click through to the product’s detail page.
- Only one Buy Box is permitted per hero image. However, Buy Boxes can use a dropdown menu to feature up to five product variations (colors, sizes, media types, etc.) The product’s information will update based on the selected variation.
- The height of a Buy Box can change based on the selected product. On phones, Buy Boxes are appended below their parent hero image and are not included in the height of that hero image. The hero’s background color applies behind the Buy Box.
- Buy Boxes can optionally hide the product’s photo, star rating, or Add to Cart button, and can optionally have a transparent background on desktop and tablet platforms. The product’s title and price cannot be hidden.
- Buy Boxes can optionally show Subscribe & Save offers and vendor-powered coupon offers on eligible products.
Hero images can contain smaller links that open a modal lightbox experience, supporting video, images, and Buy Boxes.
- Five lightboxes are permitted per hero image. Each lightbox contains one image, video, or product ASIN.
- The button image for each lightbox must be a JPG or PNG image of at least 132px in height (at 2X resolution), and under 50 kb in size.
- Lightboxes that feature an image can display an optional caption of up to 300 characters.
- A Buy Box inside a lightbox can support one product ASIN.
- If a hero image or gallery contains multiple lightboxes, customers can click arrows (or, on phones, swipe horizontally) to see the contents of all the lightboxes. On phones and tablets in landscape mode, lightbox pagination dots may overlap the bottom of your images and videos. Keep text and other important content away from the bottom of these assets, or use text captions instead.
Hero images can contain buttons or other images that link to other pages on or off Amazon.com.
- Linked images must match the resolution of their parent hero image (@2X for desktop and tablet, @3X for phone) but have no other size restrictions. A separate linked image asset must be provided for each platform’s hero image.
- Linked images must link to Amazon pages or to HTTPS-enabled sites that work on mobile, tablet, and desktop browsers.
Product List / Carousel
Campaign Landing Pages are often used to display groups of products from the same advertiser. Product lists on Campaign Landing Pages are formatted as horizontal lists. On desktop browsers, the list is navigable with left and right arrows. On phone and tablet devices, the list is touch-enabled.
- Tailored pages can contain a maximum of 20 product lists.
- Product lists must contain between 3 and 20 individual products sold on Amazon.
- Product lists have an optional title that appears above the products.
- Product lists can optionally include Add to Cart buttons under physical products.
- The Add to Cart button will only be shown for products that are in stock and do not violate Minimum Advertised Price policy.
- The image, star rating, price, and Prime eligibility of products in a product list cannot be edited, and will always match the information on the product’s detail page.
- Product lists do not display the price for items that are out of stock or otherwise unavailable.
- Product carousels will automatically show applicable vendor-powered coupon offers under eligible products. Subscribe & Save offers can also be shown.
Campaign Landing Pages can contain video players, either embedded in header images or centered on the page as a distinct element.
Video Platform Compatibility
The following mobile and tablet devices are incompatible with Amazon’s video player and will render Campaign Landing Pages with videos removed:
- Android devices older than 4.3
- iOS devices older than 7.0
- Silk browser on Fire Tablet devices older than Gen 7
- Amazon Shopping App on Fire Tablet devices older than Gen 8
Tabs are a useful navigation tool for some landing pages, allowing customers to switch between different groups of products or other content while staying on the same page. Campaign Landing Pages can use either the standard Amazon UI pattern for tab headers or custom branded tabs, depending on an advertiser’s branding preferences.
- Each Campaign Landing Page can have one set of tabs. A page can have up to five tabs.
- Tabs can contain content above or below them, but should maintain the same vertical position on the page no matter which tab is selected (i.e., the height of all elements above a set of tab headers should be consistent between tabs).
- Tabs with custom images should be designed so that the image assets are entirely inside the tab component. On small devices, hero images may be resized to fit the screen width, but tab bars will stay at their full size and scroll horizontally.
Image assets for custom tabs must be at least 88px tall (@2X resolution) for desktop and tablet platforms, and at least 132px tall for phones. The tab headers will expand to match the width of these images. Provide images for base and selected states on all platforms, as well as an optional hover state for desktop.
|Desktop||X||X||X||88px (@2x resolution|
|Tablet||X||X||88px (@2x resolution|
|Phone||X||X||132px (@3X resolution)|
Standard Amazon UI tabs on a Campaign Landing Page
Campaign Landing Pages can feature up to five photos in the same area using an Image Gallery.
- The images in each panel of a gallery must be the same size.
- Gallery images must be 1800px wide (900px @2X resolution), at least 300px tall (150px @2X resolution), and under 500kb.
- Gallery thumbnails for desktop and tablet are automatically generated, but can be replaced with custom thumbnails. The thumbnails can be positioned on the top, left, right, or bottom of the gallery. The border of the selected thumbnail can be changed to use any hex color.
- On phones, the thumbnails are hidden and customers can swipe through gallery panels from left to right.
- Gallery panels can include Linked Image, Lightbox, or Buy Box child components. Linked Images, Lightboxes, or Buy Boxes can also be set up as a child component of the entire gallery (independent of the selected panel) for desktop and tablet.
- Gallery panels must include valid alt text for use by screen readers.
The Text Block component displays HTML text on Campaign Landing Pages. Text Blocks can contain headers, bold and italic text, links, and special characters.
- A Text Block will display the same text content on phones, tablets, and desktop.
- Text Blocks can be center-, left-, or right-aligned.
- Text Blocks match the width of the hero image’s safe zone on desktop and tablet, and stretch to fit the width of phone screens. A Text Block can also be added as a child component of a hero image or gallery panel.
- Text Block components match the fonts and text styles of other Amazon UI text on our website by default. A selection of other web-safe fonts and colors is also available.
The Spacer component adds vertical space to a Campaign Landing Page.
- A Spacer’s background can be a solid color or a linear gradient.
- Spacers can have different heights on the tablet, phone, and desktop versions of a page.
- Spacers cannot contain child components.