Butterfly

Butterfly Desktop is a vertical Commerce Display unit that consists of a Branding Zone (containing the Product Buttons, CTA, or Legal Text) and a Product Zone.

Butterfly Mobile is a horizontal Commerce Display unit that consists of a Branding Zone with up to 4 product buttons and a Product Zone that displays the selected SKU.

Points to remember:

• Available within the grid.

• It displays dynamic e-retail features and real-time product information.

• A backup SKU setup is available for out-of-stock products.

Design Checklist

Web Accessibility Compliance

• Creative meets WCAG 2.0 Level AA contrast requirements – check here.

• Creative meets Web Accessibility text size requirements.

Customizations

• Provide HEX codes for Product Button & button text colors (default & hover)

Desktop

1. Dimensions

   • The background image is exactly 310 x 500 px or 270 x 390 px (size depends on the retailer).

2. Safety Zone

   • All crucial imagery, logos, and text are included within the safety zone.  

3. Export

   • The image should be JPEG, PNG, or GIF format.

   • The creative file size should not be more than 300 KB.

4. Customizations

   • Provide HEX code for background color.

   • Optional add-on: Provide HEX code for CTA button(s) color & CTA text and URL.

   • Optional add-on: Provide legal text (optional) – 90 characters maximum, including spaces.

Mobile

1. Dimensions

   • Creative is exactly 1242 x 300 px.

   • The logo image (if applicable) is exactly 460 x 300 px

2. Export

   • The creative should be JPEG, PNG, or GIF format.

   • The creative should have a resolution of 72 DPI.

   • The creative file size should not be more than 300 KB.

To learn more about this format including major guidelines and sample creatives, check out our guide Creative Formats.