How to choose an image layout

When choosing the overall layout of a hero image, the options that are available depend on whether or not the image depicts a standard pack, a multipack or a bundle, as shown opposite.

Layouts are provided for the following scenarios:

Three standard pack layouts are provided, which can be used for all packaged goods.
For multipacks, suppliers may choose whether or not to show one of the items pulled out of the pack. A set of three multipack layouts are provided for these. On this website, a multipack is defined as being any pack that contains discrete items, where the number of items is described on the shelf label.
Furthermore, a bundle is a special case image, which is becoming increasingly popular as retailers take advantage of the increased flexibility enabled by e-commerce. In this case, one image tile is used to represent the sale of multiple packs, but these packs are not necessarily held together by any packaging. A set of four bundle layouts are provided for this special case.

Additionally, guidelines are provided for Mobile Ready Secondary Images, which complement the primary hero image, and are usually displayed within a carousel on the Product Detail Page.

examples of standard layouts, where the pack is shown together with an optional size lozenge, and multipack layouts, where the pack is shown together with an item that is pulled out of the pack, and bundle layouts, where multiple packs are being sold, but these aren't necessarily held together by any external packaging, so digital packaging may be created to represent these.

Some examples of different layouts for e-commerce images.

Back to top

Standard pack layouts

The following layouts are described in detail on the page about standard layouts.

Whole pack

This layout shows the whole pack, often with some impression of pack depth.

Stretch to square

In this layout, the aspect ratio may be modified up to 150%.

Zoom pack

In this layout, the product may be zoomed up to 150%, so that only part of the product is shown.

Back to top

Multipack layouts

The following layouts are only available for multipacks (as defined above). These layouts are described in detail within the page about multipack layouts.

Quantity on pack

In this layout, one or more items are shown pulled out of the pack, and the number of items is shown on the pack.

Quantity on pull-out

In this layout, one or more items are shown pulled out of the pack, and the number of items is shown on the pull-out.

Quantity obvious

In this layout, the pack is shown at an angle to make it obvious how many items are in the pack.

Back to top

Bundle layouts

Bundle layouts are a special case, where one image tile is used to represent the sale of multiple items, but these items are not held together by any packaging. The following layouts have been created for this situation, and these are described in detail within the page about bundle layouts.

Digital tray

In this layout a single item is shown, together with a digitally created tray that could contain the total number of items that are being sold.

Digital sleeve

In this layout the packs are shown partially enclosed in a digitally created sleeve.

Digital box

In this layout the pack is shown together with a digitally created box, which communicates the number of packs, and the size of each pack.

Simulated shelf

This layout shows all of the packs that are being sold, together with off-pack lozenges that describe the number of packs and the size of each pack.

Back to top

Feedback

We would welcome your feedback on this page:

Privacy policy. If your feedback comments warrant follow-up communication, we will send you an email using the details you have provided. Feedback comments are anonymized and then stored on our file server. If you select the option to receive or contribute to the news bulletin, we will store your name and email address on our file server for the purposes of managing your subscription. You can unsubscribe and have your details deleted at any time, by using our Unsubscribe form. If you select the option to receive an activation code, we will store your name and email address on our fileserver indefinitely. This information will only be used to contact you for the specific purpose that you have indicated; it will not be shared. We use this personal information with your consent, which you can withdraw at any time.

Read more about how we use your personal data. Any e-mails that are sent or received are stored on our mail server for up to 24 months.

Unless otherwise stated, all images are © Unilever and used with permission. Walkers is a trademark owned and designed by PepsiCo and used with permission.

Mobile Ready Hero Image Guidelines