Stores creative guidelines
Nội Dung Chính
Stores creative guidelines
Follow these guidelines to meet our content specification requirements for .
Page sections and tiles
Store pages contain customizable sections of tiles. Each tile can include content such as text, images, videos, and products.
Section limits per page
Every Store page has a header section built in and needs to have at least 1 additional content tile.
Each page can have up to 20 sections total, which can consist of a maximum of:
- 4 background video tiles
- 1 product grid tile
- 1 gallery tile
- 1 featured deals tile
- 1 recommended products tile
If you reach the limit of one of these tile types, you won’t be able to add another unless you delete an existing tile of that type. Alternatively, you can change the content in any existing tile of that type.
Split sections
Split sections contain multiple tiles that can be arranged into a variety of layouts.
Single-row split sections are variable in height. To configure the height, click on the gear icon and use the height adjustment control.
Tile sizes
There are 2 categories of tiles in Stores: basic tiles and variable-height tiles.
Basic tiles
Basic tiles are locked to a specific aspect ratio. There are 4 basic tile sizes: full width, large, medium, and small.
Sizes available by tile type
Tile typeFull widthLargeMediumSmallTextYesYesYesYesImageYesYesYesYesImage with textYesYesYesYesShoppable imageYesYesYesYesVideoYesYesYesNoBackground videoYesYesYesNoGalleryYesNoNoNoProductYesYesYesYesProduct gridYesNoNoNoBest sellersYesNoNoNoRecommended productsYesNoNoNoFeatured dealsYesNoNoNo
Variable-height tiles
Variable-height tiles allow the aspect ratio of the tile to change depending on the height of the content. Image and text tiles support variable height.
- To configure the height within a split section, click on the gear icon and use the height adjustment control.
- For full-width image and image with text tiles, crop the image to make it shorter in height.
Tile types
Header
The header appears at the top of your Store and includes a hero image, brand logo, and navigation bar.
Hero image in header
The hero image appears at the top of every page in your Store, above the navigation bar, and helps to separate your Store’s navigation and content from Amazon’s.
We recommend carefully selecting your hero image on each page, since these images are the first thing that shoppers will see when they arrive at your Store. This visual greeting can help make a lasting impression.
Safe zones for hero images
To ensure your hero image looks great on any device, we require a safe zone, which is an area in the center of your image that will always be visible.
- In some cases, up to 30% of the hero image will be cropped, which includes 15% from both the left and right sides.
- All vital parts of your hero image should be kept inside the safe zone to ensure a high-quality display for shoppers.
Brand logo and navigation bar in header
The navigation bar appears underneath the hero image and contains links to every page in your Store, beginning with your Store homepage.
The brand logo acts as a home button and is displayed on all pages in the navigation.
Header specs
Header elementMin. image sizeMax. file sizeHero image3,000 × 600 px5 MBBrand logo400 × 400 px5 MB
Text tile
Text tiles contain freeform text and can link to a Store page or detail page.
Text can be positioned left, right, center, or justified.
Image tile
Image tiles can link to a Store page or product detail page.
Safe zones for images with link titles
Adding a link title to an image tile will cover some of the image.
For rectangle images (medium and full-width tiles) with link titles, about 19% of the image will be obscured at the bottom.
19% height obscured by link
For square images (small and large tiles) with link titles, about 12% of the image will be obscured at the bottom
12% height obscured by link
Mobile images
All image tiles allow you to optionally use a custom image and layout for mobile devices.
- Certain text fields aren’t supported with the custom mobile layout option, and will only show to shoppers on desktop.
- If you choose this option, be sure to preview the tile on both mobile and desktop to ensure you have high-quality results on each.
- Custom mobile layouts in full-width, large, and medium image tiles aren’t restricted to a specific aspect ratio, so they can vary in height and shape from your desktop layout.
Embedded text in images
Uploading images with embedded text is not encouraged. The text will not be readable by search engines, or by people who rely on screen readers to navigate your Store. To add text to images, use the “Image with text” tile option.
Image tile specs
Tile sizeMax. file sizeMin. image size (desktop)Min. image size (custom mobile)Full width5 MB1,500 × 20 px*1,680 × 20 px*Large5 MB1,500 × 1,500 px1,680 × 20 px*Medium5 MB1,500 × 750 px1,680 × 20 px*Small5 MB750 × 750 px750 × 750 px
* For a high-resolution display on all devices, an image width of 3,000 px is recommended. If a title is added to the image tile, the image height must be at least 32 px.
Image with text tile
The image with text tile has 2 layout options:
Text over image
This layout lets you overlay text directly onto an image. It includes the ability to:
- Link to a Store page or product detail page
- Add multiple text elements such as prefix, heading, body, and link text
- Choose text size, alignment, and content padding
- Configure the colors and placement of the text overlay on the image
Text next to image
This layout lets you add text beside an image. It includes a header and description text.
Image with text tile specs
LayoutTile sizeMin. image sizeText over imageFull width3,000 × 1,500 pxText over imageLarge1,500 × 1,500 pxText over imageMedium1,500 × 750 pxText over imageSmall750 × 750 pxText next to imageFull width1,500 × 1,500 pxText next to imageLarge1,500 × 1,500 pxText next to imageMedium750 × 750 pxText next to imageSmall750 × 750 px
Shoppable image tile
Shoppable images showcase up to 6 products with interactive points. Shoppers can interact with the points to see key information and continue to purchase.
- Information such as the product name, image, Prime badge, price, star rating, and shopping actions will show.
- Each product links to its product detail page.
Shoppable image specs
Tile sizeMax. file sizeMin. image sizeFull width5 MB1,500 × 750 px*Large5 MB1,500 × 1,500 pxMedium5 MB1,500 × 750 pxSmall5 MB750 × 750 px
* For a high-resolution display on all devices, an image width of 3,000 px and height of 1,500 px is recommended.
Video tile
Video tiles show in a player that shoppers can click to play. The shopper can play and pause the video, control the volume, and view the video full screen.
- Both a video file and a cover image are required.
- Cover images are used for the video’s resting state (before the user presses play).
- Plays full screen on mobile devices.
- Plays inline on desktop, with an option to expand to full screen.
Video tile specs
Tile sizeMin. cover image sizeMin. video resolutionMin. to max. aspect ratioFile requirementsFull width3,000 × 1,500 px1,280 × 640 px6:4 to 8:3MP4 file format. H.264 video codec.Large1,500 × 1,500 px640 × 640 px3:4 to 4:3MP4 file format. H.264 video codec.Medium1,500 × 750 px450 × 320 px6:4 to 8:3MP4 file format. H.264 video codec.
Background video tile
Background videos auto-play and auto-replay on silent while visible within the screen. They play inline on desktop and mobile.
- Background videos don’t provide video player controls to shoppers; they’re meant to set a tone and enrich the visual experience of the page.
- Only a video file is required. No cover image needed.
Background video tile specs
Tile sizeMin. video resolutionMax. heightMin. video lengthMin. to max. aspect ratioFile requirementsFull width1,280 × 640 px1,500 px2 to 20 seconds6:4 to 8:3MP4 file format. H.264 video codec.Large1,280 × 640 px640 px2 to 20 seconds3:4 to 8:3MP4 file format. H.264 video codec.Medium1,280 × 640 px320 px2 to 20 seconds6:4 to 8:3MP4 file format. H.264 video codec.
Gallery
The gallery section shows up to 8 images in a full-width grid layout.
Gallery specs
Min. image size1,500 × 750 px
Product tile
When used with split sections, product tiles highlight a single product, show price and Prime status, and link to a product detail page.
Medium tiles can include a custom product title and description.
Full-width product tiles have 2 layout options:
- Product detail: Automatically shows information from the detail page and a call to action such as “Add to Cart.”
- Product editorial: Includes a custom title and description, as available on medium tiles.
Product tile specs
LayoutTile sizeTitleDescriptionProduct detailFull widthPulls from detail pagePulls from detail pageProduct editorialFull widthCustomCustomProduct with textMediumCustomCustom
Product grid
The product grid shows 4 or more products in a full-width grid layout.
- Information such as the product name, image, Prime badge, price, star rating, and shopping actions will show.
- Each product links to its product detail page.
The list of products can be added:
- Manually by searching for keywords or ASINs.
- Manually by entering a list of up to 500 ASINs.
- Automatically using keywords, if your Store is associated with your brand in the catalog.
There are 2 types of product grid layout options: standard and tall.
Standard product grid
Products are shown in a square grid. This style works for product categories that use square or wide rectangular images.
An “Add to Cart” button lets shoppers add items to their Amazon cart directly from your Store. The button won’t show if the product:
- Has multiple variations (such as sizes or colors) to choose from before purchasing
- Allows for clipping coupons
- Is out of stock in your inventory, even if available through third-party sellers
- Is categorized as “Apparel”
Tall product grid
Products are shown in a tall grid. This style works for product categories that use tall vertical images, such as in fashion categories.
The “Add to Cart” button is hidden for all products in the tall grid.
Best seller tile
The best seller tile shows the top-selling products associated with your brand. It automatically shows 5 products at a time.
This tile can only be selected if your Store is associated with your brand’s products in the catalog. The tile won’t be shown if there are no best seller products. If you don’t see this tile in the Store builder, contact support.
Recommended products tile
The recommended products tile shows products associated with your brand that are recommended to a shopper based on previous shopping history. It automatically shows 5 products at a time.
This tile can only be selected if your Store is associated with your brand’s products in the catalog. The tile won’t be shown if there are no recommended products. If you don’t see this tile in the Store builder, contact support.
Featured deals tile
The featured deals tile shows products with active promotions. The products will automatically appear in the tile for as long as the promotions last. When a promotion ends, products associated with the promotion will no longer appear in the tile.
Promotions that show in the tile include Best Deal, Deal of the Day, Limited Time Deal, and coupon-based promotions.
You can choose for the tile to feature:
- “All products,” meaning all of your Store products and all products in the catalog associated with your Store will appear in the tile when they have active deals.
- “A curated set of products,” meaning you enter the ASINs of specific products you want to feature, and they will appear in the tile when they have active deals and are in stock. The products will appear in the order in which you enter them. Child ASINs must be used; parent ASINs are not supported.
Here’s how the tile will look to shoppers when you have active promotions on:
4 or more products
Your products will appear in a full-width, four-column grid section underneath the “featured deals” title.
2–3 products
Your products will appear in a center-aligned section underneath the “featured deals” title (example of 2 products shown below).
1 product
Your single product will appear in a full-width section, without the “featured deals” title.
No products
A banner will appear to let shoppers know that there aren’t currently featured deals.